高級網(wǎng)站構(gòu)建

?將用div和span來構(gòu)建一些嚴(yán)格的支持結(jié)構(gòu)

一：div的用法

• <1> 把頁面上相互關(guān)聯(lián)的一組元素把它們裝進(jìn)一個(gè)<div>元素來添加結(jié)構(gòu)，如果你知道哪個(gè)元素屬于哪個(gè)部分，那么就可以添加些xhtml來標(biāo)記這些結(jié)構(gòu)。一般做法是用<div>開始和結(jié)束標(biāo)記把屬于一個(gè)邏輯部分的元素包圍起來。如
• <div>.....</div>
• <2>把元素放進(jìn)<div>里，就表明它們是同一組。表明一組意義——用id屬性為<div>提供唯一的標(biāo)簽。如個(gè)貓<div>一個(gè)id"cats
• <div id="cats">
• <3>用<div>給頁面添加更多結(jié)構(gòu)的原因有很多。首先，你可能更深一步地展示一下你頁面的基本邏輯結(jié)構(gòu)。這樣有助于別人理解網(wǎng)頁，也有助于維護(hù)網(wǎng)頁。第二，你可能經(jīng)常需要用結(jié)構(gòu)把樣式應(yīng)用到某一部分
• <4>在結(jié)構(gòu)上添加結(jié)構(gòu) ??例如，有一個(gè)貓部分和一個(gè)夠部分。兩部分一起就是頁面中邏輯上的“pets”部分

<二>：調(diào)整某內(nèi)容部分寬度

?設(shè)置元素的寬度用“width”屬性（定義內(nèi)容區(qū)的寬度）

<div>元素中的所有文本都嵌套在塊元素中，但是現(xiàn)在它們的對齊樣式都改變了。這是因?yàn)閴K元素繼承了<div>的text-align屬性。不是<div>直接影響標(biāo)題和段落（這些都是塊元素）中的文本對齊樣式，而是標(biāo)題和段落繼承了text-align屬性值“center” ?使它們自己的內(nèi)容居中

?

<三> ?縮寫css設(shè)置的一些屬性如

這些指定補(bǔ)白的老辦法 padding-0px: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px; 縮寫為; padding: 0px 20px 30px 10px;↓上 右 下 左 如果補(bǔ)白和邊界值都相等可以縮寫為 padding: 20px; 邊框的縮寫比邊界和補(bǔ)白更靈活，順序可以隨意選著 border: solid thin #007e7e; border: #007e7e solid thin 背景也可以縮寫 background-color:white; background-image：url(images/cocktail.gif); background-repeat:repeat-x; 縮寫為: background: white url(images/cocktail.gif) repeat-x;

?

二: span的用法

<span>元素與<div>工作方式一樣， 用來把內(nèi)聯(lián)分成不同的邏輯部分，而<div>則是把塊級的內(nèi)容分成不同的邏輯部分

<span> 只是改變某些某些文字的樣式，比如; 一個(gè)歌迷網(wǎng)站頁面上專輯或藝術(shù)家名，就應(yīng)該用<span>并且把<span>元素放進(jìn)適當(dāng)?shù)念愔薪M成一組，一起設(shè)計(jì)樣式

<li><span class="cd">Buddha Bar</span>,<span class="artist">Claude Challe</span></li> 給<span>設(shè)計(jì)樣式 .cd {font-style: italic;} .artixt{font-weight: bold; }

三：<a>元素

<a>的特征

? ? ? <a>元素與其他元素不一樣，它的樣式隨它的狀態(tài)而改變。如果一個(gè)鏈接從沒被點(diǎn)擊過，它有一種樣式，如果被電擊了，就有另外一種樣式。如果鼠標(biāo)停留在鏈接上，還會有另一種不同樣式

? ?利用不同的顏色來指定狀態(tài)（未被訪問， 以訪問， 鼠標(biāo)停留）樣式

利用偽類：

a:link{↓ 狀態(tài)（未被訪問） color: green; }

應(yīng)用偽類

用一個(gè)子孫選擇符和一個(gè)偽類結(jié)合起來使用;

這是個(gè)選擇符表明要選擇所有未被訪問的嵌套在id為“elixins”的元素里的<a>元素 #elixirs a:link{color: #007e7e; }

總結(jié)

以上是生活随笔為你收集整理的css( div和span)——读书笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。