CSS常用网站布局实例


Posted in Javascript onApril 03, 2008

单行一列
以下是引用片段:
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>  
</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;} 

Javascript 相关文章推荐
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 #Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 #Javascript
JavaScript的面向对象方法以及差别
Mar 31 #Javascript
二行代码解决全部网页木马
Mar 28 #Javascript
通过 Dom 方法提高 innerHTML 性能
Mar 26 #Javascript
js用图作提交按钮或超连接
Mar 26 #Javascript
利用js对象弹出一个层
Mar 26 #Javascript
You might like
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
中学教师管理制度
2014/01/14 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
python中取整数的几种方法
2021/11/07 Python
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript