常用的页面的布局方式一般是固定页面的宽度居中显示，高度自适应，下面的代码就是一个居中显示的例子。
固定宽度居中显示 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>
分享到：
相关推荐
本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先，我们要理解`<div>`元素。`<div>`是“division”的缩写，代表一个区域或区块，在HTML中用于组合其他元素，是构建网页布局的基础。通过设置`<div>`...
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
在网页设计中，"DIV+CSS上下左右绝对居中"是一个常见的布局需求，尤其是在构建响应式网站时。这个主题涉及到CSS（层叠样式表）的布局技巧，它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...
CSS Grid布局提供了一种更现代的方法来实现垂直居中，但它仅在IE11及以上版本中得到支持。通过定义网格的行和列，我们可以轻松实现元素的垂直居中： ```css .container { display: grid; grid-template-rows: ...
在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...
- **定位布局**：利用CSS的position属性（如static、relative、absolute、fixed），实现元素相对于其父元素或浏览器窗口的精确定位。 4. **浮动布局**：通过设置float属性，元素可以脱离正常文档流并左右浮动，常...
- `position`属性（static, relative, absolute, fixed）及其在布局中的应用。 - 使用`flexbox`进行弹性布局，这是一种更现代的布局方式，可以轻松实现一维布局的对齐和分配。 - `z-index`的运用，控制元素的堆叠...
本文将深入探讨如何使用CSS+DIV来创建一个全屏页面上中下三行布局，并确保在各种浏览器中都能实现中间内容的居中显示。 首先，我们需要理解CSS的盒模型和定位概念。盒模型包括内容区域（content）、内边距（padding...
在网页设计中，"垂直居中显示"是一个常见的需求，特别是在多设备、多屏幕尺寸的环境下，确保元素在页面上无论何时都能保持居中状态，能够提供良好的用户体验。本话题主要探讨如何在IE7及以上的浏览器中实现元素的...
可以通过CSS的相对定位(`position: relative;`)和绝对定位(`position: absolute;`)来实现，让文字在图片的特定位置上显示。也可以使用`<figure>`和`<figcaption>`元素进行语义化布局。 5. **图片遮罩层**：为图片...
在网页设计中，CSS（Cascading Style Sheets）是用于控制网页元素样式和布局的关键技术。其中，如何实现图片在容器中的垂直居中是一个常见的需求，尤其在响应式设计和现代网页布局中更为重要。本篇文章将深入探讨...
在网页设计中，CSS...总的来说，理解并掌握这些CSS居中对齐的方法，将有助于提升你的网页设计技能，使你能够更灵活地控制网页元素的布局。在实践中不断探索和尝试，你会发现CSS在网页设计中有着无穷的可能性。
以下是一些主要的CSS技术，它们可以帮助你实现"css实现垂直居中"： 1. **Flexbox布局** Flexbox是现代CSS布局模式，特别适合处理容器内子元素的对齐问题。要实现垂直居中，可以设置容器的`display`属性为`flex`，...
在网页设计中，让图片垂直居中是一项常见的需求，它能确保页面布局的美观与均衡。CSS（Cascading Style Sheets）提供了多种方法来实现这一效果。以下将详细阐述几种常用的CSS图片垂直居中的技术。 1. **Flexbox布局...
1. **基础布局概念**：了解Div如何作为容器元素，以及如何通过CSS控制其宽高、内外边距、浮动和定位等属性，实现常见的如居中、对齐、多列布局等。 2. **盒模型理解**：理解CSS盒模型，包括内容(content)、内边距...
1. **定位与对齐**：`CSS`允许我们使用`position`属性（如`static`、`relative`、`absolute`、`fixed`）来控制元素的位置。对于登录界面，可能需要将表单居中对齐或者固定在屏幕某个角落。 2. **布局模式**：使用`...
5. Flexbox布局：现代CSS布局的重要工具，通过`display: flex`可以轻松实现一维布局，如水平或垂直居中，自适应排列等。 6. Grid布局：适用于二维布局，通过`display: grid`可以创建网格系统，灵活控制单元格大小、...
在CSS网页布局中，使一个DIV元素水平居中是常见的需求，这有助于创建美观且响应式的网站设计。本文将详细探讨几种实现DIV水平居中的方法。 1. **使用`margin: 0 auto`** 这是现代浏览器中最常用的方法。通过设置...
HTML5的新特性，如`<section>`、`<article>`等语义化标签，可以帮助构建结构化的页面，而CSS可以用于基本样式设定和与JavaScript的配合，比如使用`position: relative/absolute/fixed`来辅助JavaScript进行元素定位...
1. **一列单行布局**：将主要内容居中显示，只需设置内容区域的宽度和自动左右外边距。 ```css #content { margin: 0 auto; width: 400px; } ``` 2. **两行一列布局**：上下两个独立的居中内容区域，每个区域同样...