DIV+CSS常用的Html网页布局代码
来源:互联网 发布:android 网络切换监听 编辑:程序博客网 时间:2024/04/29 17:45
单行一列
以下是引用片段:
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"></div> </div>
CSS:
以下是引用片段:
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
float定位二
xhtml:
以下是引用片段:<div id="center" class="column"> <h1>This is the main content.</h1> </div> <div id="left" class="column"> <h2>This is the left sidebar.</h2> </div> <div id="right" class="column"> <h2>This is the right sidebar.</h2> </div>
CSS:
以下是引用片段:
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}
两行三列
xhtml:以下是引用片段:<div id="header">这里是顶行</div> <div id="warp"> <div id="column"> <div id="column1">这里是第一列</div> <div id="column2">这里是第二列</div> <div class="clear"></div> </P> <P></div> <div id="column3">这里是第三列</div> <div class="clear"></div> </div>
CSS:
以下是引用片段:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
三行三列
xhtml:
以下是引用片段:<div id="header">这里是顶行</div> <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"></div> </div> <div id="footer">这里是底部一行</div>
CSS:
以下是引用片段:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
#footer{width:100%; height:auto;}
- DIV+CSS常用的Html网页布局代码
- DIV+CSS常用的Html网页布局代码
- DIV+CSS常用的网页布局代码
- DIV+CSS常用的网页布局代码
- DIV+CSS网页设计常用布局代码
- DIV+CSS网页设计常用布局代码
- [z] DIV+CSS常用的网页布局代码
- CSS+DIV(二) 网页常用的布局
- html+css+div网页布局实例
- DIV+CSS网页布局常用的方法与技巧
- DIV CSS网页布局常用的方法与技巧
- DIV+CSS网页布局常用的方法与技巧
- DIV+CSS网页布局常用的一些基础知识整理
- DIV+CSS网页布局常用的一些基础知识整理
- DIV CSS网页布局常用的方法与技巧
- DIV+CSS网页布局常用的方法与技巧
- 常用网页布局(div+css)之一
- 常用DIV+CSS网页制作布局技术
- 问题:只安装了GNOME, yum install krusader 默认不支持samba/sftp etc, 怎么办
- 我的青春谁做主全集在线观看
- 为什么使用接口编程
- 问题:家里的ADSL用Linux上网,域名解析特别慢.用Windows XP 没有这个问题
- JS判断浏览器类型
- DIV+CSS常用的Html网页布局代码
- [IE编程] 如何获得IE版本号
- 为GridView,DataList,Repeater中显示的字段加入逻辑
- vmeare 双网卡桥接问题处理(bridge)
- Nginx负载均衡搭建胜过Apache十倍?
- js javascript 实现复选框全选功能 删除复选框选中项功能
- Windows mobile模拟器上网的配置步骤
- [建议]给学习计算机的同僚们(初学者,进阶者,包括Linux爱好者)的学习建议
- 在GridView中加入CheckBox实现全选以及提交CheckBox选中的相关内容