發布時間：2019-12-30 所屬分類：網站建設瀏覽：1296

網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二

網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)三

縱向導航菜單及二級彈出菜單

■縱向列表

■標簽的默認樣式

■css派生選擇器

■css選擇器的分組

■縱向二級列表

■相對定位和絕對定位

一、縱向列表

<ul>

<li>網頁版式布局</li>

<li>div+css教程</li>

<li>div+css實例</li>

</ul>

</div>

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

<head>

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

a { color: #000; text-decoration: none; }

a:hover { color: #F00; }

#menu { width: 100px; border: 1px solid #CCC; }

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }

</style>

</head>

<body>

<ul>

<li><a href="">網頁版式布局</a></li>

<li><a href="">div+css教程</a></li>

<li><a href="">div+css實例</a></li>

</ul>

</div>

</body>

</html>

二、標簽的默認樣式

body默認外邊距，另外本例中ul前的圓點及左側的內邊距，另h1-h6字體大小各不相同，em默認為斜體，strong表示粗體。正因為有這些默認樣式，一個設計合理的頁面，即使沒有加載樣式，也能讓用戶很容易閱讀

body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }

ul { list-style: none; }

img { border-style: none; }

三、css派生選擇器

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }

#menu ul和#menu ul li即為派生選擇器

四、css選擇器的分組

可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的，p段落、div分區、span都是20像素字體。

h1,h2,h3,h4,h5,h6 { color: green; }

p,div,span{ font-size:20px; }

五、縱向二級列表

六、相對定位和絕對定位

■定位標簽：position

■包含屬性：relative（相對） absolute（絕對）

1.position:relative; 如果對一個元素進行相對定位，首先它將出現在它所在的位置上。然后通過設置垂直或水平位置，讓這個元素"相對于"它的原始起點進行移動。（再一點，相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其他框）

2.position:absolute; 表示絕對定位，位置將依據瀏覽器左上角開始計算。絕對定位使元素脫離文檔流，因此不占據空間。普通文檔流中元素的布局就像絕對定位的元素不存在時一樣。（因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素并可以通過z-index來控制它層級次序。z-index的值越高，它顯示的越在上層。）

3.父容器使用相對定位，子元素使用絕對定位后，這樣子元素的位置不再相對于瀏覽器左上角，而是相對于父容器左上角

4.相對定位和絕對定位需要配合top、right、bottom、left使用來定位具體位置，這四個屬性只有在該元素使用定位后才生效，其它情況下無效。另外這四個屬性同時只能使用相鄰的兩個，不能即使用上又使用下，或即使用左，又使用右

超鏈接偽類

■鏈接的四種樣式

■將鏈接轉換為塊狀

■用css制作按鈕

■首字下沉

一、超鏈接的四種樣式

a:link {color: #FF0000} /* 未訪問的鏈接 */

a:visited {color: #00FF00} /* 已訪問的鏈接 */

a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */

a:active {color: #0000FF} /* 選定的鏈接 */

二、將鏈接轉換為塊級元素

a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }

三、用css制作按鈕