常用的页面的布局方式一般是固定页面的宽度居中显示，高度自适应，下面的代码就是一个居中显示的例子。
固定宽度居中显示 1 通过 设置margin : 0 auto ；width:998px； 还一种方式是 position:absolute;left:50%;
margin-left: -494px; 这里设置的宽度应该是你页面设置的宽度的一半，这样也可以实现居中显示的效果。
下面是一个盒子模型的布局的部分代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html{
margin : 0px;
padding: 0px;
}
ul{
list-style : none;
}
p {
font: 9pt/17pt georgia;
margin-top: 0px;
text-align: justify;
}
h3 {
font: italic normal 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #7D775C;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #B7A5DF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}
/*setting the whole page style*/
body{
color: #555753;
/*background: #fff url(zen-bg.jpg) no-repeat top left; */
/*background: #fff url(blossoms.jpg) no-repeat right bottom; */
margin: 0px;
padding: 0px;
width:988px;
min-height: 100%;
}
/*dispaly center 988px*/
#container {
/*background: url(zen-bg.jpg) no-repeat left top; */
background: #fff;
padding: 0px 2px 0px 2px;
margin: 0px auto;
position: absolute;
top: 0px;
left:50%;
margin-left:-494px; /*让页面居中显示，兼容IE,FF 它的宽度是width/2的值*/
width:984px;
border:1px solid #dddfff;
min-height: 700px;
}
#logo{
margin-bottom: 2px;
border:1px solid #dddfff;
height:50px;
width:100%;
}
#banner{
margin-bottom: 2px;
border:1px solid #dddfff;
height:50px;
width:100%;
}
#navigate{
clear:both;
margin: 2px 2px 2px 0px;
width: 160px;
float: left;
border:1px solid #dddfff;
height:50px;
width:100%;
}
#linkList ul {
background: transparent url(cr1.gif) repeat top center;
margin: 0px;
margin-right:150px;
padding: 10px ;
}
#linkList li {
line-height: 2.5ex;
display: inline;
padding-top: 5px;
margin-bottom: 5px;
padding:4px 4px;
list-style-type: none;
}
#linkList li a:link {
color: #988F5E;
}
#linkList li a:visited {
color: #B3AE94;
}
#sidebar{
margin-left: 600px;
position: absolute;
top: 0px;
right: 0px;
border:1px solid #dddfff;
height:400px;
width:150px;
}
#content{
clear:both;
margin: 20px 20px 20px 0px;
width: 160px;
float: left;
border:1px solid #dddfff;
height:600px;
width:100%;
}
#footer{
text-align: center;
border:1px solid #dddfff;
width:100%;
clear:both;
}
#footer a:link, #footer a:visited {
margin-right: 4px;
}
</style>
<link rel="Shortcut Icon" type="image/x-icon" href="http://www.csszengarden.com/favicon.ico" />
<title>css zender garden study</title>
</head>
<body>
<div id="container">
<div id="logo">
logo
</div>
<div id="banner">
banner
</div>
<div id="navigate">
<div id="linkList">
<ul>
<li><a href="#">index</a></li>
<li><a href="#">document</a></li>
<li><a href="#">download</a></li>
<li><a href="#">news</a></li>
<li><a href="#">suggestion</a></li>
<li><a href="#">about us</a></li>
</ul>
</div>
</div>
<div id="sidebar">
sidebar
</div>
<div id="content">
content
</div>
<div id="footer">
<a href="#" title="Check the validity of this site’s XHTML">xhtml</a>
<a href="#" title="Check the validity of this site’s XHTML">css</a>
<a href="#" title="Check the validity of this site’s XHTML">html5</a>
<a href="#" title="Check the validity of this site’s XHTML">JavaScript</a>
</div>
</div>
</body>
</html>
分享到：
相关推荐
定位模式2.1、静态定位 static2.2、相对定位 relative2.3、绝对定位 absolute2.4、绝对定位垂直水平居中2.5、固定定位 fixed2.6、重叠七、常见布局1. 版心2. 两列左窄右宽型3. 通栏平均分布型持续更新… 该篇讲的是...
因为 CSS 本身并没有提供相应的 API 支持（确切来说是提供不全）。今天重新整理一下思路，... CSS是这样写的: */ .selector { position:absolute;top:50%;。 margin-top:-元素自身高度的一半; } 二、使用 <table> <
一、让图片的宽度或者高度等于容器的宽度或高度，多余的裁掉，然后让图片居中： <style type="text/css"> div{ width: 200px; height: 200px; overflow: hidden; border: 2px solid red; position: ...
垂直水平居中方案一：知道宽度的情况下 absolute+margin负值 .parent { width:400px; height:400px; background: red; position: relative; } .child { position: absolute; left:50%; top:50%; background...
内容概要：HTML5 新特性、语义化、CSS 选择器及优先级、position 属性：relative，absolute，sticky，Static、box-sizing属性、CSS 盒子模型、BFC块级格式上下文原理场景、元素水平垂直居中、元素隐藏、页面布局：...
css-vertical-centeringCSS实现任意的单行(多行)垂直居中这种方式实现的垂直居中灵活在哪里?不需要知道待垂直居中的容器高度(意味着不需要写死任何高度数值)支持多行垂直居中可做为工具样式来使用, 例如这里的: ....
1.标准盒子模型和IE盒子模型区别 2.水平垂直居中 3.relative/absolute/fixed区别 4.响应式布局 5.页面上有2000个相同的元素要
网页制作Webjx文章简介：在CSS中...第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的
如果是要垂直居中，也是一样的方法，即设置top:50%,然后margin-top的值为层的高度的一半 position:absolute; left:50%; top:50%; margin-top:-13px; margin-left:-58px; width:116px; height:25px; z-index:999999;
当然，position也需要指定为absolute,或者relative. 如果要在某个父级元素内居中，那么父元素也需要指定CSS的position属性。 如果有边框，那么，margin元素需要做一点微调。 代码如下： 复制代码代码如下: <!...
父元素css： position: relative/absolute; left: 50%; 子元素css： position: relative; left: -50%; 但高度则不同，若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式，我们可以这样解
当然，position也需要指定为absolute,或者relative. 如果要在某个父级元素内居中，那么父元素也需要指定CSS的position属性。 如果有边框，那么，margin元素需要做一点微调。 代码如下： 复制代码代码如下: <!...
4.7.8 relative、absolute和float 4.7.9 居中 4.7.10 网格布局 4.7.11 z-index的相关问题以及Flash和IE 6下的select元素 4.7.12 插入png图片 4.7.13 多版本IE并存方案——CSS的调试利器IETester 第5章 高质量...
2017的微信公开课pro如期进行了，小程序将于2017年1月9日对个人开放，公司项目的demo版做了个大概，过程中花的时间最多的还是页面布局，所以后面将花一段时间将css的属性在小程序里过一篇，虽然小程序里面对于css...
style type="text/css"> #dw_JS_huanDeng_2 { margin: 0 auto; width: 1100px; position: relative; z-index: 5;} #JS_HDmenu_2 { position: absolute; top: 300px; z-index: 4; } ol, ul { list-...
style type="text/css"> nav { width: 960px; margin: 0 auto; /*定义导航宽度，水平居中*/ } nav ul { list-style: none; /*去掉列表符号*/ } nav ul li { float: left; /*水平排列*/ position:...