Home > Article > Web Front-end > CSS常用布局整理_html/css_WEB-ITnose
CSS常用布局整理_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:52:271580browse
固定宽度布局
1-2-1布局（浮动）
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>固定宽度</title><style type="text/css">div ,p, h2 { margin: 2px; padding: 5px;}#container { width: 612px; margin: 10px auto;}#header,#footer { width: 596px; border: 1px solid blue;} #content { float: left; width: 360px; border: 1px solid blue;}#side { float: left; width: 220px; border: 1px solid blue;}#footer { clear: both;}</style></head><body><div id="container"> <div id="header"> <h2>Page Header</h2> </div> <div id="content"> <h2>Page Content 1</h2> <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p> </div> <div id="side"> <h2>Side Bar 1</h2> <p>对于一个网页设计者来说，HTML语言一定不会感到陌生。</p> </div> <div id="footer"> <h2>Page Footer</h2> <p>这是一行文本，这里作为样例，显示在布局框中。</p> </div></div></body></html>
效果图：
正中间的两个div都浮动起来，且包含块的宽度是固定值。Footer清除浮动防止浮动块覆盖。
1-2-1布局（绝对定位）
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>固定宽度</title><style type="text/css">div ,p, h2 { margin: 2px; padding: 5px;}#container { width: 612px; margin: 10px auto; position:relative;}#header,#footer { width: 612px; border: 1px solid blue;} #content { margin-left: 226px; width: 360px; border: 1px solid blue;}#side { position: absolute; width: 220px; border: 1px solid blue; left:0; top:3px;}</style></head><body><div id="header"> <h2>Page Header</h2></div><div id="container"> <div id="content"> <h2>Page Content 1</h2> <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p> </div> <div id="side"> <h2>Side Bar 1</h2> <p>对于一个网页设计者来说，HTML语言一定不会感到陌生。</p> </div></div><div id="footer"> <h2>Page Footer</h2> <p>这是一行文本，这里作为样例，显示在布局框中。</p></div></body></html> 效果图：
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：学习前端模板引擎 jade (一)_html/css_WEB-ITnoseNext article：@font-face 用字体画图标_html/css_WEB-ITnose