DIV+CSS实现典型的局部布局

html布局

DIV+CSS实现典型的局部布局 DIV+CSS实现典型的局部布局

html布局

回顾与作业点评XHTML使用的基本规范是什么？ 使用的基本规范是什么？ 使用的基本规范是什么 各包含哪些属性？ 方框属性有哪些 ？各包含哪些属性？ float属性的应用场合？有哪些取值？ 属性的应用场合？有哪些取值？ 属性的应用场合 clear属性的应用场合？有哪些取值？ 属性的应用场合？有哪些取值？ 属性的应用场合

html布局

预习检查有哪些典型的局部布局结构？ 有哪些典型的局部布局结构？ 各种局部布局适用的场合分别是什么？ 各种局部布局适用的场合分别是什么？

html布局

本章任务制作贵美首页

html布局

本章目标使用p-ul-li实现局部布局 实现局部布局 使用 使用p-dl-dt/dd实现局部布局 使用 实现局部布局

html布局

典型的局部布局结构HTML标签中，学过哪些典型的块状布局结构？ 标签中，学过哪些典型的块状布局结构？ 标签中 p-ul(ol)-li:常用于分类导航或菜单等场合 ： p-dl-dt-dd:常用于图文混编场合 ： table-tr-td:常用于图文布局或显示数据的场合 ： form-table-tr-td:常用于布局表单的场合 ：

html布局

p-ul-li局部布局应用场合产品的分类导航 菜单导航 实现TAB切换 实现 切换

html布局

制作贵美首页的主导航菜单6-1制作贵美首页中主导航菜单

实现思路布局结构分析 CSS样式分析 样式分析

html布局

制作贵美首页的主导航菜单6-2实现步骤先建立HTML标签组织结构 标签组织结构 先建立 建立CSS样式表，逐一添加各类样式 样式表， 建立 样式表 测试样式细节

演示示例1: 演示示例 ：制作贵美首页的主导航菜单

html布局

制作贵美首页的主导航菜单6-3顶部容器样式<style type="text/css"> #header { background-image:url(images/h_bg.jpg); //设置背景图片 设置背景图片 background-repeat:no-repeat; width:100%; height:130px; LOGO样式 样式 } #logo { width:250px; <p id="header"> height:98px; <p id="logo"></p> float:left; <p id="menu"></p> } </p> #menu { clear:both; MENU样式 样式 height:32px; } </style>

顶部局部布局

html布局

制作贵美首页的主导航菜单6-4<p id="menu"> <ul> <li><a href="#">首&nbsp;&nbsp;&nbsp;页</a></li> 首 页 <li><a href="#">家用电器 家用电器</a></li> 家用电器 <li><a href="#">手机数码 手机数码</a></li> 手机数码 <li><a href="#">日用百货 日用百货</a></li> 日用百货 <li><a href="#">书&nbsp;&nbsp;&nbsp;籍</a></li> 书 籍 <li><a href="#">帮助中心 帮助中心</a></li> 帮助中心 <li><a href="#">免费开店 免费开店</a></li> 免费开店 <li><a href="#">全球咨询 全球咨询</a></li> 全球咨询 </ul> </p>

菜单项

html布局

制作贵美首页的主导航菜单6-5ul,li { /*ul和li无外边距及内边距 和 无外边距及内边距*/ 无外边距及内边距 padding:0px; margin:0px; } <p id="menu"> #men

u li { <ul> float:left; /*向左浮动 向左浮动*/ 向左浮动 list-style-type:none; /*去掉前面的小圆点 去掉前面的小圆点*/ 去掉前面的小圆点 <li><a href="#">...</a></li> width:84px; <li><a href="#">...</a></li> height:32px; </ul> text-align:center; /*居中显示 居中显示*/ 居中显示 </p> line-height:32px; font-weight:bold; font-size:13px; }

html布局

制作贵美首页的主导航菜单6-6#menu a, #menu a:hover { color:#333333; font-size:13px; text-decoration:none; <p id="menu"> height:32px; <ul> width:84px; display: block; <li><a href="#">...</a></li> } <li><a href="#">...</a></li> #menu a:hover { background-image:url(images/nav_bg.png); </ul> </p> background-repeat:no-repeat; background-position:center center; }

html布局

练习——制作贵美首页顶部导航部分需求说明： 需求说明：使用ul-li结构实现贵美网站的顶部导航菜单 结构实现贵美网站的顶部导航菜单 使用

完成时间： 分钟 完成时间：25分钟

html布局

共性问题集中讲解

共性问题集中讲解

常见调试问题及解决办法 代码规范问题

html布局

小结选择器常用符号空格 , # . : li. p# #. #.,p ul { list-style:none; } p, ul { text-align:center; } #nav { width:100%; }

.pic { background:url(bg.gif); }a:hover { #ff0; }

选择器的组合li.pic { width:28px; } p#nav { text-align:center; } #nav .pic { border:1px; } #nav .pic, #nav .text { height:26px; }