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 相关文章推荐
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
jquery cookie的用法总结
Nov 18 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
python实现三次样条插值
2018/12/17 Python
python getopt模块使用实例解析
2019/12/18 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
腾讯公司的一个sql题
2013/01/22 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
档案室主任岗位职责
2014/02/12 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
python的html标准库
2022/04/29 Python