《div+css实现典型的局部布局》由会员分享，可在线阅读，更多相关《div+css实现典型的局部布局（27页珍藏版）》请在金锄头文库上搜索。
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 width:2
3、50px;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; height:32px;text-align
4、: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-repeat:no-repeat;background-position
5、: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:hover #ff0; ,li.pic width:28px; ,div#na
6、v 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标签组织结构 建立CSS样式表，逐一添加各类样式 测试样式细节,制作贵美网站疯狂
7、购物版块样式, #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; dd height:40px;text-align:center; ,制作贵美网站疯狂购
8、物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分钟,共性问题集中讲解,常见调试问题及解决办法 代码规范问题,共性问题集中讲解,总结,典型的局部结构包括哪几个？div-ul-li局部结构的注意要点是什么？div-dl-dt-dd局部结构的注意要点是什么？,作业,课后作业 必做 教员备课时在此添加内容选做 教员备课时在此添加内容提交时间：xxx 提交形式：xxx预习作业 背诵英文单词 教员备课时在此添加内容,
