div+cs布局网页技巧.pptVIP

DIV＋CSS实现整体布局;回顾与作业点评;预习检查;本章任务;本章目标;什么是W3C标准;XHTML负责内容组织 div span p h1，h2，h3，h4，h5，h6 ol，ul dl-dt-dd ;CSS负责页面样式 字体大小 字体颜色 背景 显示位置 ...;W3C提倡的Web结构4-3;W3C提倡的Web结构4-4;div class=view pimg src=photo.jpg alt=Photo //p pinput type=text name=title value=我的照片 readonly=readonly //p /div;淘汰的标签 img /标签的alt属性 样式和内容分离 表单的name和id 使用DIV+CSS布局 页面的兼容性;小结;为什么需要盒子模型;盒子属性： margin（外边距/边界） border（边框） padding（内边距/填充 ）;盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性 ;用户登录页面;可统一设置或四边分开设置 margin属性 margin margin-top margin-right margin-bottom margin-left;border属性 border-color border-width border-style;padding属性 padding padding-top padding-right padding-bottom padding-left ;如何利用盒子模型实现如下首页的布局？;#container { width:980px; margin:0px auto; } #header { width:100%; height:150px; border:1px #F00 solid; } #main { width:100%; height:400px; border:1px #F00 solid; } #footer { width:100%; height:100px; border:1px #F00 solid; };div id=container div id=header顶部（header）/div div id=main div class=cat商品分类(cat)/div div class=content内容(content)/div div class=sidebar右侧(sidebar)/div /div div id=footer底部（footer）/div /div;;;style type=text/css #first, #second, #third{ width:100px; height:50px; border:1px #333 solid; margin:5px; } /style ...... div id=first第1块div/div div id=second第2块div/div div id=third第3块div/div;style type=text/css #first,#second,#third{ float:left; width:100px; height:50px; border:1px #333 solid; margin:5px; } /style ...... div id=first第1块div/div div id=second第2块div/div div id=third第3块div/div;style type=text/css #first,#second,#third{ float:right; width:100px; height:50px; border:1px #333 solid; margin:5px; } /style ...... div id=first第1块div/div div id=second第2块div/div div id=third第3块div/div;style type=text/css #first,#second,#third{ float:right; width:100px; height:50px; border:1px #333 solid; margin:5px; } #first { height:80px; } /s