Rumah > Artikel > hujung hadapan web > CSS常用布局整理_html/css_WEB-ITnose
CSS常用布局整理_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:52:271581semak imbas
固定宽度布局
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> 效果图：
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：学习前端模板引擎 jade (一)_html/css_WEB-ITnoseArtikel seterusnya：@font-face 用字体画图标_html/css_WEB-ITnose