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

弹性宽度布局居中的html网页模板资源

html结构性网页模板之,宽度以em为单位的弹性宽度布局居中的html网页模板框架资源。

布局居中弹性宽度
布局居中 宽度为em单位弹性网页模板

看似我们设置宽度为em单位的值,实际em是相对单位,如果浏览器默认字体不同那么em换算出值将不同,自然就变成网页为弹性宽度。需要注意body设置字体大小时一定设置为100%,这样浏览器会根据平台判断默认给出字体大小。如果设置固定字体大小比如12px,那么布局出以em为宽度布局将自动固定了,布局宽度就不是弹性宽度了。

模板代码(可直接拷贝使用):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹性宽度并居中布局html模板 在线演示 thinkcss</title>
<style type="text/css">
body {font: 100% 宋体, 新宋体;background: #666666;margin: 0;padding: 0;text-align: center;color: #000000;}
#container {width: 46em;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>这里设置对布局布局的盒子设置相对宽度46em,也就是随浏览器对字体大小解释宽度而改变,比如默认浏览器字体大小为16px,那么宽度16px*46=736px,
如果其它浏览器默认字体为22px,那么宽度将改变,实现布局的网页宽度弹性,而固定的。</p>

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

在线演示:

运行代码试试

免费下载地址:

特别注意:弹性布局,最外层DIV以em为单位,并且body字体大小值设置为100%。

相关标签: em 居中 布局居中
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/muban/1481.shtml

日期:2018-01-12 16:32:18 来源:www.thinkcss.com 作者:ThinkCSS

热门点击