迪士尼頁面制作
阿新 • • 發佈：2018-04-22
ott float 夢幻 hit 上海 reserve 導航欄 資訊 隱私
html代碼
<body>
<div class="main">
<!--導航-->
<header>
<nav>
<a href=""><i></i>首頁</a>
<a href=""><i></i>商店</a>
<a href=""><i></i>樂園</a>
<img src="../images/b_logo.png" />
<a href=""><i></i>影視</a>
<a href=""><i></i>數碼</a>
<a href=""><i></i>會員</a>
</nav>
</header>
<img src="../images/160216172223655101.jpg" />
<!--明星-->
<div class="gao">
<h1>明星</h1>
<figure><img src="../images/151209173849244246.jpg" />
<figcaption>米奇和他的朋友們</figcaption>
</figure>
<figure><img src="../images/151209173747572402.jpg" />
<figcaption>迪士尼公主</figcaption>
</figure>
<figure><img src="../images/151130185638114248.jpg" />
<figcaption>賽車總動員</figcaption>
</figure>
<figure><img src="../images/151130185656630780.jpg" />
<figcaption>小公主蘇菲亞</figcaption>
</figure>
<figure><img src="../images/151130185733287815.jpg" />
<figcaption>冰雪奇緣</figcaption>
</figure>
<figure><img src="../images/151130185754146838.jpg" />
<figcaption>星球大戰</figcaption>
</figure>
</div>
<!--商店-->
<div class="gao1">
<h2>商店</h2>
<div class="a1">
<img src="../images/160322141822716049.jpg" />
<div class="gao1">
<div class="a2">
<img src="../images/161124154351492230.jpg" />
<img src="../images/161124160800879755.jpg" />
</div>
<div class="a3">
<img src="../images/161124161054476210.jpg" />
<img src="../images/161124161054476210.jpg" />
</div>
</div>
</div>
</div>
<!--迪士尼資訊-->
<div class="gao2">
<h3>迪士尼資訊</h3>
<div>
<figure class="y4">
<img src="../images/160113121641905797.jpg" />
<figcaption>上海迪士尼樂園開園在即！</figcaption>
<p>
自2016年6月16日器，您可以探索一個前所未有的神奇世界，每個人都能在這裏點亮心中的夢
</p>
<i></i>
<em></em>
</figure>
</div>
<div class="y2">
<div>
<figure class="bk"><img src="../images/160321105131828720.jpg" />
<figcaption >《瘋狂動物城》票房突破10億人名幣！</figcaption>
<p >《瘋狂動物城》上映第16日登頂中國動畫賣座第一，並成為時尚首部突破10億動畫片！</p>
<i></i>
<em></em>
</figure>
<figure class="bl"><img src="../images/160225171114064621.jpg" />
<figcaption>全球首座迪士尼音樂報時鐘樓正式落成</figcaption>
<p>迪士尼鐘樓將於迪士尼旗艦店一起為上海帶來一份奇妙而夢幻的娛樂購物體驗</p>
<i></i>
<em></em>
</figure>
</div>
<div class="yx">
<figure class="yx1"><img src="../images/160229155948703765.jpg" />
<figcaption>《頭腦特工隊》獲得第88屆奧斯卡最佳動畫長片</figcaption>
<p>皮克斯《頭腦特工隊》獲得第88屆奧斯卡最佳動畫長片！實至名歸！</p>
<i class="tub"></i>
<i class="tub1"></i>
</figure>
</div>
</div>
</div>
</div>
<!--頁腳-->
<footer>
<div>
<img src="../images/b_logo.png" />
<div>
<figure><img src="../images/weibo.jpg" />
<figcaption>關註我們的微博</figcaption>
</figure>
<figure><img src="../images/weibo.jpg" />
<figcaption>關註我們的微信</figcaption>
</figure>
</div>
</div>
<div>
<a href="">關於我們</a>
<a href="">加入我們</a>
<a href="">法律條款</a>
<a href="">隱私政策</a>
<a href="">退換貨政策</a>
</div>
<p>
Disney I Pixar All rights reserved. 備案號：滬B2-20040339-3
</p>
<a href="#"><i>返回頂部</i></a>
</footer>
</body>
CSS代碼
.main{
width: 1200px;
margin: 0px auto;
/*border: 1px solid red;*/
overflow: hidden;
}
div>header{
text-align: center;
height: 60px;
margin-bottom: 48px;
overflow: hidden;
}
.gao{
overflow: hidden;
}
/*導航*/
header>nav>a{
display: inline-block;
width: 14.28%;
text-decoration: none;
color:black;
font-size: 18px;
}
nav>a>i{
display: inline-block;
}
nav>a:first-child>i {
width: 22px;
height: 20px;
background-image: url("../images/icon.png");
}
nav>a:nth-child(2)>i {
width: 22px;
height: 20px;
background-image: url("../images/icon.png");
background-position-y:-19px ;
}
nav>a:nth-child(3)>i {
width: 22px;
height: 20px;
background-image: url("../images/icon.png");
background-position-y:-41px ;
}
nav>a:nth-child(5)>i {
width: 22px;
height: 15px;
background-image: url("../images/icon.png");
background-position-y:-65px ;
}
nav>a:nth-child(6)>i {
width: 21px;
height: 21px;
background-image: url("../images/icon.png");
background-position-y: -81px;
}
nav>a:last-child>i {
width: 22px;
height: 20px;
background-image: url("../images/icon.png");
background-position-y:-101px ;
}
nav>a:hover{
color: red;
}
nav>a:first-child:hover i{
background-position:-22px 0 ;
}
nav>a:nth-child(2):hover i{
background-position:-22px -19px ;
}
nav>a:nth-child(3):hover i{
background-position:-22px -41px ;
}
nav>a:nth-child(5):hover i{
background-position:-22px -65px ;
}
nav>a:nth-child(6):hover i{
background-position:-22px -81px ;
}
nav>a:last-child:hover i{
background-position:-22px -101px ;
}
/*導航欄固定*/
.main>header>nav{
width: 1200px;
padding-top: 38px;
background-color: white;
box-sizing: border-box;
position: fixed;
z-index: 1;
}
/*明星*/
.gao>h1{
font-size: 31px;
text-align: center;
margin-bottom: 44px;
margin-top: 60px;
}
.gao>figcaption{
margin-top:24px ;
}
.gao>figure>img{
width:115px;
}
.gao>figure{
text-align: center;
margin: 0 40px;
float: left;
}
/*商店*/
.gao1>h2{
font-size: 31px;
text-align: center;
margin-bottom: 44px;
margin-top: 63px;
}
.a1>img{
width:600px;
height: 522px;
float:left;
}
.gao1{
overflow: hidden;
}
.a2>img,.a3>img{
outline:1px solid #dcdcdc;
width:300px;
height:260px ;
float: left;
}
.a2>img{
border-top: 1px solid #dcdcdc;
}
.a3>img{
border-bottom: 1px solid #dcdcdc;
}
.a2>img:last-child{
width: 299px;
border-right: 1px solid #dcdcdc;
}
.a3>img:last-child{
width: 299px;
border-right: 1px solid #dcdcdc;
}
/*迪士尼資訊*/
.gao2>h3{
text-align: center;
font-size: 31px;
margin:60px 0px 44px 0px;
}
.gao2>div>figure>img{
width: 600px;
}
.gao2>div>figure>figcaption{
margin-left: 50px;
font-size:29px ;
margin-top: 38px;
}
.gao2>div>figure>p{
padding-left:50px ;
width: 500px;
margin-top:29px;
margin-bottom:27px;
font-size:15px ;
line-height: 25px;
}
.gao2>div>div:first-child>figure{
width: 298px;
text-align: center;
float: left;
}
.bl{
position: relative;
}
.bk>p{
padding:0 44px 0 29px;
font-size: 15px;
margin-bottom: 20px;
width: 200px;
}
.bl>p{
padding:0 44px 0 29px;
font-size: 15px;
margin-bottom: 20px;
width: 200px;
}
.y4{
width: 600px;
height: 770px;
border-left: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
position: relative;
}
.gao2>div>div:first-child>figure>figcaption{
font-size: 18px;
margin: 30px 0px 22px 0px;
padding:0 44px 0 29px;
}
.gao2>div{
float: left;
}
.gao2>div>div>figure>img{
width: 299px;
}
.bk{
border-right: 1px solid #dcdcdc;
position: relative;
}
.gao2>div>div:first-child{
width: 600px;
}
.yx>figure{
width: 600px;
position: relative;
}
.yx>figure>img{
float:left;
border-top: 1px solid #dcdcdc;
}
.yx1>figcaption{
width: 225px;
padding:31px 44px 0 31px;
border-top: 1px solid #dcdcdc;
font-size: 18px;
float:left;
}
.yx>figure>p{
width: 225px;
margin-top: 30px;
padding:31px 44px 0 31px;
float:left;
}
.y2{
width: 598px;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
}
/*頁腳*/
footer{
width:100%;
margin-top: 90px;
overflow: hidden;
}
footer>div:first-child{
width: 500px;
margin: 0 auto 30px auto;
overflow: hidden;
}
footer>div:first-child>img{
padding-right:30px ;
border-right: 1px solid #dcdcdc;
float: left;
}
footer>div:first-child>div{
float: left;
}
footer>div:first-child>div>figure{
text-align: center;
display: inline-block;
}
footer>div:first-child>div>figure{
text-align: center;
display: inline-block;
}
footer>div:first-child>div>figure>figcaption{
margin-top: 12px;
}
footer>div:first-child>div>figure:first-child{
margin-left: 35px;
margin-right: 45px;
}
footer>div:nth-child(2){
overflow: hidden;
clear: both;
width:550px ;
margin-left: auto;
margin-right: auto;
padding: 23px 28px 0 10px;
border-top: 1px solid #dcdcdc;
}
footer>div:nth-child(2)>a{
display:inline-block ;
font-size: 18px;
color: black;
text-decoration: none;
float: left;
}
footer>div:nth-child(2)>a:not(:last-child){
margin-right:38px;
}
footer>p{
width: 700px;
margin: 16px auto 0 auto;
color: #94948e;
text-align: center;
}
/*小圖標*/
.tub{
width: 26px;
height: 51px;
background-image:url("../images/icon.png");
background-position-y: -195px;
position: absolute;
left: 283px;
top:508px;
}
.tub1{
width: 23px;
height: 23px;
background-image:url("../images/icon.png");
background-position-x: -41px;
background-position-y: -171px;
position: absolute;
left: 530px;
top:670px;
}
.bk>em{
width: 52px;
height: 26px;
background-image:url("../images/icon.png");
background-position-y: -195px;
position: absolute;
left: 22px;
top:280px;
}
.bk>i{
width: 23px;
height: 23px;
background-image:url("../images/icon.png");
background-position-x: -41px;
background-position-y: -171px;
position: absolute;
left: 230px;
top:433px;
}
.bl>i{
width: 23px;
height: 23px;
background-image:url("../images/icon.png");
background-position-x: -41px;
background-position-y: -171px;
position: absolute;
left: 230px;
top:433px;
}
.bl>em{
width: 52px;
height: 26px;
background-image:url("../images/icon.png");
background-position-y: -195px;
position: absolute;
left: 22px;
top:280px;
}
.y4>i{
width: 23px;
height: 23px;
background-image:url("../images/icon.png");
background-position-x: -41px;
background-position-y: -171px;
position: absolute;
left: 180px;
top:605px;
}
.y4>em{
width: 52px;
height: 26px;
background-image:url("../images/icon.png");
background-position-y: -195px;
position: absolute;
left: 64px;
top:450px;
}
/*返回頂部*/
footer>a>i{
width: 50px;
height: 50px;
border-radius: 100%;
font-style: normal;
font-size: 17px;
color: darkslategrey;
text-align: center;
background-color: #94948e;
position: fixed;
right: 50px;
bottom: 50px;
}
footer>a>i:hover{
background-color:mediumaquamarine;
}
效果圖
迪士尼頁面制作