排查錯誤
Chrome瀏覽器的審查功能尾膊。
錯誤1：選擇器寫錯了银萍，壓根沒有選擇上；
如果寫了一個錯誤的選擇器禀苦，
<style type="text/css">
dvi p{
color:red;
}
</style>
Chrome審查一下，就能看見沒有任何選擇器選擇上這個元素：
錯誤的寫class：
<div calss="haha">
<p>文字</p>
</div>
上面一個選擇器后面有多余的東西遂鹊，所以就干擾了下一個選擇器：
body{
background-color: pink;
}}
div p{
color:red;
}
家譜順序錯誤振乏，也是選擇不上的。Chrome瀏覽器底部秉扑，是選中的元素的家譜：
錯誤2：選擇上了慧邮，但是屬性寫錯了；
博雅互動作業(yè)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>博雅互動</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*公共類舟陆，原子類*/
.inner_c{
width: 1000px;
margin: 0 auto;
}
.cl{
clear: both;
}
.nomargin{
margin: 0 !important;
}
body{
height: 4444px;
font-size: 14px;
font-family: "Arial","Microsoft Yahei","SimSun";
}
.header{
/*標準流中的塊級元素不寫寬度自動撐滿误澳，所以可以不寫width*/
/*也可以寫上width:100%;更清晰一些。*/
width: 100%;
height: 58px;
background-color: #191D3A;
}
.header .logo{
/*浮動的盒子會自動收縮吨娜，就像一個橡皮筋套住了它脓匿，收縮到最小*/
/*兒子多寬，它就多寬*/
float: left;
padding: 10px 0px 0px 20px;
}
.header .logo h1{
width: 158px;
height: 37px;
background: url(images/logo.png);
text-indent: -999em;
overflow: hidden;
}
.header .logo h1 a{
display: block;
height: 37px;
}
.header .nav{
float: left;
width: 603px;
height: 58px;
margin-left: 47px;
}
.header .nav ul{
list-style: none;
}
.header .nav ul li{
float: left;
width: 85px;
border-right: 1px solid #252947;
}
.header .nav ul li.first{
border-left: 1px solid #252947;
}
.header .nav ul li a{
display: block;
width: 85px;
height: 58px;
text-align: center;
line-height: 58px;
text-decoration: none;
color:#818496;
}
.header .nav ul li.current a{
background-color: #252947;
color:white;
}
.header .nav ul li a:hover{
color:white;
}
.header .joinus{
float: left;
margin-left: 52px;
padding-top: 12px;
}
.header .joinus a{
display: block;
width: 98px;
height: 32px;
background-color: #38B774;
border: 1px solid #3ACA7A;
text-align: center;
line-height: 32px;
text-decoration: none;
color:white;
/*圓角*/
border-radius: 3px;
}
.header .joinus a:hover{
background-color: orange;
border-color: yellow;
}
.banner{
width: 100%;
height: 567px;
position: relative;
}
.banner .banner1{
height: 567px;
background: #5EC4EA url(images/banner1.jpg) no-repeat center top;
}
.banner .circles{
position: absolute;
width: 94px;
height: 13px;
left: 50%;
bottom: 19px;
margin-left: -47px;
}
.banner .circles ol{
list-style: none;
}
.banner .circles ol li{
float: left;
width: 12px;
height: 12px;
margin-right: 15px;
background: url(images/icons.png) no-repeat -1px -3px;
}
.banner .circles ol li.cur{
background-position: -13px -3px;
}
.product{
padding-top: 50px;
height: 229px;
border-bottom: 1px solid #DBE1E7;
position: relative;
}
.product ul{
list-style: none;
}
.product ul li{
float: left;
width: 218px;
margin-right: 43px;
}
.product ul li.last{
width: 217px;
overflow: hidden;
}
.product ul li a{
text-decoration: none;
display: block;
padding-bottom: 12px;
}
.product ul li a:hover{
background-color: #38B774;
}
.product ul li span{
/*轉(zhuǎn)成塊之后宦赠，就能用text-align:center;來居中內(nèi)部文字了*/
display: block;
text-align: center;
}
.product ul li span.chinese{
line-height: 40px;
color:#444866;
font-weight: bold;
}
.product ul li span.english{
font-size: 12px;
line-height: 12px;
color:#38B774;
}
.product ul li a:hover span.chinese{
color:white;
}
.product ul li a:hover span.english{
color:white;
}
.product ul li span.english b{
font-weight: normal;
padding-right: 11px;
background: url(images/arrow.png) no-repeat right center;
}
.product ul li a:hover span.english b{
background-image: url(images/arrow2.png);
}
.product .circles{
position: absolute;
bottom: -6px;
left: 50%;
width: 117px;
height: 12px;
background-color: white;
margin-left: -59px;
}
.product ol{
padding-left: 17px;
list-style: none;
}
.product .circles ol li{
float: left;
width: 12px;
height: 12px;
background:url(images/icons.png) no-repeat -1px -15px;
margin-right: 14px;
}
.product .circles ol li.cur{
background-position: -13px -15px;
}
</style>
</head>
<body>
<!-- 網(wǎng)頁頭部 -->
<div class="header">
<div class="inner_c">
<div class="logo">
<h1><a href="">博雅互動-最專業(yè)的游戲公司</a></h1>
</div>
<div class="nav">
<ul>
<li class="first current"><a href="">首頁</a></li>
<li><a href="">博雅游戲</a></li>
<li><a href="">博雅新聞</a></li>
<li><a href="">關(guān)于我們</a></li>
<li><a href="">客服中心</a></li>
<li><a href="">投資者關(guān)系</a></li>
<li><a href="">校園大使</a></li>
</ul>
</div>
<div class="joinus">
<a href="">加入我們</a>
</div>
</div>
</div>
<div class="cl"></div>
<!-- banner -->
<div class="banner">
<div class="banner1"></div>
<div class="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li class="nomargin"></li>
</ol>
</div>
</div>
<div class="cl"></div>
<!-- 產(chǎn)品 -->
<div class="product inner_c">
<ul>
<li>
<a href="">
<img src="images/pro1.png" alt="" />
<span class="chinese">四川麻將</span>
<span class="english">
<b>
SICHUAN MAHJONG
</b>
</span>
</a>
</li>
<li>
<a href="">
<img src="images/pro2.png" alt="" />
<span class="chinese">四川麻將</span>
<span class="english">
<b>SICHUAN</b>
</span>
</a>
</li>
<li>
<a href="">
<img src="images/pro3.png" alt="" />
<span class="chinese">四川麻將</span>
<span class="english">
<b>SICHUAN MAHJONG</b>
</span>
</a>
</li>
<li class="last nomargin">
<a href="">
<img src="images/pro4.png" alt="" />
<span class="chinese">四川麻將</span>
<span class="english">
<b>SICHUAN MAHJONG</b>
</span>
</a>
</li>
</ul>
<div class="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li class="nomargin"></li>
</ol>
</div>
</div>
</body>
</html>
版心：就是網(wǎng)頁中間居中的部分陪毡。
響應式的網(wǎng)站responsive web design，就是網(wǎng)頁隨著用戶屏幕的大小不同勾扭，有不同尺寸的版心毡琉。
我們現(xiàn)在做的網(wǎng)站，版心都是固定的：1200px妙色、1100px桅滋、1000px、980px身辨、970px
padding這個東西丐谋，是不能夠擠背景圖片的，因為padding區(qū)域也能有背景煌珊，背景圖也能渲染在padding里号俐。
到底用<img src=”” />插入， 還是backgrond:url(); 定庵， 要看這個圖片是內(nèi)容的一部分還是雜碎吏饿、起裝飾作用的圖片。
定位
CSS中重要的東西就三個：盒模型蔬浙、浮動猪落、定位。這三個技術(shù)畴博，就是負責網(wǎng)頁的布局的笨忌。
其余的技術(shù)，都是雜碎：background俱病、文字官疲、顏色表示法……
1.相對定位
position:relative;相對自己進行微調(diào)
相對定位就是相對自己原來的位置杂曲，進行位置移動。移動的時候需要使用定位值袁余。
top：正數(shù)向下移動
bottom： 正數(shù)向上移動
left：正數(shù)向右移動
right：正數(shù)向左移動
可以任意組合，從top咱揍、bottom中選擇一個颖榜，然后從left、right中選擇一個
top:10px;
left:20px;
等價于
bottom:-10px;
right:-20px;
相對定位不脫標煤裙，老家留坑掩完，形影分離。
相對定位這個東西且蓬，因為在老家留坑，所以用處不大：
1） 微調(diào)元素
2） 下午我們介紹的“子絕父相”
微調(diào)元素：
2.絕對定位
position: absolute;
絕對定位的元素题翰，脫離標準文檔流恶阴。用top、bottom豹障、left冯事、right來進行定位。參考的是頁面的左上角血公。
1.定位參考點
我們現(xiàn)在來研究昵仅，定位的參考原點到底是哪里？
如果用top值定位累魔，那么參考點就是頁面的左上角或者右上角摔笤，而不是瀏覽器窗口的。
如果用bottom進行定位垦写，就是瀏覽器首屏的左下角在頁面中的位置吕世。
面試題：
2.祖先盒子當參考點
子絕父相：
<div> → 相對定位
<p></p> → 絕對定位
</div>
此時這個p就是以div的邊框內(nèi)側(cè)為參考點進行定位。
一個盒子可以以某一個祖先盒子作為定位參考點梯澜，離自己最近的寞冯、已經(jīng)定位了的祖先盒子。
要記住晚伙，祖先盒子不一定只有相對定位才能成為參考點吮龄，而是什么定位都行。比如咆疗，相對定位漓帚、絕對定位、固定定位午磁。
除了“子絕父相”之外尝抖，“子絕父絕”也是一個典型的定位模型毡们；“子絕父固”也是一個典型的定位模型。
祖先中離自己最近的昧辽、已經(jīng)定位的元素：
<div class="box1"> → 沒有定位
<div class="box2"> → 相對定位
<div class="box3"> → 絕對定位
<div class="box4"> → 沒有定位
<p></p>
</div>
</div>
</div>
</div>
所以p以.box3為參考點衙熔；.box3以box2為參考點。
絕對定位的元素搅荞，無視參考盒子的padding：
紅色盒子top:0;left:0; 無視padding的红氯。
3.絕對定位元素的居中
新說一個知識點，就是絕對定位盒子已經(jīng)不屬于標準文檔流了咕痛，所以不能使用margin:0 auto痢甘；來居中了。那么絕對定位的盒子如何居中茉贡？
position: absolute;
left:50%;
top: 0;
left:50%;指的是元素的左邊線是50%的位置塞栅。這點和background-position不一樣。
所以要往回拉一半的自己寬度腔丧。
<style type="text/css">
div{
width: 600px;
height: 200px;
background-color: yellowgreen;
position: absolute;
left:50%;
top: 0;
margin-left: -300px;
}
</style>
4.應用
所有的壓蓋效果放椰，想都別想，90%是絕對定位做的愉粤。
<style type="text/css">
*{
margin:0;
padding: 0;
}
.carouse1{
width: 310px;
height: 220px;
border: 1px solid gray;
position: relative;
}
span.left_btn{
position: absolute;
background:url(images/icon_v9.png) no-repeat 0 0px;
width: 30px;
height: 35px;
top: 50%;
left: 10px;
margin-top: -17px;
cursor: pointer;
}
span.right_btn{
position: absolute;
background:url(images/icon_v9.png) no-repeat 0 -44px;
width: 30px;
height: 35px;
top: 50%;
right: 10px;
margin-top: -17px;
cursor: pointer;
}
</style>
<div class="carouse1">
<img src="images/bidong.jpg" alt="" />
<span class="left_btn"></span>
<span class="right_btn"></span>
<p>花樣秀性感!美女劈腿壁咚秀逆天好身材</p>
</div>
3.固定定位
position:fixed;
固定定位脫標庄敛，參考點是瀏覽器的角。
隨著窗口的卷動科汗，固定定位的元素不會在視口中消失藻烤。
固定定位的參考點一定是瀏覽器，我們無法讓一個盒子當做fixed定位的參考點头滔。
至此我們已經(jīng)全部學習了脫標的3種方法：
浮動怖亭、絕對定位、固定定位
這三種脫標的方法坤检，只能有一種作用在同一個元素身上兴猩。不存在一個元素同時浮動、同時絕對定位的情況早歇。
我們給一個父親overflow:hidden; 這個時候父親就能認識浮動兒子的高度了倾芝，就能被兒子撐高了。
但是箭跳，絕對定位晨另、固定定位的兒子，父親永遠不可能被他們撐高谱姓！
z-index屬性
負責設(shè)置壓蓋順序借尿，誰壓蓋誰的問題。
先說的默認的壓蓋順序：
1） 定位了的能夠壓住沒有定位的；
2） 如果都定位了路翻，那么HTML順序后面的能夠壓住前面的狈癞；
<div class="box1">1</div> → 沒有定位
<div class="box2">2</div> → 絕對定位
<div class="box3">3</div> → 相對定位
3壓住2和1； 2壓住1
z-index沒有單位茂契，數(shù)字大的能夠壓住數(shù)字小的蝶桶。
z-index: 5;
只有定位了的元素才能寫z-index值。標準流的元素不能寫z-index值掉冶，浮動的元素不能寫z-index莫瞬。
從父現(xiàn)象：父親慫了，兒子再牛逼也沒用郭蕉。
<div class="linzhiying"> → z-index:9;
<p class="kimi"></p> → z-index:100000;
</div>
<div class="wangjianlin"> → z-index:10;
<p class="wangsicong"></p> → z-index:無論是多少肯定能壓住kimi因為父親z-index大
</div>
