- 1、本文档共5页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
div css布局不同于table布局,它主要是按列来计算,而table是嵌套实现。这里列举了最常见的几种布局代码:
单行一列
以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
两行一列
以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
三行一列
以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
单行两列
以下是引用片段:
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}
两行两列
以下是引用片段:
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}
三行两列
以下是引用片段:
#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 410px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
单行三列
绝对定位
以下是引用片段:
#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}
float定位一
xhtml:
以下是引用片段:
div id=warp
div id=column
div id=column1这里是第一列/div
div id=column2这里是第二列/div
div class=clear/div
/div
div id=column3这里是第三列/div
div class=clear/di
您可能关注的文档
- ArcGIS和同类产品对比.docx
- ARCGIS垂直纵投影图制作及储量计算流程.doc
- APP开发工具APICloudStudio使用说明.docx
- ARCGIS教程第六章地图布局和报表.doc
- ArcMap使用48个方法.docx
- Atfzkpu财务科岗位职责和规范.doc
- ASUS多款平板开启或关闭演示版应用程序方式.docx
- AutoCAD2007版本安装和破解.docx
- AutoCAD2010打印和输出详解.doc
- AutoCAD2014正式版安装破解详细步骤.doc
- 2025年申论系统班讲义1.docx
- 2025年申论系统课4.pdf
- 河南省商丘市部分学校2024-2025学年高二下学期期末语文试题(解析版).docx
- 吉林省长春市长春净月高新技术产业开发区2024-2025学年七年级下学期期末语文试题(解析版).docx
- 武大GPS原理及其应用课件第11讲-单点定位和相对定位.ppt
- 武大GPS原理及其应用课件03 GPS定位中的误差源.ppt
- 武理工遥感原理与应用课件第5章 遥感图象目视解释与制图.pdf
- 武理工遥感原理与应用课件第3章 遥感成像原理与图像特性.pdf
- 武理工遥感原理与应用课件第5章 遥感图象目视解释与制图.pptx
- 湖大遥感原理与应用课件03遥感成像原理与遥感图像特征.ppt
文档评论(0)