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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
Vue中keep-alive的两种应用方式
Jul 15 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 curl模拟浏览器抓取网站信息
2013/10/28 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
jQuery Clone Bug解决代码
2010/12/22 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
JsRender实用入门教程
2014/10/31 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
python之wxPython应用实例
2014/09/28 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
单利模式及python实现方式详解
2018/03/20 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
Python class的继承方法代码实例
2020/02/14 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
护士个人简历自荐信
2013/10/18 职场文书
个人评价范文分享
2014/01/11 职场文书
优秀学生事迹材料
2014/02/08 职场文书
元旦促销方案
2014/03/15 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
解除劳动合同协议书
2014/04/14 职场文书
布达拉宫的导游词
2015/02/02 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书