人妻少妇无码,欧美激情一二区

一、介紹

整合就是把一些零散的東西通過(guò)某種方式而彼此銜接，從而實(shí)現(xiàn)信息系統(tǒng)的資源共享和協(xié)同工作。其主要的精髓在于將零散的要素組合在一起，并最終形成有價(jià)值有效率的一個(gè)整體。

CSS應(yīng)用中我們將把一些CSS中常用功能整合在一起，完成我們的頁(yè)面展示，取得1+1大于2的效果。

二、知識(shí)點(diǎn)介紹

1、<div>標(biāo)簽

2、<span>標(biāo)簽

3、<head>頭部

4、CSS選擇器擴(kuò)展

5、CSS繼承

6、BEM

7、盒模型

三、上課對(duì)應(yīng)視頻的說(shuō)明文檔

1、<div>標(biāo)簽

<div> 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。如果用 id 或 class 來(lái)標(biāo)記 <div>，那么該標(biāo)簽的作用會(huì)變得更加有效。

2、<span>標(biāo)簽

<span> 標(biāo)簽被用來(lái)組合文檔中的行內(nèi)元素

3、<head>頭部

<title></title>標(biāo)題

4、CSS選擇器擴(kuò)展

標(biāo)簽，ID,類

通配符選擇器（＊）

后代選擇器（ＥＦ）

群組選擇器（selector1,selector2,...,selectorN）

5、CSS繼承

要想了解css樣式表的繼承，我們先從文檔樹(shù)（HTML DOM）開(kāi)始。文檔樹(shù)由HTML元素組成。

6、BEM

BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論。

block__element--modifier

7、盒模型

內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性

<!DOCTYPE html>

<html>

<head>

#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>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>用CSS排版減小網(wǎng)頁(yè)文件體積</title>

#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>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>用CSS排版減小網(wǎng)頁(yè)文件體積</title>

<!--

* {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>

<p>如果你想嘗試一下不用表格來(lái)排版網(wǎng)頁(yè)，而是用CSS來(lái)排版你的網(wǎng)頁(yè)，也就是常聽(tīng)的用DIV來(lái)編排你的網(wǎng)頁(yè)結(jié)構(gòu)，又或者說(shuō)你想學(xué)習(xí)網(wǎng)頁(yè)標(biāo)準(zhǔn)設(shè)計(jì)，再或者說(shuō)你的上司要你改變傳統(tǒng)的表格排版方式，提高企業(yè)競(jìng)爭(zhēng)力，那么你一定要接觸到的一個(gè)知識(shí)點(diǎn)就是CSS的盒子模型，div排版的核心所在，傳統(tǒng)的表格排版是通過(guò)大小不一的表格和表格嵌套來(lái)定位排版網(wǎng)頁(yè)內(nèi)容，而改用CSS排版后，就是通過(guò)由CSS定義的大小不一的盒子和盒子嵌套來(lái)編排網(wǎng)頁(yè)。</p>

</div>

<h3>理解CSS盒子模式</h3>

</div>

<h3>轉(zhuǎn)變我們的思路</h3>

</div>

<h3>熟悉工作流程</h3>

</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>相對(duì)定位和絕對(duì)定位實(shí)例</title>

<!--

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;/*去除列表樣式，這對(duì)于標(biāo)準(zhǔn)瀏覽器很重要*/

}

a {

position: relative;/*設(shè)置其定位方法為相對(duì)定位，等一下內(nèi)部信息面板就可以相對(duì)它定位*/

display:block;/*讓鏈接以塊狀呈現(xiàn)，這樣不用點(diǎ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)容多少自動(dòng)調(diào)整*/

left:150px;/*這是相對(duì)父級(jí)A的定位*/

top: 20px;

border: 1px solid rgb(91,185,233);

background-color: rgb(228,246,255);

z-index:999;/*把信息面板提到一個(gè)較高的位置，使鏈接文字過(guò)長(zhǎng)時(shí)不會(huì)與面板重疊,但這只對(duì)FF有效*/

}

a img {

width:80px;

height:80px;

border:none;/*去除圖片邊框，默認(rèn)情況下，鏈接內(nèi)的圖片在標(biāo)準(zhǔn)瀏覽器會(huì)出現(xiàn)邊框*/

display:block;

position: absolute;/*用絕對(duì)定位抽離正常文本流，不然在設(shè)計(jì)的時(shí)候考慮到不同瀏覽器正常顯示會(huì)更麻煩*/

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>

<ul>

<li><a href="#">01 愛(ài)的文身黃圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg" alt="" />

<dl>

<dd><span>介紹:</span>黃圣依唱片主打歌的確是她個(gè)人的內(nèi)心寫照，《愛(ài)的文身》由香港音樂(lè)大師金培達(dá)作曲，制作人陳少琪親自填詞。</dd>

</dl></div></a></li>

<dl>

<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>阿朵搶聽(tīng)版最新單曲《漫漫慢慢》讓你認(rèn)識(shí)阿朵柔情的一面，展現(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>令人感同身受的抒情歌，在故事性的架構(gòu)中，有著平凡但又能扣人心弦的情感，是一首高度共鳴的抒情歌。</dd>

</dl></div></a></li>

<dl>

<dd><span>介紹:</span>后弦參與《花開(kāi)的聲音》這個(gè)舞臺(tái)劇里的一部分，邀請(qǐng)了后弦去演唱這首歌，此歌就是為舞臺(tái)劇《花開(kāi)的聲音》而創(chuàng)作。</dd>

</dl></div></a></li>

</ul>

</body>

</html>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

從屌絲到架構(gòu)師的飛越（CSS篇）-CSS整合

從屌絲到架構(gòu)師的飛越（CSS篇）-CSS整合

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

從屌絲到架構(gòu)師的飛越（CSS篇）-CSS整合

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av