CSS常用布局整理_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:52:271635검색
固定宽度布局
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> 效果图：
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.