内蒙古11选五组选3遗漏:html布局 百分比自适应框架网页模板

html基本布局代码之百分比自适应布局居中的网页模板资源。

最外层DIV宽度采用百分比值实现布局居中而且自适应。

布局居中 自适应网页模板效果
布局居中 自适应网页模板效果

1、完整HTML 内蒙古11选五开奖5号的模板代码:

<!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: 80%; /* 这将创建一个占据 80% 浏览器宽度的容器 */
background: #FFFFFF;
margin: 0 auto; /* 自动边距(与宽度一起)会将页面居中 */
border: 1px solid #000000;
text-align: left; /* 这将覆盖 body 元素上的“text-align: center”。 */
}
#mainContent {padding: 0 20px; /* 请记住,填充是 div 方块内部的空间,边距则是 div 方块外部的空间 */}
</style>
</head>
<body>
<div id="container">
<div id="mainContent">
<h1> 自适应百分比布局 </h1>
<p>1、最外层布局DIV宽度设置为百分比值,没有设置具体px或em,布局网页宽度将根据浏览器宽度而自适应宽度。<br />
2、最外层DIV宽度设置80%,并且布局居中。为了看到布局居中效果设置1px边框。<br />
3、#mainContent设置padding左右20px样式,让内容距离最外层DIV的靠左和靠右有20px间距距离。</p>
<h2>H2 级别的标题 </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
</div>
</body>
</html>

2、在线运行地址

运行代码试试

3、打包免费下载

此网页模板资源为最基本自适应布局,可直接使用、可以借鉴学习、也可修改后使用。

相关标签: 百分比 自适应
如需转载,请注明文章出处和来源网址:www.thinkcss.com/muban/1488.shtml

日期:2018-01-28 18:08:06 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:ThinkCSS

热门点击

  • 图解:从中国新闻奖、长江韬奋奖看人民日报70年 2019-06-27
  • 江夏区宣传干部培训班圆满落幕 荆楚网携手江夏区委宣传部举办 2019-06-26
  • 供应链如何更“智慧” 2019-06-17
  • 推动民营企业创新发展 2019-05-31
  • 【北京中汽双会车型报价】北京中汽双会4S店车型价格 2019-05-31
  • 弘扬光荣传统 勇立时代潮头 忠实履职尽责 2019-05-30
  • 世界很多国家想拥有核弹,但迫于种种原因而没能实现。 2019-05-25
  • 阿呆,那是你家远祖啊,还不跪拜?[哈哈] 2019-05-15
  • 泰国推出“智慧签证”吸引人才 2019-05-15
  • “印象”世界杯:揭幕战红色风暴席卷绿茵场 2019-04-29
  • 衡阳日报社副社长周卫国祝贺人民日报创刊70周年 2019-04-27
  • 国乒在日本全面溃败!刘国梁却在参加综艺节目 2019-04-21
  • 张琳芃球衣事件折射中超不职业 因打亚冠要多道程序 2019-04-21
  • 出租广州市番禺区大龙街东兴路476号4楼物业空置部分 2019-04-17
  • 美媒盘点地球上最强5款战略核潜艇:毁灭世界比外卖都快 2019-04-17
  • 香港两码中特网 一肖中特马准 中国福彩3d出号走势图 老时时彩是否合法 qq四川麻将作弊器 东方6+1玩的人少 福建省体育彩票走势图 杀手集团六肖中特 云南十一选五遗漏数据 安徽25选5最新开奖结果 百宝彩票网快乐十分 淘宝世界杯半全场 内蒙古快三开奖金额 全赢足球比分直播 双色球18093期推荐号码