zoukankan      html  css  js  c++  java
  • 一阶段项目 流浪猫

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>流浪猫援助</title>
    <style>

    #top1 {
    100%;
    height:35px;
    /*border:1px solid black;*/
    border-bottom:0.1px solid #9E9E9E;
    }
    .top1 {
    600px;
    height:35px;
    /*border:1px solid black;*/
    margin-left:10px;
    text-align:center;
    line-height:35px;
    float:left;



    }
    .top2 {
    300px;
    height:35px;
    /*border:1px solid black;*/
    margin-left:410px;
    text-align:center;
    line-height:35px;
    float:left;

    }

    .top1 a:hover {
    cursor: pointer;
    color:red;
    }
    a:link {
    color:black;
    }

    .top2 a:hover{
    cursor: pointer;
    color:red;
    }
    .top3 {
    100%;
    height:130px;
    /*border:1px solid black;*/
    float:left;

    }
    .top4 {
    260px;
    height:100px;
    /*border:1px solid black;*/
    margin-top:0px;
    margin-left:55px;
    float:left;
    margin-top:3px;
    }

    .tx {
    498px;
    height:40px;
    border:1px solid red;
    float:left;
    margin-top:55px;
    margin-left:50px;


    }
    .wenben {
    background: #f65;
    height: 43px;
    92px;
    cursor: pointer;
    float: left;
    font: 18px/34px "Microsoft YaHei";
    color: #fff;
    border: none;
    margin-top:55px;
    }
    .top5 {
    450px;
    height:35px;
    /*border:1px solid black;*/
    margin-top:95px;
    margin-left:364px;
    line-height:35px;
    font-family: SimSun;
    font-size: 14px;
    color:#999;
    text-decoration: none;
    }

    .top5-right {
    180px;
    height:40px;
    /*border:1px solid black;*/
    float: left;
    margin-left:1113px;
    margin-top:-80px;
    }
    .dhh {
    100%;
    height:50px;
    /*border:1px solid black;*/
    float: left;
    background-color:#EE3B3B;
    }
    .dhh1, .dhh2, .dhh3, .dhh4, .dhh5, .dhh6 {
    130px;
    height:50px;
    /*border:1px solid black;*/
    float:left;
    text-align:center;
    line-height:50px;

    border-right:0.3px solid #9E9E9E;
    color: #FFF;
    font: 18px/44px "Microsoft YaHei";

    }

    .dhh1:hover, .dhh2:hover, .dhh3:hover, .dhh4:hover, .dhh5:hover, .dhh6:hover {
    cursor: pointer;
    background-color:#EE0000;
    }
    .dhh1 {
    margin-left:50px;
    }
    .dhh7 {
    140px;
    height:50px;
    /*border:1px solid black;*/
    float:left;
    margin-left:310px;
    text-align:center;
    line-height:50px;
    color:white;
    font: 18px/44px "Microsoft YaHei";

    }
    .dhh7:hover {
    cursor: pointer;
    background-color:#EE0000;
    }
    .center1 {
    100%;
    height:540px;
    border:1px black solid;
    }

    .center1-1 {
    margin: 0px auto;
    60%;
    height: 540px;
    }
    a{
    text-decoration: none;}
    #b {
    1480px;
    height:50px;
    border:0px solid black;
    text-align:center;
    margin:20px;
    font-size:30px;
    }
    #c {
    1480px;
    height:860px;
    border:0px solid black;
    background-image:url(猫爪1.jpg);
    margin:20px 0px 0px 50px;
    }
    .left {
    500px;
    height:100%;
    border:1px solid black;
    float:left;
    }


    .left-top {
    100%;
    height:50px;
    border:1px solid black;
    text-align:center;
    line-height:50px;
    font-size:10px;
    color:red;
    float:left;
    }
    .left-btm {
    background-image:url(猫爪1.jpg);

    }
    .right {
    900px;
    height:100%;
    /*border:1px solid black;*/
    float:left;
    text-align:center;
    font-size:10px;
    background-image:url(猫爪1.jpg);


    }

    #stage{
    700px;
    height: 468px;
    border: 1px solid black;
    margin: 100px 20px 100px 50px;
    position: relative;
    overflow: hidden;

    }

    #ad-banner{
    2100px;
    height: 468px;
    background-color: brown;
    position: relative;
    z-index: 980;
    /*margin-left: -300px;*/
    }
    .ad{
    position: relative;
    700px;
    height: 468px;
    float: left;
    color: white;
    /*font-size: 100px;
    text-align: center;
    line-height: 200px;*/
    z-index: 990;
    }
    #btn-left,#btn-right{
    20px;
    height: 30px;
    position: absolute;
    top: 200px;
    background-color: black;
    z-index: 999;
    color: white;
    opacity: 0.5;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    font-weight: bold;
    }

    #btn-left{
    left: 0px;
    }
    #btn-right{
    right: 0px;
    }

    #btn-left:hover,#btn-right:hover{
    opacity: 0.8;
    cursor: pointer;
    }
    #btm {
    1480px;
    height:50px;
    border:0px solid red;
    margin:20px 0px 0px 50px;
    background-image:url(猫爪1.jpg);

    }

    .btm1 {
    50px;
    height:25px;
    border:1px solid black;
    text-align:center;
    margin:10px 10px 0px 10px;
    float:left;
    }
    .btm2 {
    50px;
    height:25px;
    border:1px solid black;
    text-align:center;
    margin:10px 10px 0px 10px;
    float:left;
    }

    .btm3 {
    50px;
    height:25px;
    border:1px solid black;
    text-align:center;
    margin:10px 10px 0px 10px;
    float:left;}
    .btm4 {
    50px;
    height:25px;
    border:1px solid black;
    text-align:center;
    margin:10px 10px 0px 10px;
    float:left;}
    .btm5 {
    50px;
    height:25px;
    border:1px solid black;
    text-align:center;
    margin:10px 10px 0px 10px;
    float:left;}
    .btm6 {
    50px;
    height:25px;
    border:1px solid black;
    text-align:center;
    margin:10px 10px 0px 10px;
    float:left;}
    .btm7 {
    50px;
    height:25px;
    border:1px solid black;
    text-align:center;
    margin:10px 10px 0px 10px;
    float:left;}
    .btm8 {
    50px;
    height:25px;
    border:1px solid black;
    text-align:center;
    margin:10px 10px 0px 10px;
    float:left;}

    .btm9 {
    50px;
    height:25px;
    border:1px solid black;
    text-align:center;
    margin:10px 10px 0px 10px;
    float:left;}
    #btm2 {
    1560px;
    height:300px;
    border:0px solid black;
    margin:10px 10px 0px 10px;
    background-image:url(猫爪1.jpg);
    }
    .img1 {
    203px;
    height:250px;
    border:0px solid black;
    margin:20px 10px 10px 10px;
    float:left;
    text-align:center
    }
    .img2 {
    203px;
    height:250px;
    border:0px solid black;
    margin:20px 10px 10px 10px;
    float:left;
    text-align:center
    }

    .img3 {
    203px;
    height:250px;
    border:0px solid black;
    margin:20px 10px 10px 10px;
    float:left;
    text-align:center
    }
    .img4 {
    203px;
    height:250px;
    border:0px solid black;
    margin:20px 10px 10px 10px;
    float:left;
    text-align:center
    }
    .img5 {
    203px;
    height:250px;
    border:0px solid black;
    margin:20px 10px 10px 10px;
    float:left;
    text-align:center
    }
    .img6 {
    203px;
    height:250px;
    border:0px solid black;
    margin:20px 10px 10px 10px;
    float:left;
    text-align:center
    }

    .img7 {
    203px;
    height:250px;
    border:0px solid black;
    margin:20px 10px 10px 10px;
    float:left;
    text-align:center
    }
    .img8 {
    203px;
    height:250px;
    border:0px solid black;
    margin:20px 10px 10px 10px;
    float:left;
    text-align:center
    }
    .bottomdhh {
    100%;
    height: 121px;
    /*border:1px solid black;*/
    float: left;
    margin-top: 30px;
    }

    .biao {
    1480px;
    height:170px;
    /*border:1px solid black;*/
    float:left;
    margin-left:55px;
    border-bottom:0.5px solid gray;
    }
    .biao1{
    345px;
    height:143px;
    /*border:1px solid black;*/
    float:left;
    margin-top:15px;

    }
    .biao2{
    140px;
    height:154px;
    /*border:1px solid black;*/
    float:left;
    margin-left:420px;
    margin-top:-160px;

    font-size:15px; font-weight:500
    }

    ul {
    list-style:none;
    }
    .li {
    text-align:center;
    padding-top:5px;
    }
    .biao5 {
    140px;
    height: 154px;
    /*border: 1px solid black;*/
    float: left;
    margin-left: 560px;
    margin-top: -160px;
    font-size: 15px;
    font-weight: 500;
    }
    .biao6 {
    140px;
    height: 154px;
    /*border: 1px solid black;*/
    float: left;
    margin-left: 700px;
    margin-top: -160px;
    font-size: 15px;
    font-weight: 500;
    }

    .biao7 {
    140px;
    height: 154px;
    /*border: 1px solid black;*/
    float: left;
    margin-left: 840px;
    margin-top: -160px;
    font-size: 15px;
    font-weight: 500;
    }
    .biao8 {
    140px;
    height: 154px;
    /*border: 1px solid black;*/
    float: left;
    margin-left: 1000px;
    margin-top: -160px;
    font-size: 15px;
    font-weight: 500;
    }
    .biao9 {
    140px;
    height: 154px;
    /*border: 1px solid black;*/
    float: left;
    margin-left: 1140px;
    margin-top: -160px;
    }
    .biao3 {
    844px;
    height:50px;
    /*border:1px solid black;*/
    float:left;
    border-bottom:0.5px solid gray;
    margin-top:10px;
    margin-left:250px;
    }
    .biao4 {
    844px;
    height:50px;
    /*border:1px solid black;*/
    float:left;
    margin-left:450px;
    }
    </style>
    </head>

    <body>
    <div id="top1">
    <div class="top1">
    <a href="一阶段项目spx.html" style="text-decoration: none;" target="_blank" >ฅ'ω'ฅ ฅ'ω'ฅ 网&nbsp;&nbsp;&nbsp;</a>
    <a href="一阶段项目spx.html" style="text-decoration: none;"target="_blank" > ฅ'ω'ฅ 商城&nbsp;&nbsp;&nbsp;</a>
    <a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank" > ฅ'ω'ฅ 服务&nbsp;&nbsp;&nbsp;</a>
    <a href="一阶段项目spx.html" style="text-decoration: none; " target="_blank"> ฅ'ω'ฅ 论坛&nbsp;&nbsp;&nbsp;</a>
    <a href="一阶段项目spx.html" style="text-decoration: none; " target="_blank"> ฅ'ω'ฅ 百科&nbsp;&nbsp;&nbsp;</a>
    </div>
    <div class="top2">
    <a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank" > 登录&nbsp;&nbsp;&nbsp;</a>
    <a href="一阶段项目spx.html" style="text-decoration: none; " target="_blank">注册&nbsp;&nbsp;&nbsp;</a>
    <a href="一阶段项目spx.html" style="text-decoration: none; "target="_blank" >微博&nbsp;&nbsp;&nbsp;</a>
    <a href="一阶段项目spx.html" style="text-decoration: none; " target="_blank">微信&nbsp;&nbsp;&nbsp;</a>
    <a href="一阶段项目spx.html" style="text-decoration: none;" target="_blank">手机版&nbsp;&nbsp;&nbsp;</a>
    </div>

    </div>
    <div class="top3">
    <div class="top4">
    <img src="logo.jpg"/> </div>
    <input type="text" class="tx" id="d1" name="text"/>
    <input type="submit" class="wenben" id="button" name="button" value="搜 索"/>
    <div class="top5">
    热门搜索:
    <a href="http://" target="_blank" style="text-decoration: none;"> ฅ'ω'ฅ粮</a>
    <a href="http://" target="_blank" style="text-decoration: none;"> ฅ'ω'ฅ商城</a>
    <a href="http://" target="_blank" style="text-decoration: none;">金猫</a>
    <a href="http://" target="_blank" style="text-decoration: none;">金吉拉</a>
    </div>
    <div class="top5-right">
    <img src="ad2.gif"/>
    </div>
    </div>

    <div class="dhh">
    <div class="dhh1" style="margin-left:55px;"><a href="一阶段项目spx.html" style="text-decoration: none; color: #FFF;">首页</a></div>
    <div class="dhh2"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">种类</a></div>
    <div class="dhh3"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">ฅ'ω'ฅ商城</a></div>
    <div class="dhh4"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">ฅ'ω'ฅ医生</a></div>
    <div class="dhh5"><a href="ฅ'ω'ฅ天下.html" style="text-decoration: none;color: #FFF "target="_blank">ฅ'ω'ฅ天下</a></div>
    <div class="dhh6"><a href="流浪猫.html" style="text-decoration: none;color: #FFF"target="_blank">流浪ฅ'ω'ฅ</a></div>
    <div class="dhh7"><a href="一阶段项目spx.html" style="text-decoration: none;color: #FFF "target="_blank">购物车</a></div>
    </div>
    <br />

    <div id="c">
    <div class="left">
    <div class="left-top">我们该怎样对待流浪猫</div>
    <div class="c1-left-btm">&nbsp;&nbsp;&nbsp;&nbsp;爱动物的你一定会发现在自己生活的城市有许多流浪动物,近几年身边的流浪狗明显减少了,但是流浪猫却没有很大的改善。
    很多人觉得流浪动物身上带有太多疾病、寄生虫等,所以会支持捕杀,但是一味的捕杀真的有用吗?
    <br />
    <br />
    &nbsp;&nbsp;&nbsp;&nbsp;一、国外是如何对待流浪猫的
    <br />

    意大利:遗弃猫的人将被判一年监禁。
    <br />
      日本:如果主人无力饲养伴侣动物,政府动物保办公室会接受你无力饲养的伴侣动物,并会酌情收取一些费用。
    <br />
      新加坡:农粮兽医局下属的动物安康与控制中心负责收留流浪猫,提供处理流浪动物问题的技术援助,处理与动物安康或虐待动物等有关的问题,通过出版刊物、演讲和展览等方式教育宠物主人以负责的态度对待宠物。
    <br />
      美国:在社区中,每10万人口便需要建立50个左右的动物笼舍,供暂时收容无主人的动物。此举可有效减低流浪动物对社会环境所造成的影响。
    <br />
    <br />

    二、如何科学救助流浪动物
    <br />
      其实如何救助、救助到什么程度只能看个人的能力了。如果可以的话,给流浪猫一点吃的,一盆干净的水他们都会记住你的恩情,只是小编要提醒你的是,不要给流浪猫带有骨头、鱼刺的食物,那很可能会要了他们的命。
    <br />
      如果你有一定的经济能力,可以给他们提供帮助的话,目前国际上最有效的救助流浪猫的方法就是“TNR”“抓捕—绝育—放归 Trap-Neuter-Release”。TNR就是考虑到很多流浪猫无法习惯家庭圈养,宁可自己逃走,在外自由自在的生活,那么对于这些猫咪来说,这种救助方式是最适合的。
    <br />
      在为流浪猫咪绝育放归后,将他们放回到原本熟悉的环境中,定点喂食喂水,猫咪如果在绝育后不能适应在外流浪的生活,那么救助者可以联系动物救助组织,为他们寻找合适的领养家庭。 
    <br />
    <br />

    &nbsp;&nbsp;&nbsp;&nbsp;三、救助注意事项
    <br />
      在救助过程中,一定要考虑到周围环境和其他正常居民的生活,喂食流浪猫记得收拾好,保证不要弄脏环境为前提,毕竟一旦发生冲突,受伤的往往是最无辜的动物。
    <br />
      救助者们一定要考虑自己的能力进行救助,家人的支持、经济能力都要考虑进去,一旦超出了自己的能力救助的话,对于猫咪来说也是另一种伤害。
    </div>
    </div>

    <div class="right">
    <div id="stage">
    <div id="btn-left"onclick="moveRightclick()"><</div>
    <div id="btn-right" onclick="moveLeftclick()">></div>
    <div id="ad-banner">
    <div class="ad"><a href="名义.html"target="_blank"><img src="流浪猫1.jpg"/></a></div>
    <div class="ad"><a href=""><img src="流浪猫2.jpg"/></a></div>
    <div class="ad"><a href=""><img src="流浪猫3.jpg"/></a></div>

    </div>
    </div>

    <ul>
    <li><a href="">新生孤儿猫的人工喂养方法(如果你捡到了孤儿新生猫)</a></li>
    <br />
    <li><a href="">个体救助流浪猫狗陷困局 相关人士建议控制收容总量</a></li>
    <br />
    <li><a href="名义.html"target="_blank">那些以“爱”的名义赠送猫咪的人</a></li>
    </ul>
    </div>

    </div>

    <br />
    <br />
    <br />
    <br />
    <hr />
    <h1><b><center>领养/赠送</center></b></h1>

    <br />
    <hr />
    <div id="btm">
    <div class="btm1"><a href="">全部</a></div>
    <div class="btm2"><a href="">北京</a></div>
    <div class="btm3"><a href="">天津</a></div>
    <div class="btm4"><a href="">上海</a></div>
    <div class="btm5"><a href="">山东</a></div>
    <div class="btm6"><a href="">河北</a></div>
    <div class="btm7"><a href="">河南</a></div>
    <div class="btm8"><a href="">辽宁</a></div>
    <div class="btm9"><a href="">青岛</a></div>
    </div>
    <div id="btm2">

    <div class="img1"><img src="流浪猫4.jpg" />
    <a href="">用事实说话:孩子和宠物可以兼得</a></div>
    <div class="img2"><img src="流浪猫5.jpg" />
    <a href="">从猫贩子屠刀下救出的孩子们找麻麻——天津700猫基地美猫寻亲记</a></div>
    <div class="img3"><img src="流浪猫6.jpg" />
    <a href="">北京)和平里赵明阿姨家的60只猫等待你的领养、</a></div>
    <div class="img4"><img src="流浪猫7.jpg" />
    <a href="">不要见了纯种猫就扑上去,小心被骗!</a></div>
    <div class="img5"><img src="流浪猫8.jpg" />
    <a href="">2个月短毛萌三花“五月”寻领养</a></div>
    <div class="img6"><img src="流浪猫9.jpg" />
    <a href="">2.5岁阳光小王子“小黑”寻领养</a></div>
    <!--<div class="img7"><img src="流浪猫10.jpg" />
    -->
    </div>
    <br />
    <br />

    <div class="biao3"><img src="biao1.jpg.jpg" /></div>
    <div class="biao4"><img src="biao.888.jpg.jpg" /></div>
    </body>
    </html>
    <script>
    var ad_banner = document.getElementById("ad-banner");
    var arr = [];
    var count = 1;
    function moveLeftclick() {
    if (count == 3) {
    return false;
    } else {
    arr.push(window.setInterval("moveLeft()", 20));
    }
    }

    function moveLeft() {
    ad_banner.style.marginLeft = ad_banner.offsetLeft - 10 + "px";
    if (ad_banner.offsetLeft == -700 * count) {
    for (var x in arr) {
    window.clearInterval(arr[x]);
    }
    count++;
    }
    }
    function moveRightclick() {
    if (count == 1) {
    return false;
    } else {
    arr.push(window.setInterval(moveRight, 20));
    }

    }

    function moveRight() {
    ad_banner.style.marginLeft = ad_banner.offsetLeft + 10 + "px";
    if (ad_banner.offsetLeft == -700 * (count - 2)) {
    for (var x in arr) {
    window.clearInterval(arr[x]);
    }
    count--;
    }

     }

    </script>

  • 相关阅读:
    【转】使用setuptools简化Python模块的安装
    【转】CPU位数、核数、个数
    JS中的一些注意事项
    关于新浪微博在.net中的应用,配置极其使用
    [字符集]Unicode和UTF8之间的转换详解
    Const用法小结
    C++中虚析构函数的作用
    CTreeCtrl 的一点基础代码
    C2143: 语法错误 C4430: 缺少类型说明符 假定为 int 原因是没有包含头文件(含糊不清,以备查)
    mfc 窗口 分割
  • 原文地址:https://www.cnblogs.com/qwer123666/p/6955820.html
Copyright © 2011-2022 走看看