做一些简单的页面练练
都是网上一些比较早的页面了
现在大半都应该改版了吧…
好了,下面分别是HTML和css
没什么特别的,所以就没有Js了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css"/>
<title>Disney</title>
</head>
<body>
<div class="content">
<header>
<nav>
<ul>
<li>
<i></i>
<a href="#">首页</a>
</li>
<li>
<i></i>
<a href="#">商店</a>
</li>
<li>
<i></i>
<a href="#">乐园</a>
</li>
<li>
<img src="pic/b_logo.png" alt=""/>
</li>
<li>
<i></i>
<a href="#">影视</a>
</li>
<li>
<i></i>
<a href="#">数码</a>
</li>
<li>
<i></i>
<a href="#">会员</a>
</li>
</ul>
</nav>
<div>
</div>
</header>
<div class="main">
<div class="clear"></div>
<div class="banner">
<img src="pic/160216172223655101.jpg" alt="banner"/>
</div>
<div class="clear"></div>
<div class="star">
<h1>明 星</h1>
<ul>
<li>
<img src="pic/151209173849244246.jpg" alt="Micky"/>
<p>米奇和他的朋友们</p>
</li>
<li>
<img src="pic/151209173747572402.jpg" alt="princiss"/>
<p>迪士尼公主</p>
</li>
<li>
<img src="pic/151130185638114248.jpg" alt="car"/>
<p>赛车总动员</p>
</li>
<li>
<img src="pic/151130185656630780.jpg" alt="Sofia"/>
<p>小公主苏菲亚</p>
</li>
<li>
<img src="pic/151130185733287815.jpg" alt="Ice"/>
<p>冰雪奇缘</p>
</li>
<li>
<img src="pic/151130185754146838.jpg" alt="battle"/>
<p>星球大战</p>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="shop">
<h1>商 店</h1>
<div class="s1">
<div class="s2">
<img src="pic/160322141822716049.jpg" alt="1"/>
</div>
<div class="s2">
<div class="s3">
<div class="s3-1">
<img src="pic/151130185754146838.jpg" alt="1"/>
<p>星球大战</p>
</div>
<div class="s3-2">
<img src="pic/151130185754146838.jpg" alt="1"/>
<p>星球大战</p>
</div>
</div>
<div class="s3">
<div class="s3-3">
<img src="pic/151130185754146838.jpg" alt="1"/>
<p>星球大战</p>
</div>
<div class="s3-4">
<img src="pic/151130185754146838.jpg" alt="1"/>
<p>星球大战</p>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="news">
<h1>迪士尼资讯</h1>
<div class="n1">
<div class="n2">
<div class="p1">
<img src="pic/160113121641905797.jpg" alt="p1"/>
</div>
<div class="t1">
<i></i>
<h2>上海迪士尼乐园开业在即!</h2>
<p>自2016年6月16日起,您将可以探索一个前所未有的神奇世界,每个人能在这里点亮心中奇梦。
<i class="point"></i>
</p>
</div>
</div>
<div class="n2">
<div class="n3">
<div class="p2">
<img src="pic/160321105131828720.jpg" alt="p2"/>
</div>
<div class="t2">
<i></i>
<h3>《疯狂动物城》票房突破10亿人民币!</h3>
<p>《疯狂动物城》上映第16日登顶中国动画卖座第一,并成为史上首部破10亿动画片。
<i class="point"></i>
</p>
</div>
</div>
<div class="n3">
<div class="p3">
<img src="pic/160225171114064621.jpg" alt="p3"/>
</div>
<div class="t3">
<i></i>
<h3>全球首座迪士尼音乐报时钟楼正式落成</h3>
<p>迪士尼钟楼将与迪士尼旗舰店一起为上海带来一份奇妙而梦幻的娱乐购物体验。
<i class="point"></i>
</p>
</div>
</div>
<div class="n4">
<div class="p4">
<img src="pic/160229155948703765.jpg" alt="p4"/>
</div>
<div class="t4">
<i></i>
<h3>《头脑特工队》获得第88届奥斯卡最佳动画长片</h3>
<p>皮克斯《头脑特工队》获得第88届奥斯卡最佳动画长片!实至名归!
<i class="point"></i>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<footer>
<div class="about">
<div class="logo">
<img src="pic/b_logo.png" alt=""/>
</div>
<div class="code">
<img src="pic/weibo.jpg" alt=""/>
<p>关注我们的微博</p>
</div>
<div class="code">
<img src="pic/weibo.jpg" alt=""/>
<p>关注我们的微信</p>
</div>
</div>
<div class="link">
<a href="#">关于我们</a>
<a href="#">加入我们</a>
<a href="#">法律条款</a>
<a href="#">隐私政策</a>
<a href="#">退换货政策</a>
<p>Disney | Pixar All rights resvered.备案号:沪B2-20040339-3</p>
</div>
</footer>
<div class="clear"></div>
<div class="BackToTop">
<a href="#">TOP</a>
</div>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family: "Arial", "Microsoft Yahei";
}
h1{
text-align: center;
margin-bottom:24px;
}
.clear{
clear: both;
}
/*body区域*/
.content{
width: 1200px;
height: auto;
margin: auto;
/*outline: 1px solid;*/
}
/*除header以外的所有内容,固定头部时启用top*/
.main{
position: relative;
/*top: 80px;*/
}
/*头部固定,跟随页面*/
/*怎么变化头部高度,页面开始下滑后,头部高度变小O.O*/
/*header{*/
/*position: fixed;*/
/*background: rgba(255,255,255,0.8);*/
/*z-index: 999;*/
/*}*/
/*nav*/
nav ul{
display: inline-block;
padding: 10px 0 20px;
/*margin: 0 0 20px;*/
}
nav ul li{
display: inline-block;
list-style: none;
float: left;
width: 180px;
text-align: center;
height: 60px;
/*outline: 1px solid;*/
}
nav ul li:nth-child(4){
width: 120px;
}
nav ul li i{
display: inline-block;
vertical-align: middle;
/*outline: 1px solid;*/
background-image: url(pic/icon.png);
}
nav ul li i:first-child{
width: 21px;
height: 20px;
}
nav ul li:first-child:hover i{
background-position: -22px 0;
}
nav ul li:nth-child(2) i{
background-position: 0 -19px;
}
nav ul li:nth-child(2):hover i{
background-position: -22px -19px;
}
nav ul li:nth-child(3) i{
height: 23px;
background-position: 0 -40px;
}
nav ul li:nth-child(3):hover i{
background-position: -22px -40px;
}
nav ul li:nth-child(5) i{
height: 17px;
background-position: 0 -63px;
}
nav ul li:nth-child(5):hover i{
background-position: -22px -63px;
}
nav ul li:nth-child(6) i{
height: 22px;
background-position: 0 -80px;
}
nav ul li:nth-child(6):hover i{
background-position: -22px -80px;
}
nav ul li:nth-child(7) i{
height: 18px;
background-position: 0 -101px;
}
nav ul li:nth-child(7):hover i{
background-position: -22px -101px;
}
nav ul li a{
text-decoration: none;
color: #000;
line-height: 60px;
}
nav ul li:hover a{
color: red;
}
/*banner*/
.banner{
padding: 20px 0;
}
/*star*/
.star{
padding: 40px 0;
}
.star ul li{
display: inline-block;
list-style: none;
width: 200px;
float: left;
text-align: center;
}
.star ul li img{
width: 60%;
height: 50%;
}
.star ul li p{
line-height: 48px;
}
/*shop*/
.shop{
width: 100%;
padding: 40px 0;
}
.s1 .s2 .s3 .s4{
/*outline: 1px solid #000;*/
overflow: hidden;
/*text-align: center;*/
}
.s1{
width: 1200px;
height: 592px;
}
.s2{
width: 50%;
height: 100%;
float: left;
}
.s3{
width: 100%;
height: 50%;
}
.s3-1{
width: 299px;
height: 295px;
float: left;
text-align: center;
vert-align: middle;
/*outline: 1px solid;*/
border-top: 1px solid #bababa;
border-right: 1px solid #bababa;
}
.s3-2{
width: 299px;
height: 295px;
float: left;
text-align: center;
vert-align: middle;
/*outline: 1px solid;*/
border-top: 1px solid #bababa;
border-right: 1px solid #bababa;
}
.s3-3{
width: 299px;
height: 294px;
float: left;
text-align: center;
vert-align: middle;
/*outline: 1px solid;*/
border-top: 1px solid #bababa;
border-right: 1px solid #bababa;
border-bottom: 1px solid #bababa;
}
.s3-4{
width: 299px;
height: 294px;
float: left;
text-align: center;
vert-align: middle;
/*outline: 1px solid;*/
border-top: 1px solid #bababa;
border-right: 1px solid #bababa;
border-bottom: 1px solid #bababa;
}
.s3 img{
width: 160px;
margin: 60px 0 20px;
}
/*news*/
.news{
width: 100%;
padding: 40px 0;
}
.news p{
padding: 18px 28px;
}
.news h2{
font-size: 32px;
padding: 0 48px;
}
.news h3{
font-size: 18px;
padding: 0 28px;
}
.n1{
width:100%;
height: 769px;
}
.n2{
width: 50%;
height: 100%;
float: left;
}
.n3{
width: 50%;
height: 473px;
float: left;
}
.n4{
width: 100%;
height: 296px;
clear: both;
}
.p1{
width: 100%;
height: 473px;
}
.t1{
width: 599px;
height: 295px;
border-left: 1px solid #bababa;
border-bottom: 1px solid #bababa;
}
.t1 p{
padding: 18px 48px;
position: relative;
float: left;
}
.t2 p{
position: relative;
float: left;
}
.t3 p{
position: relative;
float: left;
}
.t4 p{
position: relative;
float: left;
}
.t1 i{
display: inline-block;
width: 50px;
height: 50px;
position: relative;
top: -25px;
left: 50px;
/*outline: 1px solid;*/
background-image: url("pic/icon.png");
background-position: 0 -195px;
}
.p2.p3{
width: 100%;
height: 300px;
}
.t2{
width: 100%;
height: 173px;
}
.t3{
width: 298px;
height: 173px;
border-left: 1px solid #bababa;
border-right: 1px solid #bababa;
}
.t2 i{
display: inline-block;
width: 30px;
height: 30px;
position: relative;
top: -15px;
left: 30px;
/*outline: 1px solid;*/
background-image: url("pic/icon.png");
background-position: 0 -245px;
}
.t3 i{
display: inline-block;
width: 30px;
height: 30px;
position: relative;
top: -15px;
left: 30px;
/*outline: 1px solid;*/
background-image: url("pic/icon.png");
background-position: 0 -245px;
}
.p4{
width: 50%;
height: 296px;
float: left;
}
.t4{
width: 299px;
height: 294px;
float: left;
border-bottom: 1px solid #bababa;
border-top: 1px solid #bababa;
border-right: 1px solid #bababa;
}
.t4 i{
display: inline-block;
width: 30px;
height: 30px;
position: relative;
top: 30px;
left: -15px;
/*outline: 1px solid;*/
background-image: url("pic/icon.png");
background-position: 0 -245px;
}
.news .t1 p .point{
display: inline-block;
float: left;
position: absolute;
top: 40px;
left: 220px;
width: 22px;
height: 22px;
/*outline: 1px solid;*/
background-image: url("pic/icon.png");
background-position: -40px -171px;
}
.news .t2 p .point{
display: inline-block;
float: left;
position: absolute;
top: 60px;
left: 140px;
width: 22px;
height: 22px;
/*outline: 1px solid;*/
background-image: url("pic/icon.png");
background-position: -40px -171px;
}
.news .t3 p .point{
display: inline-block;
float: left;
position: absolute;
top: 60px;
left: 104px;
width: 22px;
height: 22px;
/*outline: 1px solid;*/
background-image: url("pic/icon.png");
background-position: -40px -171px;
}
.news .t4 p .point{
display: inline-block;
float: left;
position: absolute;
top: 62px;
left: 28px;
width: 22px;
height: 22px;
/*outline: 1px solid;*/
background-image: url("pic/icon.png");
background-position: -40px -171px;
}
/*footer*/
.footer{
text-align: center;
}
.about{
height: 120px;
width: 520px;
margin: 100px auto 20px;
border-bottom: 1px solid #bababa;
}
.logo{
padding: 10px 30px;
margin: 10px 0;
float: left;
border-right: 1px solid #bababa;
}
.code{
text-align: center;
padding: 0 30px 10px;
margin: 10px 0;
float: left;
}
.code p{
font-weight: 700;
color: #323232;
}
.link{
margin: auto;
text-align: center;
}
.link a{
text-decoration: none;
color: #323232 ;
font-weight: 700;
padding: 0 18px;
}
.link a:hover{
color: red;
}
.link p{
padding: 12px;
color: #bababa;
}
/*back to top*/
.BackToTop{
position: fixed;
width: 40px;
right: 10px;
bottom: 20px;
background: #bababa;
text-align: center;
/*vertical-align: middle;*/
}
.BackToTop a{
display: block;
line-height: 40px;
text-decoration: none;
color: #fff;
}
.BackToTop a:hover{
color: #bababa;
background: #000;
}