高級網站構建

?將用div和span來構建一些嚴格的支持結構

一：div的用法

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

<二>：調整某內容部分寬度

?設置元素的寬度用“width”屬性（定義內容區的寬度）

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

?

<三> ?縮寫css設置的一些屬性如

這些指定補白的老辦法 padding-0px: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px; 縮寫為; padding: 0px 20px 30px 10px;↓上 右 下 左 如果補白和邊界值都相等可以縮寫為 padding: 20px; 邊框的縮寫比邊界和補白更靈活，順序可以隨意選著 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>工作方式一樣， 用來把內聯分成不同的邏輯部分，而<div>則是把塊級的內容分成不同的邏輯部分

<span> 只是改變某些某些文字的樣式，比如; 一個歌迷網站頁面上專輯或藝術家名，就應該用<span>并且把<span>元素放進適當的類中組成一組，一起設計樣式

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

三：<a>元素

<a>的特征

? ? ? <a>元素與其他元素不一樣，它的樣式隨它的狀態而改變。如果一個鏈接從沒被點擊過，它有一種樣式，如果被電擊了，就有另外一種樣式。如果鼠標停留在鏈接上，還會有另一種不同樣式

? ?利用不同的顏色來指定狀態（未被訪問， 以訪問， 鼠標停留）樣式

利用偽類：

a:link{↓ 狀態（未被訪問） color: green; }

應用偽類

用一個子孫選擇符和一個偽類結合起來使用;

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。