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 相关文章推荐
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 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删除目录及目录下所有文件的方法详解
2013/06/06 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
python分数表示方式和写法
2019/06/26 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
pygame实现五子棋游戏
2019/10/29 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
服装设计专业自荐书范文
2013/12/30 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
2014年教务工作总结
2014/12/03 职场文书
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏