1.文本屬性
文字font:
font-size:字體大小
font-family:字體
font-weight:字體粗細
font-style:字體樣式(如:傾斜等)
color:字體顏色
line-height:居中
段落:
text-decoration:下劃線
text-indent:設置文本縮進
text-align:設置對象內容對齊方式
2.邊框屬性
border-width:邊框寬度
border-style:邊框樣式
border-color:邊框顏色
nborder-collapse:表格邊框合併爲單邊框
3.控制背景
background-image:設置背景圖片
background-color:設置對象的背景顏色
background-position:設置對象的背景圖片位置
background-repeat:設置對象的背景鋪排填充
簡寫:
url() repeat center center (圖片路徑,重複方式,水平位置,垂直位置)
4盒子模型
網頁設計中每個元素都是長方形盒子
margin:邊界(倆相鄰元素直接的距離)
border:表框
padding:當前對象和邊界之間距離,內部距離
folat:浮動,當前隊形浮動後,周圍元素會環繞
clear:清除浮動
5.列表(list-style)
list-style-image:對象列表項標記的圖形
list-style-position:對象如何根據文本排列
list-style-type:隊形列表項實用的預設標記
6.定位(position)
position:static | relative | absolute | fixed
案例效果:
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
ul,ol,li{ list-style:none;}
body{ font-size:16px; font-family:"微軟雅黑", "幼圓", "黑體", "宋體";}
#banner{ margin:0 auto; ; height:56px; }
#top{ ; height:45px; url(images /navbg_03.gif) no-repeat;}
#top li{ ; height:45px; float:left; line-height:45px; text-align:center;}
#top li a{ text-decoration:none; color:#FFF; display:block; margin:0 auto; ; height:56px;}
#top li a:hover{ url(images /mouseover_03.gif) no-repeat; color:#333;}
</style>
</head>
<body>
<div id="banner">
<ul id="top">
<li><a href="#">首頁</li>
<li><a href="#">音頻試聽</li>
<li><a href="#">產品說明</li>
<li><a href="#">產品展示</li>
<li><a href="#">產品直銷</li>
<li><a href="#">聯繫我們</li>
</ul>
</div>
</body>
</html>