一、介紹
整合就是把一些零散的東西通過某種方式而彼此銜接金拒，從而實現(xiàn)信息系統(tǒng)的資源共享和協(xié)同工作募书。其主要的精髓在于將零散的要素組合在一起，并最終形成有價值有效率的一個整體镶奉。
CSS應(yīng)用中我們將把一些CSS中常用功能整合在一起础淤，完成我們的頁面展示，取得1+1大于2的效果哨苛。
二值骇、知識點介紹
1、<div>標(biāo)簽
2移国、<span>標(biāo)簽
3吱瘩、<head>頭部
4、CSS選擇器擴(kuò)展
5迹缀、CSS繼承
6使碾、BEM
7、盒模型
三祝懂、上課對應(yīng)視頻的說明文檔
1票摇、<div>標(biāo)簽
<div> 標(biāo)簽可以把文檔分割為獨立的、不同的部分砚蓬。它可以用作嚴(yán)格的組織工具崩掘，并且不使用任何格式與其關(guān)聯(lián)。如果用 id 或 class 來標(biāo)記 <div>漆撞，那么該標(biāo)簽的作用會變得更加有效限次。
2、<span>標(biāo)簽
<span> 標(biāo)簽被用來組合文檔中的行內(nèi)元素
3摩梧、<head>頭部
<title></title>標(biāo)題
<title>HTML5是萬維網(wǎng)的核心語言</title>
<meta/>網(wǎng)頁文檔的屬性
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="description" content="HTML5是萬維網(wǎng)的核心語言物延、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言（HTML）的第五次重大修改">
<meta name="keywords" content="HTML5,CSS3......" />
4、CSS選擇器擴(kuò)展
標(biāo)簽仅父，ID,類
通配符選擇器（＊）
后代選擇器（Ｅ Ｆ）
群組選擇器（selector1,selector2,...,selectorN）
5叛薯、CSS繼承
要想了解css樣式表的繼承，我們先從文檔樹（HTML DOM）開始笙纤。文檔樹由HTML元素組成耗溜。
6、BEM
BEM的意思就是塊（block）省容、元素（element）抖拴、修飾符（modifier）,是由Yandex團(tuán)隊提出的一種前端命名方法論。
block__element--modifier
7蓉冈、盒模型
內(nèi)容(content)城舞、填充(padding)轩触、邊框(border)、邊界(margin)家夺， CSS盒子模式都具備這些屬性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<style type="text/css">
#header,#siderLeft,#siderRight,#footer{
border:solid 1px #666;
padding:10px;
margin:6px
}
#header{width:500px}
#siderLeft{
float:left;
width:60px;
height:100px;
}
#siderRight{
float:left;
width:405px;
height:100px;
}
#footer{
clear:both;
width:500px
}
</style>
</head>
<body>
<div id="header">導(dǎo)航</div>
<div id="siderLeft">菜單</div>
<div id="siderRight">內(nèi)容</div>
<div id="footer">底部說明</div>
</body>
</html>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name=“author” content="" />
<title>用CSS排版減小網(wǎng)頁文件體積</title>
<style type="text/css">
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">首 頁</a></li>
<li><a href="flash.html">文 章</a></li>
<li><a href="#">相冊</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">論 壇</a></li>
<li><a href="#">幫助</a></li>
</ul>
</body>
</html>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name=“author” content=“" />
<title>用CSS排版減小網(wǎng)頁文件體積</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px;
}
.mainBox {
border: 1px dashed #0099CC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
.mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: #0099CC;
font-size: 16px;
}
.mainBox p {
line-height: 1.5em;
text-indent: 2em;
margin: 35px 5px 5px 5px;
}
-->
</style>
</head>
<body>
<div class="mainBox">
<h3>前言</h3>
<p>如果你想嘗試一下不用表格來排版網(wǎng)頁脱柱，而是用CSS來排版你的網(wǎng)頁，也就是常聽的用DIV來編排你的網(wǎng)頁結(jié)構(gòu)拉馋，又或者說你想學(xué)習(xí)網(wǎng)頁標(biāo)準(zhǔn)設(shè)計榨为，再或者說你的上司要你改變傳統(tǒng)的表格排版方式，提高企業(yè)競爭力煌茴，那么你一定要接觸到的一個知識點就是CSS的盒子模型随闺，div排版的核心所在，傳統(tǒng)的表格排版是通過大小不一的表格和表格嵌套來定位排版網(wǎng)頁內(nèi)容蔓腐，而改用CSS排版后矩乐，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁。</p>
</div>
<div class="mainBox">
<h3>理解CSS盒子模式</h3>
<p>如果你想嘗試一下不用表格來排版網(wǎng)頁回论，而是用CSS來排版你的網(wǎng)頁散罕，也就是常聽的用DIV來編排你的網(wǎng)頁結(jié)構(gòu)，又或者說你想學(xué)習(xí)網(wǎng)頁標(biāo)準(zhǔn)設(shè)計傀蓉，再或者說你的上司要你改變傳統(tǒng)的表格排版方式欧漱，提高企業(yè)競爭力，那么你一定要接觸到的一個知識點就是CSS的盒子模型葬燎，div排版的核心所在误甚，傳統(tǒng)的表格排版是通過大小不一的表格和表格嵌套來定位排版網(wǎng)頁內(nèi)容，而改用CSS排版后谱净，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁窑邦。</p>
</div>
<div class="mainBox">
<h3>轉(zhuǎn)變我們的思路</h3>
<p>如果你想嘗試一下不用表格來排版網(wǎng)頁，而是用CSS來排版你的網(wǎng)頁岳遥，也就是常聽的用DIV來編排你的網(wǎng)頁結(jié)構(gòu)奕翔，又或者說你想學(xué)習(xí)網(wǎng)頁標(biāo)準(zhǔn)設(shè)計裕寨，再或者說你的上司要你改變傳統(tǒng)的表格排版方式浩蓉，提高企業(yè)競爭力，那么你一定要接觸到的一個知識點就是CSS的盒子模型宾袜，div排版的核心所在捻艳，傳統(tǒng)的表格排版是通過大小不一的表格和表格嵌套來定位排版網(wǎng)頁內(nèi)容，而改用CSS排版后庆猫，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁认轨。</p>
</div>
<div class="mainBox">
<h3>熟悉工作流程</h3>
<p>如果你想嘗試一下不用表格來排版網(wǎng)頁，而是用CSS來排版你的網(wǎng)頁月培，也就是常聽的用DIV來編排你的網(wǎng)頁結(jié)構(gòu)嘁字，又或者說你想學(xué)習(xí)網(wǎng)頁標(biāo)準(zhǔn)設(shè)計恩急，再或者說你的上司要你改變傳統(tǒng)的表格排版方式，提高企業(yè)競爭力纪蜒，那么你一定要接觸到的一個知識點就是CSS的盒子模型衷恭，div排版的核心所在，傳統(tǒng)的表格排版是通過大小不一的表格和表格嵌套來定位排版網(wǎng)頁內(nèi)容纯续，而改用CSS排版后随珠，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁。</p>
</div>
</body>
</html>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>相對定位和絕對定位實例</title>
<style type="text/css">
<!--
*{
margin:0px;
padding:0px;
}
body {
margin:10px;
font-size: 13px;
}
a:link {
color: #666;
text-decoration: none;/*去除鏈接下劃線*/
}
a:visited {
color: #666;
text-decoration: none;
}
a:hover {
color: #F90;
}
h3 {
color: #FFF;
background-color: #F90;
width: 100px;
padding-top:3px;
text-align:center;
}
ul {
width: 300px;
border-top: 1px solid #F60;/*使其上邊有一線條猬错，與標(biāo)題h3吻合*/
}
ul li {
padding:5px;
border-bottom: 1px solid #CCC;
list-style:none;/*去除列表樣式窗看，這對于標(biāo)準(zhǔn)瀏覽器很重要*/
}
a {
position: relative;/*設(shè)置其定位方法為相對定位，等一下內(nèi)部信息面板就可以相對它定位*/
display:block;/*讓鏈接以塊狀呈現(xiàn)倦炒，這樣不用點中鏈接文字就可以響應(yīng)鏈接*/
}
a div {
display: none;/*初始化信息面板不顯示*/
}
a:hover {background:#fff;}/*IE7以下版本A狀態(tài)偽類bug*/
a:hover div {
position: absolute;
padding:5px;
display:block;
width: 245px;/*只給出寬度显沈，高讓它隨內(nèi)容多少自動調(diào)整*/
left:150px;/*這是相對父級A的定位*/
top: 20px;
border: 1px solid rgb(91,185,233);
background-color: rgb(228,246,255);
z-index:999;/*把信息面板提到一個較高的位置，使鏈接文字過長時不會與面板重疊,但這只對FF有效*/
}
a img {
width:80px;
height:80px;
border:none;/*去除圖片邊框逢唤，默認(rèn)情況下构罗，鏈接內(nèi)的圖片在標(biāo)準(zhǔn)瀏覽器會出現(xiàn)邊框*/
display:block;
position: absolute;/*用絕對定位抽離正常文本流，不然在設(shè)計的時候考慮到不同瀏覽器正常顯示會更麻煩*/
top:5px;/*這里的5px是與信息面板大盒子的填充一樣的*/
left:5px;
}
dl {
width: 160px;
float:right;
color: #999;
line-height:20px;
}
dl dd span {
font-weight: bold;
color: #639;
}
-->
</style>
</head>
<body>
<h3>最新單曲</h3>
<ul>
<li><a href="#">01 愛的文身 黃圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg" alt="" />
<dl>
<dd><span>歌名:</span>愛的文身</dd>
<dd><span>歌手:</span>黃圣依</dd>
<dd><span>介紹:</span>黃圣依唱片主打歌的確是她個人的內(nèi)心寫照智玻，《愛的文身》由香港音樂大師金培達(dá)作曲遂唧，制作人陳少琪親自填詞。</dd>
</dl></div></a></li>
<li><a href="#">02 累了 阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg" alt="" />
<dl>
<dd><span>歌名:</span>累了</dd>
<dd><span>歌手:</span>阿信</dd>
<dd><span>介紹:</span>青春校園偶像劇----【熱情仲夏】片尾曲</dd>
</dl></div></a></li>
<li><a href="#">03 漫漫 慢慢 阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/singerpic_6361_0.jpg" alt="" />
<dl>
<dd><span>歌名:</span>漫漫 慢慢</dd>
<dd><span>歌手:</span>阿朵</dd>
<dd><span>介紹:</span>阿朵搶聽版最新單曲《漫漫 慢慢》讓你認(rèn)識阿朵柔情的一面吊奢，展現(xiàn)阿朵百變的風(fēng)格盖彭。</dd>
</dl></div></a></li>
<li><a href="#">04 我懷念的 孫燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/singerpic_109_0.jpg" alt="" />
<dl>
<dd><span>歌名:</span>我懷念的</dd>
<dd><span>歌手:</span>孫燕姿</dd>
<dd><span>介紹:</span>令人感同身受的抒情歌，在故事性的架構(gòu)中页滚，有著平凡但又能扣人心弦的情感召边，是一首高度共鳴的抒情歌。</dd>
</dl></div></a></li>
<li><a href="#">05 聽,花期越來越近 后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" alt="" />
<dl>
<dd><span>歌名:</span>花期越來越近</dd>
<dd><span>歌手:</span>后弦</dd>
<dd><span>介紹:</span>后弦參與《花開的聲音》這個舞臺劇里的一部分裹驰，邀請了后弦去演唱這首歌隧熙，此歌就是為舞臺劇《花開的聲音》而創(chuàng)作。</dd>
</dl></div></a></li>
</ul>
</body>
</html>
