蓬莱机场到蓬莱大巴:DIV+CSS最常用的网页布局代码11例
来源:百度文库 编辑:九乡新闻网 时间:2024/05/19 05:26:39
div css布局不同于table布局,它主要是按列来计算,而table是嵌套实现。这里列举了最常见的几种布局代码:
单行一列
CSS Code复制内容到剪贴板- body { margin: 0px; padding: 0px; text-align: center; }
- #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
两行一列
CSS Code复制内容到剪贴板- 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;}
三行一列
CSS Code复制内容到剪贴板- 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; }
单行两列
CSS Code复制内容到剪贴板- #bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
- #bodycenter #dv1 {float: left;width: 280px;}
- #bodycenter #dv2 {float: rightright;width: 410px;}
两行两列
CSS Code复制内容到剪贴板- #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: rightright;width: 410px;}
三行两列
CSS Code复制内容到剪贴板- #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: rightright; width: 410px;}
- #footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
单行三列使用绝对定位
CSS Code复制内容到剪贴板- #left { position: absolute; top: 0px; left: 0px; width: 120px; }
- #middle {margin: 20px 190px 20px 190px; }
- #right {position: absolute;top: 0px; rightright: 0px; width: 120px;}
float定位一
XML/HTML Code复制内容到剪贴板- 这里是第一列这里是第二列这里是第三列
CSS:
CSS Code复制内容到剪贴板- #wrap{ width:100%; height:auto;}
- #column{ float:left; width:60%;}
- #column1{ float:left; width:30%;}
- #column2{ float:rightright; width:30%;}
- #column3{ float:rightright; width:40%;}
- .clear{ clear:both;}
float定位二:
XML/HTML Code复制内容到剪贴板This is the main content.
This is the left sidebar.
This is the right sidebar.
CSS:
CSS Code复制内容到剪贴板- body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
- .column {position: relative;float: left;}
- #center {width: 100%;}
- #left {width: 180px; rightright: 240px;margin-left: -100%;}
- #right {width: 130px;margin-right: -100%;}
两行三列:
- 这里是顶行
- 这里是第一列这里是第二列
css
CSS Code复制内容到剪贴板- #header{width:100%; height:auto;}
- #wrap{ width:100%; height:auto;}
- #column{ float:left; width:60%;}
- #column1{ float:left; width:30%;}
- #column2{ float:rightright; width:30%;}
- #column3{ float:rightright; width:40%;}
- .clear{ clear:both;}
三行三列
XML/HTML Code复制内容到剪贴板- 这里是顶行
- 这里是第一列这里是第二列这里是第三列
- 这里是底部一行
CSS:
CSS Code复制内容到剪贴板- #header{width:100%; height:auto;}
- #wrap{ width:100%; height:auto;}
- #column{ float:left; width:60%;}
- #column1{ float:left; width:30%;}
- #column2{ float:rightright; width:30%;}
- #column3{ float:rightright; width:40%;}
- .clear{ clear:both;}
- #footer{width:100%; height:auto;}
DIV+CSS最常用的网页布局代码11例 DIV+CSS网页布局常用的方法与技巧 基于XHTML的DIV+CSS网页制作布局技术 div css网页标准版式布局—div css模板下载 实践DIV+CSS网页布局入门-设计技巧 CSS DIV布局教程 [组图]div+css进行页面布局时定位的思考 DIV+CSS十个常见的错误 - 网页设计 - 源码之家 - 源码学院 CSS样式+DIV页面布局(水平三列) DIV+CSS 收集最常用的网页中嵌入视频代码大全,各种各样的网页视频播放器代码. DIV CSS布局实例:用css网站布局之十步实录!(目录) - CSS Web Desi... 搞定CSS SPAN和DIV的区别 兼容IE6浏览器常用的十条CSS代码 网页设计常用代码 网页制作常用代码 网页制作常用代码 css网页布局兼容性有哪些要点与诀窍 DIV+CSS编辑器 div css outlookbar 最常用的HTML代码 网页设计中的常用代码 网页制作常用代码1 **网页制作常用代码集