html布局 百分比自适应框架网页源码

2019-09-07 郑州网站建设  

html根蒂构造代码之百分比自适应组织居中的网页源码成本。

最外层DIV宽度采取百分比值完成构造居中而长久适应。

布局居中 自适应网页源码效果


机关居中 自顺应网页源码成绩

1、残破HTML CSS源码代码:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自适应百分比HTML布局框架 CSS5</title> <style type="text/css"> body {font: 100% 宋体, 新宋体;bac千克round: #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 nonu妹妹y 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>
河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1076.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • 框架
  • 布局
  • 百分比
  • 网页模板
  • 适应