跟我学CSS布局篇之一列布局

作者:divcss教程吧      点击次数:838次     发布日期:2015-07-29

跟我学CSS布局篇之一列布局

我们在网站上看到一些网页专题页面,经常会用到一个列布局。这也是CSS布局中最简单的一种布局方法。而我们一列布局多数情况下就是采用的居中方式。


我们先看一下网页的源代码:

<!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>

<title>跟我学CSS布局篇之一列布局-www.divcss8.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Keywords" content="跟我学CSS布局篇之一列布局" />
<meta name="description" content="www.divcss8.com跟我学CSS布局篇之一列布局" />
<style type="text/css">
*{padding:0;margin:0;}/*重置HTML元素所有间距*/
#layout{
width:980px;/*一列布局的宽度*/
height:600px;/*一列布局的高度*/
margin:0px auto;/*实现一列的布局的核心代码。上下边距为0px,左右以父元素为基准实现自动适应边距*/
background:#ccc;
</style>
</head>

<body>
<div id="layout">
在这里居中显示我们的专题页面的内容。
</div>
</body>
</html>

分享DIVCSS8