HTML CSS + DIV实现局部布局

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）布局结构分析，如图：
   
   

    结构代码（完整版）：

Html代码

1. <!DOCTYPE html PUBLIC 
2.      "-//W3C//DTD XHTML 1.0 Transitional//EN"  
3.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> 
4. <html xmlns="http://www.w3.org/1999/xhtml"> 
5. <head> 
6.     <title>首页</title> 
7.     <!-- main.css为外部样式文件名 --> 
8.     <link href="css/main.css"rel="stylesheet"type="text/css"/> 
9. </head> 
10. <body> 
11. <div id="panel">        
12.     <div id="header"> 
13.         <divid="logo"></div> 
14.         <divid="menu"> 
15.             <ul> 
16.                 <li><ahref="#">首页</a></li> 
17.                 <li><ahref="#">家用电器</a></li> 
18.                 <li><ahref="#">手机数码</a></li> 
19.                 <li><ahref="#">日用百货</