1、本章教大家掌握2種布局方式:
1）頂部導航菜單布局，效果圖：
2）購物版塊布局，效果圖：
2、技術目標:
使用div + ul-li實現(xiàn)導航菜單布局
使用div + dl-dt-dd實現(xiàn)購物版塊布局
3、一般的局部布局無非采用如下的技術:
1）div + ul(ol)-li：用于分類導航或菜單等場合
2）div + dl-dt-dd：用于圖文混編場合
3）table-tr-td：用于圖文布局或顯示數(shù)據的場合
4）form + table-tr-td：用于布局表單的場合
4、div + ul-li 布局方式，一般在如下場合使用：
1）產品的分類導航欄
2）導航菜單
3）實現(xiàn)TAB切換效果
5、制作首頁的導航主菜單：
5.1）布局結構分析，如圖：
結構代碼（完整版）：
Html代碼
<!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">
<divid="logo"></div>
<divid="menu">
<ul>
<li><ahref="#">首頁</a></li>
<li><ahref="#">家用電器</a></li>
<li><ahref="#">手機數(shù)碼</a></li>
<li><ahref="#">日用百貨</a></li>
<li><ahref="#">書籍</a></li>
<li><ahref="#">幫助中心</a></li>
<li><ahref="#">免費開店</a></li>
<li><ahref="#">全球咨詢</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
[html]
<!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="#">手機數(shù)碼</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文件代碼）:
/*注意：案例中使用的圖片在頁面下方提供有下載*/
/*在開發(fā)階段，為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標簽設置為"塊級呈現(xiàn)"，當鼠標移動到
a標簽上時便于呈現(xiàn)出全尺寸的高亮背景圖片
*/
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）布局結構分析，如圖：
結構代碼（完整版）：
Html代碼
<!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><imgsrc="images/1.jpg"/></dt>
<dd>時尚產品1</dd>
</dl>
<dl>
<dt><imgsrc="images/2.jpg"/></dt>
<dd>時尚產品2</dd>
</dl>
<dl>
<dt><imgsrc="images/3.jpg"/></dt>
<dd>時尚產品3</dd>
</dl>
<dl>
<dt><imgsrc="images/4.jpg"/></dt>
<dd>時尚產品4</dd>
</dl>
<dl>
<dt><imgsrc="images/5.jpg"/></dt>
<dd>時尚產品5</dd>
</dl>
<dl>
<dt><imgsrc="images/6.jpg"/></dt>
<dd>時尚產品6</dd>
</dl>
<dl>
<dt><imgsrc="images/7.jpg"/></dt>
<dd>時尚產品7</dd>
</dl>
<dl>
<dt><imgsrc="images/8.jpg"/></dt>
<dd>時尚產品8</dd>
</dl>
<dl>
<dt><imgsrc="images/9.jpg"/></dt>
<dd>時尚產品9</dd>
</dl>
</div>
</body>
</html>
[html]
<!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局部結構用在什么地方？
