CSS 层叠样式表 （Cascading Style Sheets）
css样式
内嵌样式：<span style ="color:red;">内嵌</span>
内联：
<style>
span{
font-size:14px;
}
</style>
外联：
<link rel="stylesheet" href="../css/global.css">
在外联中，css里不能写style
font-family：“Microsoft Yahei”，“黑体”，sans-serif；
sans-serif 非衬线字体
serif 衬线字体
选择器
id选择器
id=“span1”
#sapn1{
border：1px solid；
}
类选择器（可以定义多个样式）
class=“test_class”
.test_class{
... ;
}
属性选择器
<input type="text">
input[type="text"/]{
... ;
}
组合/并集选择器
h1,h2,h3,h4,h5,h6{
font-weight:normal;
}
元素/标签/标记 选择器
<span>xxx</span>
span{
... ;
}
后代选择器
ul li{
background-color：red；
}
子集选择器
ul>li{
border:1px solid;
}
伪类选择器
当前样式
a:link{
... ;
}
点击后： visited
悬停，滑过： hover
点击时： active
标准文档流
前提：在没有CSS的前提上
块级元素独占一行，可是width，height
行内元素并排显示，auto*auto
块级元素列表：
<address> <caption> <dd> <dt> <html>
<form> <h1>~<h6> <hr> <li> <ol> <ul>
<p> <pre> <table> <td> <tfoot> <th>
<thead> <tr> <body> <figure> <blockquote>
<menu>
行内元素：
<a> <abbr> <b> <br/> <cite> <em> <i>
<label> <q> <select> <small> <span> <strong>
<sub> <sup> <textarea>
迪士尼主页实战练习
index.html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>迪士尼</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="homepage">
<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="img/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>
</header>
<img src="img/160216172223655101.jpg" alt="">
<h1>明星</h1>
<!--明星部分-->
<div class="star">
<ul>
<li>
<img src="img/151209173849244246.jpg" alt="">
<p>米奇和他的朋友们</p>
</li>
<li>
<img src="img/151209173747572402.jpg" alt="">
<p>迪士尼公主</p>
</li>
<li>
<img src="img/151130185638114248.jpg" alt="">
<p>赛车总动员</p>
</li>
<li>
<img src="img/151130185656630780.jpg" alt="">
<p>小公主苏菲亚</p>
</li>
<li>
<img src="img/151130185733287815.jpg" alt="">
<p>冰雪奇缘</p>
</li>
<li>
<img src="img/151130185754146838.jpg" alt="">
<p>星球大战</p>
</li>
</ul>
</div>
<h1>商店</h1>
<!--商店部分-->
<div class="store">
<!--商店左边-->
<div class="store_left">
<img src="img/160322141822716049.jpg" alt="">
</div>
<!--商店右边-->
<div class="store_right">
<img src="img/phoneshell.jpg" alt="">
<img src="img/fox.jpg" alt="">
<img src="img/pendent.jpg" alt="">
<img src="img/cup.jpg" alt="">
</div>
</div>
<h1>迪士尼资讯</h1>
<!--资讯部分-->
<div class="news">
<div class="news_left">
<section><img src="img/160113121641905797.jpg" alt=""></section>
<section class="news_text">
<h2>上海迪士尼乐园开园在即！</h2>
<p>自2016年6月16日起，您将可以探索一个前所未有的神奇世界，
每个人都能在这里点亮心中奇梦。
<i></i>
</p>
</section>
</div>
<div class="news_right">
<div class="news_right_up">
<ul>
<li>
<section><img src="img/160321105131828720.jpg" alt=""></section>
<section class="news_text">
<h3>《疯狂动物城》票房突破10亿人民币！</h3>
<p>《疯狂动物城》上映第16日登顶中国动画卖座第一，
并成为史上首部破10亿动画片！
<i></i>
</p>
</section>
</li>
<li>
<section><img src="img/160225171114064621.jpg" alt=""></section>
<section class="news_text">
<h3>全球首座迪士尼音乐报时钟楼正式落成</h3>
<p>迪士尼钟楼将于迪士尼旗舰店
一起为上海带来一份奇妙而梦幻的娱乐购物体验。
<i></i>
</p>
</section>
</li>
</ul>
</div>
<div class="news_right_down">
<div class="news_right_down_img"><section><img src="img/160229155948703765.jpg" alt=""></section></div>
<div class="news_right_down_text">
<section class="news_text">
<h3>《头脑特工队》获得第88届奥斯卡最佳动画长片</h3>
<p>皮克斯《头脑特工队》获得第88届奥斯卡最佳动画长片！实至名归！
<i></i>
</p>
</section>
</div>
</div>
</div>
</div>
<!--脚部-->
<footer>
<div class="foot">
<!--二维码-->
<div>
<ul>
<li><img src="img/b_logo.png" alt=""></li>
<li><img src="img/weibo.jpg" alt=""><p>关注我们的微博</p></li>
<li><img src="img/weibo.jpg" alt=""><p>关注我们的微信</p></li>
</ul>
</div>
<!--关于我们-->
<div>
<a href="#">关于我们</a>
<a href="#">加入我们</a>
<a href="#">法律条款</a>
<a href="#">隐私政策</a>
<a href="#">退换货政策</a>
</div>
<div><small>Disney | Pixar All rights reserved.备案号：沪B2-20040339-3</small></div>
</div>
</footer>
</div>
</body>
</html>
CSS部分
*{
padding: 0;
margin: 0;
}
.homepage{
width: 1200px;
margin: auto;
/*outline:1px solid;*/
}
body{
font-family: sans-serif;
}
li{
list-style-type: none;
}
h1{
font-family: Arial sans-serif;
text-align: center;
margin: 55px 0 42px 0;
}
/*导航栏*/
header li{
float: left;
width: 14.28%;
text-align: center;
line-height: 46px;
}
header a{
text-decoration: none;
color: black;
}
header i{
display: inline-block;
width: 20px;
height: 20px;
background: url("img/icon.png");
}
header li:nth-child(2) i{
background-position: 0 -20px;
}
header li:nth-child(3) i{
background-position: 0 -44px;
}
header li:nth-child(5) i{
background-position: 0 -62px;
}
header li:nth-child(6) i{
background-position: 0 -80px;
}
header li:nth-child(7) i{
background-position: 0 -101px;
}
/*导航悬停视口变化*/
header li:hover a{
color: red;
}
header li:nth-child(1):hover i{
background-position: -22px 0;
}
header li:nth-child(2):hover i{
background-position: -22px -20px;
}
header li:nth-child(3):hover i{
background-position: -22px -44px;
}
header li:nth-child(5):hover i{
background-position: -22px -62px;
}
header li:nth-child(6):hover i{
background-position: -22px -80px;
}
header li:nth-child(7):hover i{
background-position: -22px -101px;
}
/*明星*/
.star{
overflow: hidden;
text-align: center;
}
.star li{
width: 16.6%;
float: left;
}
.star img{
width: 115px;
}
/*商店*/
.store{
overflow: hidden;
}
.store img{
float: left;
}
.store_left img{
width: 50%;
}
.store_right img{
width: 24.8%;
border: 1px solid gainsboro;
}
/*资讯*/
.news{
overflow: hidden;
height: 769px;
outline: 1px solid gainsboro;
}
.news p{
font-size: 15px;
color: rgb(84, 85, 77);
}
.news_text{
margin: 30px 30px 10px;
}
.news h3,h2{
padding-bottom: 22px;
}
.news_left{
width: 50%;
float: left;
}
.news_right_up ul{
height:62%;
}
.news_right_up li{
width: 25%;
float: left;
outline: 1px solid gainsboro;
}
.news_right_down{
width: 50%;
float: right;
}
.news_right_down_text{
display: inline-block;
width: 50%;
float: right;
}
.news_right_down_img{
width: 50%;
float: left;
}
.news i{
display: inline-block;
width: 14px;
height: 14px;
background: url("img/icon.png");
background-position: -48px -102px;
}
/*.news li{*/
/*outline: 1px solid gainsboro;*/
/*}*/
/*脚部*/
footer{
text-align: center;
}
.foot{
margin-bottom: 150px;
}
footer ul{
overflow: hidden;
width: 490px;
margin: 90px auto 21px;
padding: 25px;
border-bottom: 1px solid gainsboro;
}
footer li{
float: left;
}
footer li:nth-child(1){
padding: 0 30px 0 0;
border-right: 1px solid gainsboro;
}
footer li:nth-child(2){
padding: 0 35px;
}
footer a{
text-decoration: none;
color: black;
}
