Css+Div布局小結

1,群選擇器.
說明:當幾個元素樣式屬性一樣時,可以調用同一個申明,元素之間用逗號分隔、
p,td,li{
font-size:12px;
}

2,派生選擇器.
說明:可以使用派生選擇器給一個元素里的子元素定義樣式,例如這樣: li strong{
font-style:italic;
font-weight:normal;
}就是為li的子元素strong定義一個斜體不加粗的模式.

3.ID選擇器.
說明:用css布局主要用層div來實現,而div得樣式通過'id選擇器'來定義.
例如我們首先定義一個層. <div id="menubar"></div> 然后在樣式表里這樣定義、 #menubar{
margin:0px;
background:#FFFFF;
} 其中menubar是自己定義的div的名字,注意前面要加'#'號。
id選擇器同樣也支持派生,例如: #menubar p{
text-aglin:right;
margin-top:10px;
} 這個方法主要用來定義層,和那些比較復雜,有多個派生的子元素、

4.類別選擇器。
說明:css里面用一個點來表示類別選擇器的定義,例如: .12px{
text-aglin:center;
font-family:宋體;
font-size:12px;
}
在頁面中,用class="類別名"的方法調用: <span class="12px">12px大小的字體</span> 這個方法比較靈活,可以隨時新建和刪除、

5.定義鏈接的樣式(偽類樣式)、
說明:css中用4個偽類來定義鏈接樣式,分別是:a:link,a:visited,a:hover,a:active。例如: a:link{font-weight : bold ;text-decoration : none ;color : #c30 }
a:visited{font-weight : bold ;text-decoration : none ;color : #c60 }
a:hover{font-weight : bold ;text-decoration : none ;color : #FFFFF}
a:active{font-weight : bold ;text-decoration : none ;color : #EEE}
以上語句分別定義了"鏈接,以訪問過的鏈接,鼠標停在上方時,點下鼠標時"的樣式.

注意,以上4個樣式可以"缺",但不可以打亂順序,否則樣式會跟你預想的不一樣.他們的原則是:愛恨原則。
即love hate原則,順序是love中的"l"是link,"v"是visited,hate中的"h"是hover,"a"是active。

6.組合使用選擇器創造精致的設計效果。
用漂亮的圖案代替普通無序列表沉悶的黑點,先用css規則告訴類別屬性inventory的無序列表。

ul.inventory{
list-style:disc url(/images/common/lister2.gig) inside;
}

他的調用標記:

Code
<ul class="inventory">
<li><a href="/angelfish">Angelfish</a>(67 items)</li>
<li><a href="/angeld">Angels/Frogfish</a>(35 items)</li>
<li><a href="/anthias">Angelfish</a>(5526 items)</li>
<li><a href="/basslets">Angelfish</a>(15 items)</li>
<ul>

7.縮寫是按照順時針的順序.

margin:25px 0 25px 0;
8.行高.
說明:正常行高的150%.

line-height:150%;
好了,最近幾天在做項目Login和Main頁面的布局與Css,又不是職業美工,邊做邊學,把有用的東西記錄下來與大家分享。

作者博客：http://www.cnblogs.com/troubleLife/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈