CSS+DIV排版布局
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
6
•
方法一
固定宽度且居中的版式
body, html{ margin:0px; text-align:center; } #container{ position: relative; margin: 0 auto; width:700px; text-align: left; }
7
•
方法二
固定宽度且居中的版式
4
CSS排版观念
•
设计各块的位置
5
CSS排版观念
•
用CSS定位
#content{ #banner{ body { float:left; height:80px; margin:0px; text-align:center; border:1px solid #000000; font-size:13px; padding-right:200px; /* 内容往回挤200px */ text-align:center; font-family:Arial; }} background-color:#a2d9ff; #links{ padding:10px; #container{ float:right; margin-bottom:2px; position:relative; width:200px; } width:100%; border:1px solid #000000; } text-align:center; }
9
块的背景色问题
•
wenku.baidu.com
用背景图片填补空白
#container{ margin:0px; padding:0px; background:url(bg2.jpg) repeat-y;/* 用背景图片填补 #left的空白，又不影响#right */ }
10
总结
本章介绍了CSS排版的观念，讲解了常用的 几种排版方法，着重指出在排版中遇到的 块的背景色问题的解决方法，以及通过总 结目前网页制作中使用最多的表格排版的 优点和缺点分析了div排版与传统的表格方 式排版的区别。
CSS+DIV布局排版
目标
了解CSS排版观念 掌握常用的几种排版方法 理解div排版与传统的表格排版的区别
2
概述
• • •
•
•
CSS排版观念 固定宽度且居中的版式 左中右排版 块的背景色问题 div排版与传统的表格方式排版的分析
3
CSS排版观念
•
将页面用div分块
#content .blog
#links
.calendarhead .date <div id="container"> <div id="banner">banner</div>.calendartable .blogcontent <div id="content"> <div ...... class="blog"> .side <div class="date">date</div> <div class="blogcontent"> ...... </div> .page .syndicate </div> <div class="others">others</div> .update </div> .friends
body, html{ margin:0px; } #container{ position: relative; left:50% width:700px; margin-left:-350px; }
8
左中右排版
•
HTML布局
<body> <div id="left“><p>left</p></div> <div id="middle“></div> <div id="right“><p>right</p></div> </body>
11