<html>
<head> <style> body{text-align:center;} div.qq{width:960px;height:1500px;background:yellow;margin:0 auto;text-align:left;} //定義整個頁面置中 div.llz{width:750px;height:400px;background:black;float:left;} //定義兩列布局，第一列左側浮動 div.lly{width:200px;height:400px;background:black;float:right;} //定義兩列布局，第二列左側浮動 div.slz{width:310px;height:400px;background:gray;float:left;margin-right:15px;margin-top:20px;} //定義三列布局，第一列左側浮動 div.slc{width:310px;height:400px;background:gray;float:left;margin-right:15px;margin-top:20px;} //定義三列布局，第二列在第一列旁 div.sly{width:310px;height:400px;background:gray;float:right;margin-top:20px;} //定義三列布局，第三列右側浮動 div.box{width:200px;height:50px;background:pink;float:left;margin-left:10px;margin-top:10px;} //定義多欄版面配置，全部左側浮動 </style> </head> <body> <div class="qq"> <div class="llz"></div> <div class="lly"></div> <div class="slz"></div>
<div class="slc"></div> <div class="sly"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html>
選取器起名的時候，標記的類名直接使用，標記.類名，如果標記裡嵌套標記，命名選取器 標記1 標記2 . 類名（空格）代表對標記1裡的標記2中的類名給樣式
