work——实现

chuncuoji8215

于 2018-10-18 13:46:00 发布

阅读量147

点赞数

原文链接：https://my.oschina.net/1824375992/blog/2248722

版权

work1.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>大风车</title>
    <style>
        div{
            height: 530px;
            width: 530px;
            position: absolute;
        }
        body{
            margin: 0px;
            padding: 0px;
            background: #0ff0f0;
        }
        .d1{
            left: 20%;
            top:20%;
        }
        .d2{
            background-image: url('images/main5-pic3.png');
            animation: run 10s linear infinite;
            top:0px;
        }
        .d3{
            background-image: url('images/main5-pic1.png');
            animation: run 10s linear infinite;
            top:0px;
        }
        .d4{
            background-image: url('images/main5-pic2.png');
            animation: run2 10s linear infinite;
            top:0px;
        }

        @keyframes run{
            0%{transform:rotate(0deg);}
            25%{transform:rotate(90deg);}
            50%{transform:rotate(180deg);}
            75%{transform:rotate(270deg);}
            100%{transform:rotate(360deg);}
        }
        @keyframes run2{
            0%{transform:rotate(0deg);}
            25%{transform:rotate(-90deg);}
            50%{transform:rotate(-180deg);}
            75%{transform:rotate(-270deg);}
            100%{transform:rotate(-360deg);}
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d3"></div>
        <div class="d4"></div>
        <div class="d2"></div>
    </div>
</body>
</html>

work2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>分享网</title>
    <style>
        body,html{
            margin: 0;
            padding: 0;
            position: absolute;
        }
        ul{
            list-style-type: none;
            position: fixed;
            top: -12px;
            right: 20%;
        }
        li{
            float: left;
            width: 119px;
            text-align:center;
            transition: background-image  0s  ease  0s;
        }
        .li1{
            background-image: url(image/nav_hover.gif);
        }
        .a1{
            text-decoration: none;
            color: red;
        }
        .a2{
            font-size: 25px;
            color: #00ff00;
        }
        li:hover{
            background-image: url(image/nav_hover.gif);
        }
        .head{
            height: 4px;
            width: 100%;
            background: #000000;
            position: fixed;
            left: 0px;
        }
        .foot1{
            bottom: 0px;
        }
        .foot2{
            height: 30px;
            width: 60%;
            background: #000000;
            position: fixed;
            left: 20%;
            bottom: 4px;
            text-align: center;
            color: #fff;
            font-size: 22px
        }
        .d1{
            position: fixed;
            left: 20%;
            top: 30px;
            font-size: 30px;
        }
        .d2{
            height: 133px;
            width: 100%;
            background-image: url('image/site-strike.jpg');
            position: fixed;
            top: 100px;
        }
        .d3{
            width: 60%;
            height: 80%;
            position: fixed;
            top: 250px;
            left: 20%;
        }
        .d4{
            width: 38%;
            height: 80%;
            position: fixed;
            top: 250px;
            left: 20%;
        }
        .d5{
            width: 18%;
            height: 40%;
            position: fixed;
            top: 250px;
            right: 20%;
        }
        .d6{
            width: 18%;
            height: 40%;
            position: fixed;
            bottom: 0px;
            right: 20%;
        }
        .d7{
            width: 1px;
            height: 80%;
            position: fixed;
            top: 250px;
            left: 60%;
            background: url('image/line_bg.gif') center;
        }
        .d8{
            height: 50px;
            color: #000000;
            font-size: 35px
        }
        .d9{
            height: 1px;
            width:100%;
            background-image: url('image/dots.gif');
        }
        .d10{
            height: 28px;
            width: 60%;
            background: url('image/sample-cactus.jpg') no-repeat center;
            transform: scale(1.7,1.2);
            position: absolute;
            top: 70px;
            right: 20%;
        }
        .d11{
            height: 40%;
            width: 100%;
            position: absolute;
            top: 170px;
        }
    </style>
</head>
<body>
    <div class="head"></div>
    <ul>
        <li class="li1"><a href="#" class="a1">首页</a></li>
        <li><a href="#" class="a1">关于</a></li>
        <li><a href="#" class="a1">服务</a></li>
        <li><a href="#" class="a1">联系我们</a></li>
    </ul>
    <div class="d1">我爱<a href="#" class="a1">分享网</a></div>
    <div class="d2"></div>
    <div class="d3">
        <div class="d4">
            <div class="d8">科普内容</div>
            <div class="d9"></div>
            <div style="font-size: 24px;">
			    <p>&nbsp &nbsp &nbsp &nbsp  搜索引擎优化（Search Engine Optimization，简称SEO）是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引擎内的排名的方式。深刻理解是：通过SEO这样一套基于搜索引擎的营销思路，为网站提供生态式的自我营销解决方案，让网站在行业内占据领先地位，从而获得品牌收益。研究发现，搜索引擎的用户往往只会留意搜索结果最前面的几个条目，所以不少网站都希望通过各种形式来影响搜索引擎的排序。当中尤以各种依靠广告维生的网站为甚。所谓“针对搜索引擎作最佳化的处理”，是指为了要让网站更容易被搜索引擎接受。</p>
			    <p>&nbsp &nbsp &nbsp &nbsp  SEO是指通过采用易于搜索引擎索引的合理手段，使网站各项基本要素适合搜索引擎检索原则并且对用户更友好（Search Engine Friendly），从而更容易被搜索引擎收录及优先排序从属于SEM（搜索引擎营销）。SEO的中文意思是搜索引擎优化。通俗理解是：通过总结搜索引擎的排名规律，对网站进行合理优化，使你的网站在百度和Google的排名提高，让搜索引擎给你带来客户。深刻理解是：通过SEO这样一套基于搜索引擎的营销思路，为网站提供生态式的自我营销解决方案，让网站在行业内占据领先地位，从而获得品牌收益。</p>
            </div>
        </div>
        <div class="d7"></div>
        <div>
            <div class="d5">
                <div class="d8">最近发表</div>
                <div class="d9"></div> 
                <div class="d10"></div>
                <div class="d11">
                    <a href="#" class="a2">[09/25]【官方说明】网站流量异常，如何正确反馈？</a><br/>
                    <a href="#" class="a2">[09/25]【官方说明】官网保护工具如何通过申请？</a>
                </div>
            </div>
            <div class="d6">
                <div class="d8">网站收藏</div>
                <div class="d9"></div>    
                <div class="d10"></div> 
                <div class="d11">
                    <a href="#" class="a2">PS教程</a><br/>
                    <a href="#" class="a2">SEO自学网</a>
                </div>
            </div>
        </div>
    </div>
    <div class="foot2">
        Copyright © 2018 uncleliang, All Rights Reserved. </div>
    <div class="head foot1"></div>
</body>
</html>

转载于:https://my.oschina.net/1824375992/blog/2248722