您的位置:首页 > 网页模板 > 【 返回上一页

html 宽度固定并布局居中模板框架

固定宽度 并居中模板效果
固定宽度 并居中模板效果

完整代码(可直接拷贝使用):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单一固定居中框架 在线演示 thinkcss</title>
<style type="text/css">
body {font: 14px/24px 宋体, 新宋体;background: #666666;margin: 0; padding: 0;text-align: center;color: #000000}
#container {width: 780px;background: #FFFFFF;margin: 0 auto; border: 1px solid #000000;text-align: left}
#mainContent {padding:0 20px}
</style>
</head>

<body>

<div id="container">
<div id="mainContent">
<h1> 主要内容 </h1>
<p>#container 对应最外层div id=container设置了居中,并设置固定宽度,实现了布局居中与固定宽度 html模板框架</p>
<h2>《三国演义》文段 </h2>
<p>建宁二年四月望日,帝御温德殿。方升座,殿角狂风骤起。只见一条大青蛇,从梁上飞将下来,蟠于椅上。帝惊倒,
左右急救入宫,百官俱奔避。须臾,蛇不见了。忽然大雷大雨,加以冰雹,落到半夜方止,坏却房屋无数。建宁四年二月,
洛阳地震;又海水泛溢,沿海居民,尽被大浪卷入海中。光和元年,雌鸡化雄。六月朔,黑气十余丈,飞入温德殿中。
秋七月,有虹现于玉堂;五原山岸,尽皆崩裂。种种不祥,非止一端。帝下诏问群臣以灾异之由,议郎蔡邕上疏,以为蜺堕鸡化,
乃妇寺干政之所致,言颇切直。帝览奏叹息,因起更衣。曹节在后窃视,悉宣告左右;遂以他事陷邕于罪,放归田里。
后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸,号为“十常侍”。</p>
</div>
</div>
</body>
</html>

演示地址:

运行代码试试

免费下载地址:

以上为html网页布局常见宽度固定并且布局水平居中的布局资源代码,采用纯div css布局。

相关标签: 居中 框架 模板
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/muban/1479.shtml

日期:2018-01-12 13:59:58 来源:www.thinkcss.com 作者:ThinkCSS

热门点击