HTML 第六章 CSS + DIV實現整體佈局
HTML 第八章 Table局部佈局與瀏覽器兼容性
HTML 第七章 CSS + DIV實現局部佈局
1、本章教大家掌握2種佈局方式:
1）頂部導航菜單佈局，效果圖：
2）購物版塊佈局，效果圖：
2、技術目標:
使用div + ul-li實現導航菜單佈局
使用div + dl-dt-dd實現購物版塊佈局
3、一般的局部佈局無非採用如下的技術:
1）div + ul(ol)-li：用於分類導航或菜單等場合
2）div + dl-dt-dd：用於圖文混編場合
3）table-tr-td：用於圖文佈局或顯示數據的場合
4）form + table-tr-td：用於佈局表單的場合
4、div + ul-li 佈局方式，一般在如下場合使用：
1）產品的分類導航欄
2）導航菜單
3）實現TAB切換效果
5、製作首頁的導航主菜單：
5.1）佈局結構分析，如圖：
結構代碼
（完整版）：
<!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>
<title>首頁</title>
<!-- main.css爲外部樣式文件名 -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="panel">
<div id="header">
<div id="logo"></div>
<div id="menu">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">家用電器</a></li>
<li><a href="#">手機數碼</a></li>
<li><a href="#">日用百貨</a></li>
<li><a href="#">書籍</a></li>
<li><a href="#">幫助中心</a></li>
<li><a href="#">免費開店</a></li>
<li><a href="#">全球諮詢</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
5.2）CSS樣式分析 （main.css文件代碼）:
/*注意：案例中使用的圖片在頁面下方提供有下載*/
/*在開發階段，爲div加入邊框，便於調整和判斷div的位置*/
div{
border: 1px solid blue;
}
body{
margin: 0px;
padding: 0px;
}
/*主面板div樣式*/
#panel{
width: 980px;
margin: 0px auto;/*div居中顯示*/
}
/*頂部div樣式*/
#header{
/*設置div的背景圖片*/
background-image: url(images/h_bg.jpg);
height: 132px;
}
/*網站logo DIV樣式*/
#logo{
width: 290px;
height: 98px;
}
/*導航主菜單DIV樣式*/
#menu{
height: 32px;
}
/*無序列表與列表項消除間距*/
ul, li{
margin: 0px;
padding: 0px;
}
/*列表項樣式*/
#menu li{
float: left; /*所有列表項水平排列*/
width: 84px;
height: 32px;
text-align: center;
list-style:none; /*去掉列表項的樣式(小圓點)*/
line-height: 32px;/*行高*/
font-weight: bold;/*字體加粗*/
font-size: 13px;
}
/*超鏈接樣式*/
#menu a, #menu a:hover{
color: #333333; /*深灰色*/
text-decoration: none;/*去下劃線*/
height: 32px;
width: 84px;
/*
將a標籤設置爲"塊級呈現"，當鼠標移動到
a標籤上時便於呈現出全尺寸的高亮背景圖片
*/
display: block;
}
/*當鼠標移動到a標籤上時的樣式*/
#menu a:hover{
background-image: url(images/nav_bg.png);
background-repeat: no-repeat;/*背景圖片不平鋪*/
background-position: center center;/*背景圖片水平、垂直居中*/
}
6、各種選擇器
的使用方式、常用符號如下：
符號 示例代碼 說明
===========================================
空格
div ul { list-style:none; } 選擇div標籤內的ul標籤
,
div, ul { text-align:center; } 選擇div標籤和ul標籤
#
#tagId { color:red; } 選擇id屬性值爲tagId的標籤
.
.tagbd{border:1px;} 選擇class屬性值爲menuBg的標籤
:
a:hover { #ff0; } 僞類，選擇鼠標移動到上方的a標籤
選擇器的組合
| 組合 | 示例代碼 |
說明 |
| li. |
li .tagClass { width:28px; } |
選擇li標籤內class屬性值爲tagClass的標籤
|
| div# |
div #tagId{ text-align:center;} |
選擇div標籤內id屬性值爲tagId的標籤 |
| # . |
#tagId .tagbd { border:1px;} |
選擇id屬性值爲tagId的標籤內， class屬性爲tagbd的標籤 |
| # . , |
#tid1 .tc1, #tid2 .tc2 { height:26px; } |
選擇id屬性值爲tid1的標籤內， class屬性值爲tc1的標籤，以及id屬性 值爲tid2的標籤內，class屬性值爲tc2的標籤 |
7、div + dl-dt-dd局部佈局，一般在如下場合使用：
圖文混排
8、製作購物版塊：
8.1）佈局結構分析，如圖：
結構代碼
（完整版）：
<!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>
<title>購物版塊演示</title>
<!-- 導入外部樣式style.css-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="shopping">
<dl>
<dt><img src="images/1.jpg" /></dt>
<dd>時尚產品1</dd>
</dl>
<dl>
<dt><img src="images/2.jpg" /></dt>
<dd>時尚產品2</dd>
</dl>
<dl>
<dt><img src="images/3.jpg" /></dt>
<dd>時尚產品3</dd>
</dl>
<dl>
<dt><img src="images/4.jpg" /></dt>
<dd>時尚產品4</dd>
</dl>
<dl>
<dt><img src="images/5.jpg" /></dt>
<dd>時尚產品5</dd>
</dl>
<dl>
<dt><img src="images/6.jpg" /></dt>
<dd>時尚產品6</dd>
</dl>
<dl>
<dt><img src="images/7.jpg" /></dt>
<dd>時尚產品7</dd>
</dl>
<dl>
<dt><img src="images/8.jpg" /></dt>
<dd>時尚產品8</dd>
</dl>
<dl>
<dt><img src="images/9.jpg" /></dt>
<dd>時尚產品9</dd>
</dl>
</div>
</body>
</html>
8.2）CSS樣式分析
（style.css文件代碼）：
/*注意：案例中使用的圖片在頁面下方提供有下載*/
/*購物版塊div樣式*/
#shopping{
width: 504px;
height: 390px;
margin: 0px auto;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
padding: 40px 10px 10px 15px;
overflow: hidden;/*div內容超出部分隱藏*/
}
/*消除dl dt dd之間的間距*/
dl, dt, dd{
margin: 0px;
padding: 0px;
}
/*dl樣式*/
dl{
float: left;/*將所有dl並排顯示*/
width: 160px;
}
/*dt樣式(商品的圖片放在dt內)*/
dt{
height: 95px;
text-align: center;
/*內容垂直居中，只對具有valign屬性的標籤有效*/
vertical-align: middle;
}
/*dd樣式(商品的文字放在dd內)*/
dd{
height:40px;
text-align:center;
}
9、總結：
典型的局部結構包括哪幾個？
div + ul-li局部結構用在什麼地方？
div + dl-dt-dd局部結構用在什麼地方？
10、請下載
相關圖片素材用於編碼
練習
HTML 第六章 CSS + DIV實現整體佈局
HTML 第八章 Table局部佈局與瀏覽器兼容性