迪士尼页面制作
Posted liuwujiang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了迪士尼页面制作相关的知识，希望对你有一定的参考价值。
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;
}
效果图
以上是关于迪士尼页面制作的主要内容，如果未能解决你的问题，请参考以下文章