转换课程s2y2java方向tp14.pptxVIP

DIV＋CSS实现整体布局;回顾与作业点评;预习检查;本章任务;本章目标;什么是W3C标准;W3C提倡的Web结构4-1;W3C提倡的Web结构4-2;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;Web页面开发注意问题;小结;为什么需要盒子模型;盒子属性： 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; } /style ...... div id=first第1块div/div div id=second第2块div/div div id=third第3块div/div;.cat, .sidebar { float:left