樣式表
六、列表方塊
1.有序列表變無序列表
<ol>
<li>張店</li>
<li>桓台</li>
<li>淄川</li>
</ol>
網頁上顯示為1. 張店 2. 桓台 3. 淄川 （豎向顯示）
<ol style="list-style:none">
<li>張店</li>
<li>桓台</li>
<li>淄川</li>
</ol>
網頁上顯示 張店 桓台 淄川
list-style:none將列表前面的序號去掉，成為了無序列表。
<ol style="list-style:inside"> 列表前面的序號和列表內容在一起
<ol style="list-style:outside">列表前面的序號和列表內容分開
<ol style="list-style-image:url(001.png)">將列表前面的序號變成圖片
七、格式和布局
1.位置 position
①fixed固定 相對於瀏覽器邊框位置固定，上下拉滾動條不隨着滾動條的上下拖拉而變化。
<div style="width:200px; height:200px; position:fixed; top:"></div>
調整位置：top：距離上邊距的位置 right：距離右邊距的位置 bottom：距離下邊距的位置 left：距離左邊距的位置
<div style="width:200px; height:200px; background-color:#03F; position:fixed; top:20px; left:20px"></div>
②absolute 相對於父級元素（瀏覽器、絕對定位的上級，此處的上級就是<body>）。
<div style="width:200px; height:200px; background-color:#03F; position:absolute; top:100px; left:50px"></div> <div style="width:500px; height:500px; position:absolute; top:100px; left:100px; background-color:#FCC">
<div style="width:200px; height:200px; background-color:#03F; position:absolute; top:100px; left:50px"></div>
</div>
上面的代碼里面的position的位置是相對於外面那一級的position的位置決定的。但是外面的那一級中也要有position並且值是absolute才可以，否則上一級對里面那一級就失去了約束作用。
③relative 相對位置 相對於原來自身的位置移動
網頁上的元素都存在默認的邊界（margin或者padding），在網頁上布局開始時要把元素自身帶的margin或者padding去掉，防止因為元素自身的邊界不同而造成布局時各元素發生錯亂，去掉方式為。
<title>無標題文檔</title>
<style type="text/css">
*{ margin:0px; padding:0px}
</style>
頁面布局時一定要加上 *{ margin:0px; padding:0px} 如果 四周的 margin和padding如果一樣的話寫上一個值就可以。
實際上去掉邊界時會寫成 *{ margin:0px auto; padding:0px}，加上auto里面的元素會水平居中
2.流 float
right 向右流
left 向左流
<style type="text/css">
*{ margin:0px auto; padding:0px}
.text{ width:200px; height:200px; background-color:#63C; margin:0px 0px 0px 10px; float:left}
</style>
</head>
<body>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
使用 流 時，里面的元素會默認的浮上一層，流結束后，要把流清掉，清掉方式是在流結束的位置加上<div style="clear:both"></div>。使用margin時，一般要配合着流使用，自己使用沒有效果。
以下代碼是一個簡單的導航欄
<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微軟雅黑}
#menu{ width:800px; height:45px; background-color:#CCC; margin-top:20px}
.text{ width:100px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}
.text:hover{ background-color:#63C; color:#FFF; cursor:pointer}
</style>
</head>
<body>
<div id="menu">
<div class="text">首頁</div>
<div class="text">產品中心</div>
<div class="text">產品介紹</div>
<div class="text">圖集</div>
<div class="text">聯系我們</div>
<div class="text">友情鏈接</div>
<div style="clear:both"></div>
</div>
：hover表示鼠標放上來，當鼠標放到這些元素上來以后
.text:hover{ background-color:#63C; color:#FFF; cursor:pointer} 表示把鼠標變成手。background-color:#63C表示鼠標放上后變成的背景色。 color:#FFF表示鼠標放上后文字變成什么顏色。
導航欄除了用<div>制作以外，還可以用序列制作。
<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微軟雅黑}
#menu1{width:800px; height:45px; background-color:#CCC; margin-top:20px; list-style:none}
.text{ width:100px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}
.text:hover{ background-color:#63C; color:#FFF; cursor:pointer}
</style>
<ul id="menu1">
<li class="text">首頁</li>
<li class="text">產品中心</li>
<li class="text">產品介紹</li>
<li class="text">圖集</li>
<li class="text">聯系我們</li>
<li class="text">聯系我們</li>
</ul>
用列表制作的導航欄和用<div>制作的是一樣的效果。
<div style="width:300px; height:300px; background-color:#0F0; z-index:3; position:relative"></div>
<div style="width:300px; height:300px; background-color:#F00; position:relative; top:-100px; left:-50px; z-index:6"></div>
z-index表示分層，z-index的值越大表示圖層越靠上。
八、其它樣式
1.display 顯示block和隱藏none ，不占位置，隱藏后下面的代碼內容會覆蓋原來的區域。
2.visibility 顯示visible和隱藏hidden ，占位置，隱藏后原來的區域不會被覆蓋。
3.overflow 超出范圍hidden隱藏，比如兩個套着的<div>，如果里面的區域比外面的區域面積大，則外面的<div>區域多出的里面的<div>區域隱藏。
4.opacity 透明 opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50) 半透明是0.5
5.border-radius:5px; 圓角 5px是圓角的半徑
6.box-shadow陰影 box-shadow:0 0 5px white; 5px是距離上一個<div>的距離，距離越遠，陰影面積就越大。white是陰影的顏色。