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">
- <divid="logo"></div>
- <divid="menu">
- <ul>
- <li><ahref="#">首页</a></li>
- <li><ahref="#">家用电器</a></li>
- <li><ahref="#">手机数码</a></