<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/test8-7.css">
</head>
<body>
<main>
<header>
<nav class="left_nav">
<a href="#2"><i class="index"></i>首页</a>
<a href="#3"><i class="shop"></i>商店</a>
<a href="#4"><i class="funny"></i>乐园</a>
</nav>
<img src="./img/Disney/b_logo.png" alt="迪士尼logo" title="迪士尼logo" class="logo">
<nav class="right_nav">
<a href="#2"><i class="film"></i>影视</a>
<a href="#3"><i class="shuma"></i>数码</a>
<a href="#4"><i class="menber"></i>会员</a>
</nav>
</header>
<img src="./img/Disney/banner.jpg" alt="疯狂动物城" title="疯狂动物城">
<article>
<section>
<h1>明星</h1>
<div class="section1">
<figure>
<img src="./img/Disney/miqi.jpg" alt="米奇和他的朋友们">
<figcaption>米奇和他的朋友们</figcaption>
</figure>
<figure>
<img src="./img/Disney/baixue.jpg" alt="迪士尼公主">
<figcaption>迪士尼公主</figcaption>
</figure>
<figure>
<img src="./img/Disney/car.jpg" alt="赛车总动员">
<figcaption>赛车总动员</figcaption>
</figure>
<figure>
<img src="./img/Disney/princess.jpg" alt="小公主苏菲亚">
<figcaption>小公主苏菲亚</figcaption>
</figure>
<figure>
<img src="./img/Disney/queen.jpg" alt="冰雪奇缘">
<figcaption>冰雪奇缘</figcaption>
</figure>
<figure>
<img src="./img/Disney/machine.jpg" alt="星球大战">
<figcaption>星球大战</figcaption>
</figure>
</div>
</section>
<section>
<h1>商店</h1>
<div class="section2">
<div>
<img src="./img/Disney/160322141822716049.jpg" alt="图片">
</div>
<div>
<figure>
<img src="./img/Disney/handbag.jpg" alt="米奇手提包" title="米奇手提包">
<figcaption>米奇手提包</figcaption>
</figure>
<figure>
<img src="./img/Disney/schoolbag.jpg" alt="米奇书包" title="米奇书包">
<figcaption>米奇书包</figcaption>
</figure>
<figure>
<img src="./img/Disney/photo.jpg" alt="米奇与布鲁托" title="米奇与布鲁托">
<figcaption>米奇与布鲁托</figcaption>
</figure>
<figure>
<img src="./img/Disney/handbag.jpg" alt="米奇手提包" title="米奇手提包">
<figcaption>米奇手提包</figcaption>
</figure>
</div>
</div>
</section>
<section class="section3">
<h1>迪士尼资讯</h1>
<div>
<figure>
<img src="./img/Disney/160113121641905797.jpg" alt="上海迪士尼乐园" title="上海迪士尼乐园">
<figcaption>
<h2>上海迪士尼乐园开园在即!</h2>
<a href="#1">2016年6月16日正式开园的上海迪士尼乐园,是中国内地首座迪士尼主题乐园,不但融入了中国风,还配置了很多自动化的服务设施。
<i></i>
</a>
</figcaption>
</figure>
<div>
<figure>
<img src="./img/Disney/160321105131828720.jpg" alt="疯狂动物城" title="疯狂动物城">
<figcaption>
<h4>《疯狂动物城》票房突破10亿人民币!</h4>
<a href="#1">该片讲述了在一个所有动物和平共处的动物城市,兔子朱迪通过自己努力奋斗完成自己儿时的梦想,成为动物警察的故事。
<i></i>
</a>
</figcaption>
</figure>
<figure>
<img src="./img/Disney/160225171114064621.jpg" alt="迪士尼音乐报时钟楼" title="迪士尼音乐报时钟楼">
<figcaption>
<h4>全球首座迪士尼音乐报时钟楼正式落成</h4>
<a href="#1">首座迪士尼全球音乐报时钟楼于2016年2月22日落成亮相上海陆家嘴。
<i></i>
</a>
</figcaption>
</figure>
<figure>
<img src="./img/Disney/blue.jpg" alt="头脑特工队" title="头脑特工队">
<figcaption>
<h4>《头脑特工队》获得第88届奥斯卡最佳动画长片</h4>
<a href="#1">该片讲述了小女孩莱莉因为爸爸的工作变动而搬到旧金山,她的生活被这五种情绪所掌控。 尽展脑内情绪的缤纷世界。
<i></i>
</a>
</figcaption>
</figure>
</div>
</div>
</section>
</article>
<footer>
<div>
<img src="./img/Disney/b_logo.png" alt="迪士尼logo" title="迪士尼logo" class="img1">
<figure>
<img src="./img/Disney/weibo.jpg" alt="关注我们的微博" class="img2">
<figcaption>关注我们的微博</figcaption>
</figure>
<figure>
<img src="./img/Disney/weibo.jpg" alt="关注我们的微信" class="img3">
<figcaption>关注我们的微信</figcaption>
</figure>
</div>
<div>
<p>关于我们</p>
<p>加入我们</p>
<p>法律条款</p>
<p>隐私政策</p>
<p>退换货政策</p>
</div>
<p>Disney | Pixar All rights reserved. 备案号:沪ICP备07025394号-17</p>
</footer>
</main>
</body>
</html>
main {
width: 1200px;
margin: 0 auto 135px;
}
header {
height: 100px;
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.logo {
width: 170px;
justify-content: center;
}
.left_nav,.right_nav {
width: 515px;
height: 26px;
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: space-around;
}
header a {
text-decoration: none;
color: #000000;
font-size: 18px;
box-sizing: border-box;
}
header>nav img {
width: 15px;
height: 15px;
margin: 1px;
}
a:hover {
color: red;
}
header i {
display: inline-block;
width: 20px;
height: 20px;
background-image: url(../img/Disney/icon.png);
margin:2px 5px -2px;
}
.index {
background-position: -1px 0px;
}
.index:hover {
background-position: -23px 0;
}
.shop {
background-position: -1px -20px;
}
.shop:hover {
background-position: -22px -21px;
}
.funny {
background-position: -1px -44px;
}
.funny:hover {
background-position: -22px -44px;
}
.film {
background-position: -1px -63px;
}
.film:hover {
background-position: -22px -63px;
}
.shuma {
background-position: 0px -82px;
}
.shuma:hover {
background-position: -21px -82px;
}
.menber {
background-position: 0px -101px;
}
.menber:hover {
background-position: -21px -101px;
}
main>img {
width: 100%;
height: 500px;
background-color: sandybrown;
margin: 5px auto 15px;
overflow: hidden;
}
h1 {
text-align: center;
margin: 30px auto;
}
.section1 {
width:100%;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.section1>figure {
width: 155px;
height: 170px;
margin: 0px;
}
.section1 img {
width: 135px;
margin: 0 10px 10px 10px;
}
.section1 figcaption {
text-align: center;
font-weight: bold;
}
article>section:nth-child(1) {
height: 300px;
overflow: hidden;
}
article>section:nth-child(2) {
height: 710px;
overflow: hidden;
}
.section2>div:nth-child(1)>img {
width: 600px;
height: 600px;
margin: 0px;
}
.section2 {
position: relative;
}
.section2>div:nth-child(2) {
width: 600px;
height: 600px;
position: absolute;
right: 0px;
top: 0px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
}
.section2 figure {
width: 299px;
height: 299px;
margin: 0px;
}
.section2>div>figure:nth-child(-n+2) {
border-top: 1px solid #dcdcdc;
border-right: #dcdcdc 1px solid;
}
.section2>div>figure:nth-child(n+3) {
border-top: 1px solid #dcdcdc;
border-right: #dcdcdc 1px solid;
border-bottom: solid 1px #dcdcdc;
}
.section2 img {
width: 260px;
height: 260px;
margin: 0px 19px;
}
.section2 figcaption {
text-align: center;
font-weight: bold;
}
article>section:nth-child(3) {
height: 875px;
margin-top: 15px;
overflow: hidden;
}
.section3>div {
height: 773px;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
border-bottom: 1px solid #dcdcdc;
border-left: 1px solid #dcdcdc;
box-sizing: border-box;
}
.section3>div>div {
width: 600px;
position: absolute;
right: 0;
top: 0;
}
.section3>div>div {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
.section3>div>div img {
width: 300px;
height: 300px;
}
.section3>div>div>figure {
width: 300px;
margin: 0px ;
}
.section3>div>div>figure:nth-of-type(2) {
border-right: 1px solid #dcdcdc;
border-left: 1px solid #dcdcdc;
box-sizing: border-box;
}
.section3>div>div>figure:nth-of-type(3) {
border-right: 1px solid #dcdcdc;
border-top: 1px solid #dcdcdc;
display: flex;
width: 600px;
}
.section3>div>div>figure>figcaption {
width: 260px;
margin: 0px auto 11px;
}
.section3>div>div>figure:nth-of-type(3)>figcaption {
height: 100%;
margin: 0px auto;
}
.section3 h4 {
margin: 10px 0;
text-align: left;
}
.section3>div>figure {
margin: 0px;
width: 600px;
}
.section3>div>figure>figcaption {
width: 520px;
margin: 0 40px;
}
.section3 h2 {
text-align: left;
}
.section3 a {
color: #666666;
text-decoration: none;
line-height: 1.5;
}
.section3 i {
display: inline-block;
width: 14px;
height: 14px;
background-image: url(../img/Disney/icon.png);
background-position: -46px -173px;
}
footer {
width: 490px;
height: 190px;
overflow: hidden;
margin: 90px auto 0px;
}
footer figure {
margin: 0px;
}
footer figcaption {
font-size: 12px;
font-weight: bold;
}
.img1 {
width: 170px;
height: 50px;
margin-top: 20px;
padding-right: 25px;
padding-bottom: 20px;
border-right: 1px solid grey;
}
.img2,.img3 {
width: 75px;
height: 75px;
margin: 0px 4.5px;
}
footer>div:nth-child(1) {
padding-bottom: 20px;
border-bottom: 1px solid grey;
display: flex;
flex-direction: row;
justify-content:space-around;
}
footer>div:nth-child(2) {
font-weight: bold;
display: flex;
flex-direction: row;
justify-content:space-between;
}
footer>p {
height: 18px;
margin: 0px;
color: #666666;
text-align: center;
}