DIV+CSS实现典型的局部布局幻灯片.pptVIP

Chapter 本章任务 制作贵美首页 本章目标 使用div-ul-li实现局部布局 使用div-dl-dt/dd实现局部布局 练习——制作贵美首页顶部导航部分 需求说明： 使用ul-li结构实现贵美网站的顶部导航菜单 共性问题集中讲解 小结 选择器常用符号 空格 , # . : 选择器的组合 li. div# # . # . , 典型的局部布局结构 div-ul(ol)-li：常用于分类导航或菜单等场合 div-dl-dt-dd：常用于图文混编场合 table-tr-td：常用于图文布局或显示数据的场合 form-table-tr-td：常用于布局表单的场合 HTML标签中，学过哪些典型的块状布局结构？ div-ul-li局部布局 应用场合 产品的分类导航 菜单导航 实现TAB切换 制作贵美首页的主导航菜单6-1 实现思路 布局结构分析 CSS样式分析 制作贵美首页中主导航菜单 制作贵美首页的主导航菜单6-2 实现步骤 先建立HTML标签组织结构 建立CSS样式表，逐一添加各类样式 测试样式细节 演示示例1：制作贵美首页的主导航菜单 style type=text/css #header { background-image:url(images/h_bg.jpg); //设置背景图片 background-repeat:no-repeat; width:100%; height:130px; } #logo { width:250px; height:98px; float:left; } #menu { clear:both; height:32px; } /style 制作贵美首页的主导航菜单6-3 div id=header div id=logo/div div id=menu/div /div 顶部局部布局 顶部容器样式 LOGO样式 MENU样式 制作贵美首页的主导航菜单6-4 div id=menu ul lia href=#首nbsp;nbsp;nbsp;页/a/li lia href=#家用电器/a/li lia href=#手机数码/a/li lia href=#日用百货/a/li lia href=#书nbsp;nbsp;nbsp;籍/a/li lia href=#帮助中心/a/li lia href=#免费开店/a/li lia href=#全球咨询/a/li /ul /div 菜单项 制作贵美首页的主导航菜单6-5 ul,li { /*ul和li无外边距及内边距*/ padding:0px; margin:0px; } #menu li { float:left; /*向左浮动*/ list-style-type:none; /*去掉前面的小圆点*/ width:84px; height:32px; text-align:center; /*居中显示*/ line-height:32px; font-weight:bold; font-size:13px; } div id=menu ul lia href=#.../a/li lia href=#.../a/li /ul /div 制作贵美首页的主导航菜单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:center center; } div id=menu ul lia href=#.../a/li lia href=#.../a/li /ul /div 完成时间：25分钟 常见调试问题及解决办法 代码规范问题 共性问题集中讲解 div u