标签：上海迪士尼 border 会员 span nbsp 页面 cal inline 底部
这是自己完成的第一个页面以下是html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>disney</title> <link rel="stylesheet" href="../css/disney.css"> </head> <body> <div class="box"> <!--------------------导航------------------------------> <header> <nav> <ul> <li><a href="#"><i></i>首页</a></li> <li><a href="#"><i></i>商店</a></li> <li><a href="#"><i></i>乐园</a></li> <li><img src="../image/b_logo.png" alt=""></li> <li><a href="#"><i></i>影视</a></li> <li><a href="#"><i></i>数码</a></li> <li><a href="#"><i></i>会员</a></li> </ul> </nav> </header> <figure> <img src="../image/160216172223655101.jpg" alt=" "/> </figure> <!-------------------明星-----------------------> <div class="box1"> <h1>明星</h1> <ul> <li> <figure> <img src="../image/151209173849244246.jpg" alt=""> <figcaption> <a href="#">米奇和他的朋友们</a> </figcaption> </figure> </li> <li> <figure> <img src="../image/151209173747572402.jpg" alt=""> <figcaption> <a href="#">迪士尼公主</a> </figcaption> </figure> </li> <li> <figure> <img src="../image/151130185638114248.jpg" alt=""> <figcaption> <a href="#">赛车总动员</a> </figcaption> </figure> </li> <li> <figure> <img src="../image/151130185656630780.jpg" alt=""> <figcaption> <a href="#">小公主菲苏亚</a> </figcaption> </figure> </li> <li> <figure> <img src="../image/151130185733287815.jpg" alt=""> <figcaption> <a href="#">冰雪奇缘</a> </figcaption> </figure> </li> <li> <figure> <img src="../image/151130185754146838.jpg" alt=""> <figcaption> <a href="#">星球大战</a> </figcaption> </figure> </li> </ul> </div> <!---------------------------------商店---------------------------------> <div class="box2"> <h1>商店</h1> <ul class="fangkuang1"> <li><img src="../image/160322141822716049.jpg" alt=""/></li> <li> <ul> <li> <figure> <img src="../image/161124154351492230.jpg" alt="1"/> </figure> <figcaption> <a href="#">疯狂动物城</a> </figcaption> </li> <li> <figure> <img src="../image/161124160800879755.jpg" alt="2"/> </figure> <figcaption> <a href="#">疯狂动物城</a> </figcaption> </li> <li> <figure> <img src="../image/161124161054476210.jpg" alt="3"/> </figure> <figcaption> <a href="#">疯狂动物城</a> </figcaption> </li> <li> <figure> <img src="../image/161124160800879755.jpg" alt="4"/> </figure> <figcaption> <a href="#">疯狂动物城</a> </figcaption> </li> </ul> </li> </ul> </div> <!---------------------------迪士尼咨询---------------------------> <div class="box3"> <h1>迪士尼咨讯</h1> <ul class="fangkuang2"> <li><img src="../image/160113121641905797.jpg" alt="11"/><h3><a href="#">上海迪士尼开园在即</a></h3> <p> <a href="#">自2016年6月16日起，您将可以探索一个前所未有的神奇世界，每个人都能在这里点亮心中的奇梦。</a> <a href="#"><img src="../image/jiantou_03.jpg" alt=""></a> </p> </li> <li> <ul> <li class="righttop"> <ul class="righttop1"> <li> <img src="../image/160321105131828720.jpg" alt="123"/> <h3><a href="#">《疯狂动物城》票房突破10亿人民币！</a></h3> <p><a href="#">《疯狂动物城》上映第16日登顶中国动画卖座第一，并成为史上首部突破10亿的动画片。</a> <a href="#"><img src="../image/jiantou_03.jpg" alt=""></a> </p> </li> <li> <img src="../image/160225171114064621.jpg" alt="123456"/> <h3><a href="#">全球首座迪士尼音乐报时钟楼正式落成</a></h3> <p><a href="#">迪士尼钟楼将与迪士尼旗舰店一起为上海带来一份奇妙而梦幻就撒谎附件的娱乐购物体验。</a> <a href="#"><img src="../image/jiantou_03.jpg" alt=""></a> </p> </li> </ul> </li> <li class="rightdown"><img src="../image/160229155948703765.jpg" alt="111"/> <h3> <a href="#">《头脑特工队》获得第88届奥斯卡最佳动画长片</a><br> <span><a href="">皮克斯《头脑特工队》获得第88届奥斯卡最佳动画长片！实至名归！</a></span> <a href="#"><img src="../image/jiantou_03.jpg" alt=""></a> </h3> </li> </ul> </li> </ul> </div> <!----------------------------底部--------------------------------> <foot> <div class="box4"> <ul> <li class="box4-1"><img src="../image/b_logo.png" alt=""/></li> <li class="box4-2"><img src="../image/weibo.jpg" alt=""/><p>关注我们微博</p></li> <li class="box4-3"><img src="../image/weibo.jpg" alt=""/><p>关注我们微信</p></li> </ul> </div> <ul class="box5"> <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> <p class="beizhu">Disney l Pixar All rights reserved.备案号：泸B2-20040339-3</p> </foot> </div> </body> </html>
这是css页面
*{ margin: 0px; padding: 0px; list-style: none; } .box img:hover{ transform: scale(1.1); transition: all linear 0.5s; } .box{ width: 1200px; height: 100%; margin: auto; background-color: white; } a{ text-decoration: none; color: black; } nav li{ float: left; width: 14.28%; text-align: center; list-style: none; line-height: 46px; } nav li i{ width: 22px; height: 20px; background: url("../image/icon.png"); display: inline-block; } nav li:nth-child(1):hover i{ background-position: -22px 0; } nav li:nth-child(1):hover a{ color: red; } nav li:nth-child(2) i{ background-position: 0 -19px; } nav li:nth-child(2):hover i{ background-position: -22px -19px; } nav li:nth-child(2):hover a { color: red; } nav li:nth-child(3) i{ background-position: 0 -40px; } nav li:nth-child(3):hover i{ background-position: -22px -40px; } nav li:nth-child(3):hover a { color: red; } nav li:nth-child(5) i{ width: 20px; height: 16px; background-position: 0 -64px; } nav li:nth-child(5):hover i{ background-position: -22px -64px; } nav li:nth-child(5):hover a{ color: red; } nav li:nth-child(6) i{ background-position: 0 -81px; } nav li:nth-child(6):hover i{ background-position: -22px -81px; } nav li:nth-child(6):hover a{ color: red; } nav li:nth-child(7) i{ background-position: 0 -102px; } nav li:nth-child(7):hover i{ background-position: -21px -101px; } nav li:nth-child(7):hover a{ color: red; } /* ===============================明星====================================*/ .box1 li{ float: left; text-align: center; width: 16.66%; list-style: none; } img{ text-decoration: none; } .box1 h1{ text-align: center; margin-bottom: 38px; margin-top: 40px; } .box1 li img{ width: 114px; } .box1 figcaption{ line-height: 80px; } .box1 img:hover{ transform: scale(1.3) rotate(360deg); transition: all linear 1s; } /*============================商店====================================*/ .box2 h1{ text-align: center; margin-bottom: 42px; margin-top: 250px; } .fangkuang1{ width: 1200px; height: 592px; } .fangkuang1 li{ width: 50%; float: left; } .fangkuang1 ul li{ outline: 1px solid #000000; width: 300px; height: 295px; float: left; overflow: hidden; } .box2 figcaption{ text-align: center; } .box2 img:hover{ transform: scale(1.1); transition: all linear 0.5s; } /* ===========================迪士尼咨询========================= */ .box3 h1{ text-align: center; margin-bottom: 44px; margin-top: 58px; } .fangkuang2{ width: 1200px; height: 770px; } .fangkuang2>li{ width:600px; height: 770px; float: left; } .righttop{ width: 600px; height: 474px; } .rightdown{ width: 600px; float: left; display: block; overflow: hidden; clear: both; } .rightdown>h3{ width: 300px; height: 296px; float:right; overflow: hidden; } .righttop ul >li{ width: 300px; height: 474px; float: left; } .rightdown span{ font-size: small; } .box3 p{ padding-top: 20px; } .box3 h3{ padding-top: 10px; } .box3 img:hover{ transform: scale(1.1); transition: all linear 0.5s; } .box3 li:hover{ background: linear-gradient(to top, #aaecff,#545652); } /* ==========================底部========================== */ .box4{ width: 487px; height: 112px; margin: auto; border-bottom: 1px solid #cccccc; margin-top: 87px; margin-bottom: 22px; } .box4 li{ float: left; } .box4-1{ width: 105px; height: 46px; padding-left: 18px; padding-top: 20px; padding-right: 31px; border-right: 1px solid #cccccc; } .box4-2{ width:158px; height: 65px; text-align: center; } .box4-3{ width:158px; height: 65px; text-align: center; } .box5{ width: 487px; height: 29px; margin: auto; } .box5 li{ width: 20%; float: left; text-align: center; } .box5 a{ color: #000; } .beizhu{ text-align: center; color: grey; font-size: 12px; }
标签：上海迪士尼 border 会员 span nbsp 页面 cal inline 底部
原文地址：http://www.cnblogs.com/ljm-mwml/p/7673687.html
