内蒙古体彩十一选五规则: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-08-19
  • 十九大精神进机关:原原本本吃透精神 学懂弄通昂扬斗志 2019-08-13
  • 我们是建立市场经济,公有制如何建立市场经济,就要明晰产权,不明晰产权如何建立市场经济? 2019-08-13
  • 2017巴塞尔国际钟表珠宝展 2019-08-11
  • 政务舆情回应如何把握语言分寸感? 2019-08-11
  • 候选案例:机井通电惠民生 2019-08-08
  • 2018年04期 中国国家地理网 2019-08-05
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-07-31
  • 西安外国语大学第二十四届校园文化艺术节闭幕式暨第一届朗读者圆满落幕西安外国语大学第二十四届校园文化艺术节-陕西教育新闻 2019-07-31
  • 俄罗斯世界杯今日开战,送上最全观赛指南!你最看好哪支球队? 2019-07-29
  • 《人民日报》让我爱上了文学(原创首发) 2019-07-29
  • 【北京页川车型报价】北京页川4S店车型价格 2019-07-27
  • 河北沧州经济开发区管理委员会 2019-07-24
  • 强村带弱村结对共发展 2019-07-24
  • 《读药》151期:短篇小说——解读蒋一谈《庐山隐士》 2019-07-15
  • 江西多乐彩形态走势图 十一选五任8全包组合 安徽快三走势图快三基本一定牛 北京十一选五开奖信息 任选9场第201976期 搜狐彩票图 安徽时时彩开奖结果 云南的快乐十分开奖走势图 福彩30选5几天开一次 今日p3开机号 江苏快三走势图爱彩乐 大乐透走势图表100期 内蒙古时时彩三星推号 中国竟彩首页计算器 腾讯分分彩一期一码计划