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

1、DIVCSS实现典型的局部布局,回顾与作业点评,XHTML使用的基本规范是什么？ 方框属性有哪些 ？各包含哪些属性？ float属性的应用场合？有哪些取值？ clear属性的应用场合？有哪些取值？,预习检查,有哪些典型的局部布局结构？ 各种局部布局适用的场合分别是什么？,本章任务,制作贵美首页,本章目标,使用div-ul-li实现局部布局 使用div-dl-dt/dd实现局部布局,典型的局部布局结构,div-ul(ol)-li：常用于分类导航或菜单等场合 div-dl-dt-dd：常用于图文混编场合 table-tr-td：常用于图文布局或显示数据的场合 form-table-tr-td：常用

2、于布局表单的场合,HTML标签中，学过哪些典型的块状布局结构？,div-ul-li局部布局,应用场合 产品的分类导航 菜单导航 实现TAB切换,制作贵美首页的主导航菜单6-1,实现思路 布局结构分析 CSS样式分析,制作贵美首页中主导航菜单,制作贵美首页的主导航菜单6-2,实现步骤 先建立HTML标签组织结构 建立CSS样式表，逐一添加各类样式 测试样式细节, #header background-image:url(images/h_bg.jpg); /设置背景图片 background-repeat:no-repeat; width:100%; height:130px; #logo wi

3、dth:250px; height:98px; float:left; #menu clear:both; height:32px; ,制作贵美首页的主导航菜单6-3, ,顶部局部布局,顶部容器样式,LOGO样式,MENU样式,制作贵美首页的主导航菜单6-4, 首籍 帮助中心 免费开店 全球咨询 ,菜单项,制作贵美首页的主导航菜单6-5,ul,li /*ul和li无外边距及内边距*/ padding:0px; margin:0px; #menu li float:left; /*向左浮动*/ list-style-type:none; /*去掉前面的小圆点*/ width:84px; heig

4、ht:32px; text-align:center; /*居中显示*/ line-height:32px; font-weight:bold; font-size:13px; , . . ,制作贵美首页的主导航菜单6-6,#menu a, #menu a:hover color:#333333; font-size:13px; text-decoration:none; height:32px; width:84px; display: block; #menu a:hover background-image:url(images/nav_bg.png); background-repea

5、t:no-repeat; background-position:center center; , . . ,练习制作贵美首页顶部导航部分,需求说明： 使用ul-li结构实现贵美网站的顶部导航菜单,完成时间：25分钟,共性问题集中讲解,常见调试问题及解决办法 代码规范问题,共性问题集中讲解,小结,选择器常用符号 空格 , # . : 选择器的组合 li. div# # . # . ,div ul list-style:none; ,div, ul text-align:center; ,#nav width:100%; ,.pic background:url(bg.gif); ,a:hove

6、r #ff0; ,li.pic width:28px; ,div#nav text-align:center; ,#nav .pic border:1px; ,#nav .pic, #nav .text height:26px; ,div-dl-dt/dd局部布局2-1,应用场合 图文混排,布局结构： 1、图文混编结构，宜用div-dl-dt-dd结构。 2、放图片，放文字，做结构容器，方便扩展,div-dl-dt/dd局部布局2-2,应用场合 图文混排,布局结构： 1、图片和文字一行：采用float 2、文字居中：调整宽高与行高,制作贵美网站疯狂购物4-1,实现步骤 先建立HTML标签组织结

7、构 建立CSS样式表，逐一添加各类样式 测试样式细节,制作贵美网站疯狂购物 版块样式, #shopping background-image:url(images/bg.gif); background-repeat:no-repeat; margin:0px auto; width:504px; height:390px; padding:40px 10px 10px 15px; ,制作贵美网站疯狂购物4-2, ,整体布局, dl float:left; width:160px; dt height:90px; text-align:center; vertical-align:middle

8、; dd height:40px; text-align:center; ,制作贵美网站疯狂购物4-3, . . ,文本和图片布局,., dl,dt,dd margin:0px; padding:0px; dl float:left; width:160px; dt height:90px; text-align:center; vertical-align:middle; dd height:40px; text-align:center; ,制作贵美网站疯狂购物4-4, . . ,练习制作“重点关注”版块,需求说明： 使用DIV+CSS进行整体布局 使用dl-dt-dd实现局部布局 图片放在标签dt中，文本放 在标签dd中 图片的说明文字实现超链接 效果，当鼠标移到超链接上 时，文本出现下划线 定价和当当价放在标签dd中,完成时间：20分钟,共性问题集中讲解,常见调试问题及解决办法 代码规范问题,共性问题集中讲解,总结,典型的局部结构包括哪