一、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>
三、效果展示