11选5中奖结果内蒙古: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

热门点击

  • 国乒在日本全面溃败!刘国梁却在参加综艺节目 2019-04-21
  • 张琳芃球衣事件折射中超不职业 因打亚冠要多道程序 2019-04-21
  • 出租广州市番禺区大龙街东兴路476号4楼物业空置部分 2019-04-17
  • 美媒盘点地球上最强5款战略核潜艇:毁灭世界比外卖都快 2019-04-17
  • 董卿白岩松朱广权 看看央视主持人大学就读啥院系 2019-04-16
  • 第十二届中国(南宁)国际园林博览会相约绿城冬季 2019-04-16
  • 第518期:讨厌萝卜味?它可是抗癌的高手 2019-04-01
  • 这些中药串起来竟然是首诗 知道它们治什么病吗?(图) 2019-04-01
  • 致敬幸福奋斗者:访全国三八红旗手标兵 2019-03-31
  • 2017年我国门诊抗菌药物使用率下降到7.7% 2019-03-29
  • 认为要彩礼是侮辱 男子与妻子结婚不到15分钟就离婚 2019-03-29
  • 续写“八八战略”新篇章 2019-03-28
  • 袁隆平:多养活5亿人是我的梦想研究 水稻 2019-03-28
  • 2018年4月27日划拨国家社科基金项目鉴定费名单(2) 2019-03-24
  • 治脂肪肝不能光靠减肥 2019-03-24