一列固定宽度居中

2017-06-13 11:58:00
admin
原创
310
<!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" />
<title>一列固定宽度居中</title>
<style type="text/css">
body {
	background-color: #090;  /*设置背景颜色*/
	font-size:9pt;           /*字体大小*/
	margin:0px;              /*页面边距为0px*/
}
#content {
	background-color: #FFF; /*设置DIV的背景色*/ 
	width:600px;            /*设置DIV的宽度*/
	margin:0px auto;        /*这里是关键,用来指定左右外边距自动计算*/
	padding:20px;
	height:900px;
}
</style>
</head>
<body>
<!--这里就是固定宽度且居中的div-->
<div id="content">
  <h2>&nbsp;</h2>
  <h2>DIV和CSS常见布局结构</h2>
  <p>这一章将来学习一些常见的DIV+CSS的布局结构,通过常握这些布局的控制方式,可以巩固在这一章前面2小节中学到的关于布局的一些知识。这些布局也是目前在网站建设中普遍使用的主流布局方式。</p>
  <p><img src="http://www.ybao.org/data/upload/201705/f_f98e04fa9ff2aed692bebb9f6c0be82e.jpg" width="109" height="112" /></p>
  <h3>一列固定宽度居中</h3>
  <p>所谓一列固定宽度居中,是指内容显示在网页的中间位置,并且内容的大小固定,不会随着浏览器作口大小的调整而变化,是最基础的布局方式。在表格式布局的时代,一列固定宽度主要使用一个align属性为center的&lt;table&gt;标签来实现,通常用来实现网站的大的框架结构,本节将演示如何用CSS来实现这个布局。</p>
</div>
</body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227