CSS 2.6 仿360囧图

原创于 2018-11-29 10:30:42 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#仿360囧图

CSS Note 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了使用CSS和HTML进行网页布局的具体实践，包括清除浮动、动画效果、响应式设计等，通过具体代码展示了如何创建美观且功能丰富的网页。

一、CSS

@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: #ffffff;
}
body{
    background: rgba(20 ,20, 20, 0.2);
}
header{
    height: 50px;
    width: 100%;
    background: url("img/bj.png") repeat-x;
}
nav{
    width: 1000px;
    height: 50px;
    margin: 0 auto;
}
h1{
    color: #fff;
    font:bold  40px "隶书" ;
    float: left;
    margin-left: 50px;
}
nav li{
    float: left;
    font-size: 20px;
    height: 50px;
    line-height:50px ;
    letter-spacing: 5px;
    margin-right: 5px;
    width: 100px;
    text-align: center;
}
aside{
    position: fixed;
    left: 20px;
    top: 100px;
}
.div1{
    width: 930px;
    margin: 0 auto;
    overflow: hidden;
}
.div2{
    width: 2000px;
}
.div3{
    width: 910px;
    float: left;
    margin: 10px auto;
    animation: my 10s linear infinite;
    position: relative;
    background-color: white;
}
.div3:hover{
    animation-play-state: paused;
}
.li1{
    display: block;
    float: left;
    margin: 5px;
    text-align: center;
}
.ul1:hover,.li1:active{
    color: orange;
}
.mid_nav{
    width:930px;
    height: 50px;
}
.mid_nav a{
    width: 100px;
    margin: 10px 10px;
    letter-spacing: 5px;
    height: 50px;
    line-height: 50px;
    font-size: 20px ;
}
.mid_nav>a:hover{
    color: #0088ff;
}
.ul2{
    margin: 0px auto;
    width: 930px;
    height: 450px;
    text-align: center;
    background: white;
}
.li2{
    float: left;
    margin: 5px 7px 5px 7px ;
}
#more{
    width: 930px;
    height: 50px;
    margin: 5px auto;
    line-height: 50px;
    text-align: center;
    background-color: white;
}
#more a{
    color: black;
}

.footnav{
    width: 50%;
    height: 100%;
    float: left;
}
.footnav1{
    width: 50%;
    height: 100%;
    float: left;
}
.footnav h3{
    text-align: center;
}
.footnav1 h3{
    text-align: center;
}
.foot-list2 li{
    margin: 0px  7px;
}
.foot-list2{
    width: 100%;
    height: 100%;

}
.li-list{
    margin: 0px 27px;
}
.foot-list{
    width: 100%;
    height: 100%;
}
.foot{
    width: 930px;
    height: 120px;
    margin: 0px auto;
}
@keyframes my {
    0%{
        left: -90px;
    }
    10%{
        left: -180px ;
    }
    20%{
        left: -270px;
    }
    30%{
        left: -360px;
    }
    40%{
        left: -450px;
    }
    50%{
        left: -540px;
    }
    60%{
        left: -630px;
    }
    70%{
        left: -720px;
    }
    80%{
        left: -810px;
    }
    90%{
        left: -910px;
    }
    100%{
        left: -910px;
    }
}

二、HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="back.css">
    <title></title></head>
<body>
<header>
    <nav><h1>360笑话</h1>
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">精选</a></li>
            <li><a href="">囧图</a></li>
            <li><a href="">视频</a></li>
            <li><a href="">导姐</a></li>
            <li><a href="">趣闻</a></li>
        </ul>
    </nav>
</header>
<aside><img src="img/fixed.jpg" alt=""></aside>
<div class="div1">
    <div class="div2">
        <div class="div3">
            <ul class="ul1">
                <li class="li1"><a href=""><img src="img/p1.jpg" alt=""></a>
                    <p>一招制敌</p></li>
                <li class="li1"><a href=""><img src="img/s1.jpg" alt=""></a>
                    <p>0</p></li>
                <li class="li1"><a href=""><img src="img/s2.jpg" alt=""></a>
                    <p>1</p></li>
                <li class="li1"><a href=""><img src="img/s3.jpg" alt=""></a>
                    <p>2</p></li>
                <li class="li1"><a href=""><img src="img/s4.jpg" alt=""></a>
                    <p>3</p></li>
                <li class="li1"><a href=""><img src="img/s5.jpg" alt=""></a>
                    <p>4</p></li>
                <li class="li1"><a href=""><img src="img/s6.jpg" alt=""></a>
                    <p>5</p></li>
                <li class="li1"><a href=""><img src="img/s7.jpg" alt=""></a>
                    <p>6</p></li>
                <li class="li1"><a href=""><img src="img/s8.jpg" alt=""></a>
                    <p>7</p></li>
            </ul>
        </div>
        <div class="div3">
            <ul class="ul1">
                <li class="li1"><a href=""><img src="img/p1.jpg" alt=""></a>
                    <p>一招制敌</p></li>
                <li class="li1"><a href=""><img src="img/s1.jpg" alt=""></a>
                    <p>0</p></li>
                <li class="li1"><a href=""><img src="img/s2.jpg" alt=""></a>
                    <p>1</p></li>
                <li class="li1"><a href=""><img src="img/s3.jpg" alt=""></a>
                    <p>2</p></li>
                <li class="li1"><a href=""><img src="img/s4.jpg" alt=""></a>
                    <p>3</p></li>
                <li class="li1"><a href=""><img src="img/s5.jpg" alt=""></a>
                    <p>4</p></li>
                <li class="li1"><a href=""><img src="img/s6.jpg" alt=""></a>
                    <p>5</p></li>
                <li class="li1"><a href=""><img src="img/s7.jpg" alt=""></a>
                    <p>6</p></li>
                <li class="li1"><a href=""><img src="img/s8.jpg" alt=""></a>
                    <p>7</p></li>
            </ul>
        </div>
    </div>
</div>
<div>
    <nav class="mid_nav"><a href="">首页</a> <a href="">精选</a> <a href="">囧图</a> <a href="">视频</a></nav>
</div>
<div>
    <ul class="ul2">
        <li class="li2"><a href=""><img src="img/s1.jpg" alt=""></a>
            <p>0</p></li>
        <li class="li2"><a href=""><img src="img/s2.jpg" alt=""></a>
            <p>1</p></li>
        <li class="li2"><a href=""><img src="img/s3.jpg" alt=""></a>
            <p>2</p></li>
        <li class="li2"><a href=""><img src="img/s4.jpg" alt=""></a>
            <p>3</p></li>
        <li class="li2"><a href=""><img src="img/s5.jpg" alt=""></a>
            <p>4</p></li>
        <li class="li2"><a href=""><img src="img/s6.jpg" alt=""></a>
            <p>5</p></li>
        <li class="li2"><a href=""><img src="img/s7.jpg" alt=""></a>
            <p>6</p></li>
        <li class="li2"><a href=""><img src="img/s8.jpg" alt=""></a>
            <p>7</p></li>
        <li class="li2"><a href=""><img src="img/s1.jpg" alt=""></a>
            <p>0</p></li>
        <li class="li2"><a href=""><img src="img/s2.jpg" alt=""></a>
            <p>1</p></li>
        <li class="li2"><a href=""><img src="img/s3.jpg" alt=""></a>
            <p>2</p></li>
        <li class="li2"><a href=""><img src="img/s4.jpg" alt=""></a>
            <p>3</p></li>
        <li class="li2"><a href=""><img src="img/s5.jpg" alt=""></a>
            <p>4</p></li>
        <li class="li2"><a href=""><img src="img/s6.jpg" alt=""></a>
            <p>5</p></li>
        <li class="li2"><a href=""><img src="img/s7.jpg" alt=""></a>
            <p>6</p></li>
    </ul>
</div>
<div id="more"><a href="">点击加载更多</a></div>
<footer>
    <section class="foot">
        <nav class="footnav"><h3>轻松生活</h3>
            <ul class="foot-list">
                <li class="li-list"><a href="">星座运程</a></li>
                <li class="li-list"><a href="">周公解梦</a></li>
                <li class="li-list"><a href="">美女图库</a></li>
                <li class="li-list"><a href="">彩票开奖</a></li>
                <li class="li-list"><a href="">旅游景点</a></li>
                <li class="li-list"><a href="">心理测试</a></li>
            </ul>
        </nav>
        <nav class="footnav1 "><h3>消磨时间</h3>
            <ul class=" foot-list2">
                <li><a href="">小说</a></li>
                <li><a href="">NBA</a></li>
                <li><a href="">八卦</a></li>
                <li><a href="">交友</a></li>
                <li><a href="">新闻</a></li>
                <li><a href="">军事</a></li>
                <li><a href="">时尚</a></li>
                <li><a href="">曲艺</a></li>
            </ul>
        </nav>
    </section>
</footer>
</body>
</html>

三、效果展示