北大青鸟accp506070课件转换课程s2y2java方向

DIV＋CSS实现典型的局部布局（一）第十五章回顾与作业点评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：常用于布局表单的场合HTML标签中，学过哪些典型的块状布局结构？div-ul-li局部布局应用场合产品的分类导航菜单导航实现TAB切换制作贵美首页的主导航菜单6-1实现思路布局结构分析CSS样式分析制作贵美首页中主导航菜单制作贵美首页的主导航菜单6-2实现步骤先建立HTML标签组织结构建立CSS样式表，逐一添加各类样式测试样式细节演示示例1：制作贵美首页的主导航菜单<styletype="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<divid="header"><divid="logo"></div><divid="menu"></div></div>顶部局部布局顶部容器样式LOGO样式MENU样式制作贵美首页的主导航菜单6-4<divid="menu">

<ul>

<li><ahref="#">首   页</a></li>

<li><ahref="#">家用电器</a></li>

<li><ahref="#">手机数码</a></li>

<li><ahref="#">日用百货</a></li>

<li><ahref="#">书   籍</a></li>

<li><ahref="#">帮助中心</a></li>

<li><ahref="#">免费开店</a></li>

<li><ahref="#">全球咨询</a></li></ul></div>菜单项制作贵美首页的主导航菜单6-5ul,li{/*ul和li无外边距及内边距*/padding:0px;margin:0px;}#menuli{float:left;/*向左浮动*/list-style-type:none;/*去掉前面的小圆点*/width:84px;height:32px;text-align:center;/*居中显示*/line-height:32px;font-weight:bold;font-size:13px;}<divid="menu">

<ul>

<li><ahref="#">...</a></li>

<li><ahref="#">...</a></li>

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

<ul>

<li><ahref="#">...</a></li>

<li><ahref="#">...</a></li>

</ul></div>练习——制作贵美首页顶部导航部分需求说明：使用ul-li结构实现贵美网站的顶部导航菜单完成时间：25分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解小结选择器常用符号空格,#.:选择器的组合li.div##.#.,divul{list-style:none;}div,ul{text-align:center;}#nav{width:100%;}.pic{background:url(bg.gif);}a:hover{#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、<dt>放图片，<dd>放文字，<dl>做结构容器，方便扩展div-dl-dt/dd局部布局2-2应用场合图文混排布局结构：1、图片和文字一行：采用float2、文字居中：调整<dd>宽高与行高制作贵美网站疯狂购物4-1实现步骤先建立HTML标签组织结构建立CSS样式表，逐一添加各类样式测试样式细节制作贵美网站疯狂购物

版块样式<styletype="text/css">#shopping{background-image:url(images/bg.gif);background-repeat:no-repeat;margin:0pxauto;width:504px;height:390px;padding:40px10px10px15px;}</style>制作贵美网站疯狂购物4-2<divid="shopping"></div>整体布局<styletype="text/css">dl{float:left;width:160px;}dt{height:90px;text-align:center;vertical-align:middle;}dd{height:40px;text-align:center;}</style>制作贵美网站疯狂购物4-3<divid="shopping"><dl><dt><img/></dt><dd>....</dd></dl><dl><dt><img/></dt><dd>...</dd></dl></div>文本和图片布局......<styletype="text/css">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;}</style>制作贵美网站疯狂购物4-4<divid="shopping"><dl><dt><img/></dt><dd>....</dd></dl><dl><dt><img/></dt><dd>...</dd></dl></div>演示示例2：制作贵美－疯狂购物练习——制作“重点关注”版块需求说明：使用DIV+CSS进行整体布局使用dl-dt-dd实现局部布局图片放在标签dt中，文本放在标签dd中图片的说明文字实现超链接效果，当鼠标移到超链接上时，文本出现下划线定