div css布局网页技巧.ppt

DIV＋CSS实现整体布局回顾与作业点评预习检查本章任务本章目标什么是W3C标准XHTML负责内容组织
div
span
p
h1，h2，h3，h4，h5，h6
ol，ul
dl-dt-ddCSS负责页面样式
字体大小
字体颜色
背景
显示位置
...W3C提倡的Web结构4-3W3C提倡的Web结构4-4<divclass="view">
<p><imgsrc="photo.jpg"alt="Photo"/></p>
<p><inputtype="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-leftborder属性
border-color
border-width
border-stylepadding属性
padding
padding-top
padding-right
padding-bottom
padding-left

如何利用盒子模型实现如下首页的布局？#container{width:980px;margin:0pxauto;}
#header{
width:100%;
height:150px;
border:1px#F00solid;
}
#main{
width:100%;
height:400px;
border:1px#F00solid;
}
#footer{
width:100%;
height:100px;
border:1px#F00solid;
}<divid="container">
<divid="header">顶部（header）</div>
<divid="main">
<divclass="cat">商品分类(cat)</div>
<divclass="content">内容(content)</div>
<divclass="sidebar">右侧(sidebar)</div>
</div>
<divid="footer">底部（footer）</div>
</div><styletype="text/css">
#first,#second,#third{
width:100px;
height:50px;
border:1px#333solid;
margin:5px;
}
</style>
......
<divid="first">第1块div</div>
<divid="second">第2块div</div>
<divid="third">第3块div</div><styletype="text/css">
#first,#second,#third{
float:left;
width:100px;
height:50px;
border:1px#333solid;
margin:5px;
}
</style>
......
<divid="first">第1块div</div>
<divid="second">第2块div</div>
<divid="third">第3块div</div><styletype="text/css">
#first,#second,#third{
float:right;
width:100px;
height:50px;
border:1px#333solid;
margin:5px;
}
</style>
......
<divid="first">第1块div</div>
<divid="second">第2块div</div>
<divid="third">第3块div</div><styletype="text/css">
#first,#second,#third{
float:right;
width:100px;
height:50px;
border:1px#333solid;
margin:5px;
}
#first{height:80px;}
</style>
......
<divid="first">第1块div</div>
<divid="second">第2块div</div>
<divid="third">第3块div</div>.cat,.sidebar{
float:lef