迪士尼网页

HTML代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/dsn.css"/>
</head>
<body>

<h1>明星</h1>

        <figure>
            <img src="../img/151209173849244246.jpg" alt="米奇"/>
            <figcaption>
                米奇和他的朋友们
            </figcaption>
        </figure>

        <figure>
            <img src="../img/151209173747572402.jpg" alt="迪士尼公主"/>
            <figcaption>
                迪士尼公主
            </figcaption>
        </figure>

          <figure>
            <img src="../img/151130185638114248.jpg" alt="赛车总动员"/>
            <figcaption>
                赛车总动员
            </figcaption>
        </figure>

        <figure>
            <img src="../img/151130185656630780.jpg" alt="小公主苏菲亚"/>
            <figcaption>
                小公主苏菲亚
            </figcaption>
        </figure>

</div>

</div>

<div class="you">

<h1>迪士尼资讯</h1>

<div class="zuobian">
            <figure class="n1">

                 <img src="../img/160113121641905797.jpg" alt="迪士尼"/>
                 
                 <div class="sanjiao"></div>

                <figcaption>
                    <h2>上海迪士尼乐园开园在即！</h2>
                  <div class="p">
                    <p>自2016年6月16日起，您将可以探索一个前所未有的神奇世界，每个人都能在这里点亮心中奇梦。
                    <a href="#"><i></i></a>
                    </p>
                 </div>
                </figcaption>
            </figure>
        </div>

<div class=".demo">
            
            <div>
            <figure class="n2">
                <img src="../img/160321105131828720.jpg" alt="《疯狂动物》票房破十亿">
                <figcaption>
                
                <div class="xsj"></div>

<h3>《疯狂动物》票房突破十亿人民币！</h3>
                <div class="p2">
                     <p>《疯狂动物城》上映第16日登顶中国动画片卖座第一，并成为史上首部破10亿的动画片！
                    <a href="#"><i></i></a>
                    </p>
                </div>
                </figcaption>
            </figure>
        </div>

              <figure class="n3">
                <img src="../img/160225171114064621.jpg" alt="报时钟楼">
                <div class="xsj"></div>
                <figcaption>
                    <h3>全球首座迪士尼音乐报时钟楼正式落成</h3>
                      <div class="p2">
                        <p>
                        迪士尼钟楼将与迪士尼旗舰店一起为上海带来一份奇妙而梦幻的娱乐购物体验。
                        <a href="#"><i></i></a>
                        </p>
                </figcaption>
            </figure>

<div class="n4">
                <img src="../img/160229155948703765.jpg" alt="WINNER">
                <div class="xsj3"></div>
                </div>

            <div class="n5">
                <h3>《头脑特工队》获得第88届奥斯卡最佳动画长片</h3>
                 <p>皮克斯《头脑特工队》获得第88届奥斯卡最佳动画长片！实至名归！
                <a href="#"><i></i></a>

                 </p>

            </div>

         </div>

    </div>

</article>

<footer>
    <div class="a">
        
        <div class="logo">
            <img src="../img/b_logo.png">

        </div>

<figure class="a1">
                <img src="../img/weibo.jpg">
                <figcaption>
                   <p>关注我们的微博</p>
                </figcaption>
            </figure>

<figure class="a2">
                <img src="../img/weibo.jpg">
                <figcaption>
                   <p> 关注我们的微信</p>
                </figcaption>
            </figure>

</div>

    <nav>
        <strong>
        <a href="#">关于我们</a>
        <a href="#">加入我们</a>
        <a href="#">法律条款</a>
        <a href="#">隐私政策</a>
        <a href="#">退换货政策</a>
        </strong>

<p class="bei">Disney I Pixar All rights reserved.备案号：泸B2-20040339-3 </p>
</nav>
</footer>

</body>
</html>

CSS代码

body{
width:1200px;
margin: 0px auto;

}

/*导航栏*/

nav>a{
    width:14.28%;
    display:inline-block;
   text-align: center;
}
nav>img{
width: 105px;
height: 46px;

}

nav>a:hover{
color: red;

}
.no1{
width: 22px;
height: 20px;
display: inline-block;
background-image:url("../img/icon.png");
}
.no1:hover{
background-position: -22px 0;

}
nav>a:hover .no1{
background-position: -22px 0;
}

.no2{
width: 20px;
height: 20px;
display:inline-block;
background-image:url("../img/icon.png");
background-position: 0px -20px;
}
.no2:hover{
background-position: -22px -20px;

}
nav>a:hover .no2{
background-position: -22px -20px;
}
.no3{
width: 17px;
height: 23px;
display:inline-block;
background-image:url("../img/icon.png");
background-position: 0px -41px;
}
.no3:hover{
background-position: -22px -41px;

}
nav>a:hover .no3{
background-position: -22px -41px;
}
.no4{
width: 20px;
height: 15px;
display:inline-block;
background-image:url("../img/icon.png");
background-position: 0px -65px;
}
.no4:hover{
background-position: -22px -65px;

}
nav>a:hover .no4{
background-position: -22px -65px;
}

.no5{
width: 13px;
height: 20px;
display:inline-block;
background-image:url("../img/icon.png");
background-position: 0px -81px;
}
.no5:hover{
background-position: -22px -81px;

}
nav>a:hover .no5{
background-position: -22px -81px;
}

.no6{
width: 20px;
height: 17px;
display:inline-block;
background-image:url("../img/icon.png");
background-position: 0px -102px;
}
.no6:hover{
background-position: -22px -102px;

}

nav>a:hover .no6{
background-position: -22px -102px;
}

/*疯狂动物城图片*/
article>img{
margin-top: 21px;
}

/*明星*/
h1{
font-size: 34px;
margin-top: 58px;
margin-bottom: 42px;
text-align: center;
}

article>div>figure>figcaption{
font-size: 20px;
}

article>div>figure>img{
width:120px;
margin-bottom: 43px;
}

article>div>figure{
width: 13.94%;
text-align: center;
display: inline-block;
margin-right:28px;
}

/*商店*/
.shangdian{
overflow: hidden;
}
.zuo>img{
width:50%;
height: 467px;
float: left;
border-top: 1px solid #c1c1c1;
border-left: 1px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1;
}
.you>img{
float: right;
}
.you>img:nth-child(1){
border-top: 1px solid #c1c1c1;
border-right: 1px solid #c1c1c1;
}

.you>img:nth-child(2){
border-top: 1px solid #c1c1c1;
border-right: 1px solid #c1c1c1;
}
.you>img:nth-child(3){
border-top: 1px solid #c1c1c1;
border-right: 1px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1;
}
.you>img:nth-child(4){
border-top: 1px solid #c1c1c1;
border-right: 1px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1;
}
/*迪士尼资讯*/
/*左*/
.dsn-zixun{
width: 1200px;
height: 769px;
display: inline-block;
border:1px solid #c1c1c1;
}
.zuobian{
float: left;
position: relative;
}
.n1{
float: left;
}

h2{
font-size: 30px;
margin:38px 0px 28px 48px;
}
p{
font-size: 16px;
}

.sanjiao{
width:48px;
height: 25px;
background-image: url(../img/icon.png);
background-position:0px -194px;
display: inline-block;
position: absolute;
left:46px;
top: 448px;

}

.zuobian>figure>figcaption{
clear: both;
width: 550px;
}

figcaption>div>p>a>i{
width: 14px;
height: 14px;
background-image: url(../img/icon.png);
background-position: -48px -102px;
display: inline-block;
}

.p{
margin: 28px 50px 0px 48px;
}
.zuobian{
float: left;
}

/*右边*/
.demo{
width: 600px;
overflow: hidden;
display: inline-block;
}

h3{
margin:30px 0px 22px 28px;
font-size: 20px;
width: 225px;
display: inline-block;
}

.p2{
float: left;
margin: 0px 0px 0px 30px;
font-size: 16px;
width: 225px;

}
.p2>p>a>i{
width: 14px;
height: 14px;
background-image: url(../img/icon.png);
background-position: -48px -102px;
display: inline-block;
}

.demo>figure>figcaption{
width: 225px;
height: 300px;
}
.demo>figure{
overflow: hidden;
clear: both;
width: 225px;
}
.n2{
width: 298px;
height: 30px;
float: left;
border-bottom: 1px solid #c1c1c1;
position: relative;
}
.n2>img{
border-bottom: 1px solid #c1c1c1;
}
.xsj{
width:29px;
height: 15px;
background-image: url(../img/icon.png);
background-position:0px -245px;
display: inline-block;
position: absolute;
left: 32px;
top: 282px;
}

.n3{
width: 298px;
float: left;
position: relative;
}
.n3>img{
border-bottom: 1px solid #c1c1c1;
}

.n4{
width: 298px;
float: left;
border-right: 1px solid #c1c1c1;
border-left: 1px solid #c1c1c1;
margin-top: 8px;
border-top: 1px solid #c1c1c1;
position: relative;
}

.xsj3{
width:19px;
height: 25px;
background-image: url(../img/icon.png);
background-position:4px -206px;
display: inline-block;
position: absolute;
top: 15px;
right:-5px;
}
.n5{
float: left;
margin-left: 30px;
font-size: 16px;
width: 225px;
}
.n5>p>a>i{
width: 14px;
height: 14px;
background-image: url(../img/icon.png);
background-position: -48px -102px;
display: inline-block;
}

/*脚注*/

.logo{
border-right:1px solid #c1c1c1;
float: left;
padding-right: 30px;
margin-right: 35px;
}
.a1,.a2{

float: left;
margin-right: 45px;
}
.a{
width: 488px;
height: 110px;
text-align: center;
margin-left: 37px;
}

footer>div>figure{
text-align: center;
}
footer>nav{
padding-top: 22px;
border-top: 1px solid black;
}

.bei{
margin-top: 13px;
color: #c1c1c1;
text-align: center;
}
footer>nav>strong>a:first-child{
margin-left: 9px;
}

footer>nav>strong>a:not(:last-child){
padding-right: 38px;
}

footer>nav>strong>a:link{
color: black;
}
footer>nav>strong>a:visited{
color: black;
}

footer{
display: inline-block;
margin: 90px 461px 142px 478px;
}

猜你喜欢