!DOCTYPE html>
Document
th1 | th2 | th3 | th4 |
---|
td1 | td2 | td3 | td4 |
td1 | td2 | td3 | td4 |
td1 | td2 | td3 | td4 |
td1 | td2 | td3 | td4 |
td1 | td2 | td3 | td4 |
td1 | td2 | td3 | td4 |
网页效果:案例23 简单布局1
Document
@charset "utf-8"; body{ margin:0; padding:0; } #container{ width: 980px; border:1px solid #ccc; margin:0 auto; } #container .header{ width: 100%; height: 80px; background:red; } #container .main{ width: 100%; height: 600px; background:blue; margin:10px 0; } #container .footer{ width: 100%; height: 120px; background:green; } 网页效果:案例24 简单布局2
Document
</article>
<footer class="footer">
footer
</footer>
@charset "utf-8"; body{ margin:0; padding:0; } #container{ width: 980px; border:1px solid #ccc; margin:0 auto; } #container .header{ width: 100%; height: 80px; background:red; } #container .wrapper{ width: 100%; height: 600px; background:blue; margin:10px 0; } #container .wrapper .main{ background:cyan; width: 760px; height: 600px; float:left; margin:0 10px; } #container .wrapper aside{ background:pink; width: 200px; height: 400px; float:left; } #container .footer{ width: 100%; height: 120px; background:green; }网页效果:案例25 圣杯布局1
Document
style3.css @charset "utf-8"; /* 父容器 1.溢出时隐藏 2.设置容器的内边距padding,用来空出位置,放置左右侧边栏 */ #wrapper{ overflow:hidden; /*溢出时隐藏*/ /* 实现左侧边栏和右侧边栏 */ padding:0 200px; /* 左右分别空出200px用于放置左、右侧边栏 */ min-width:300px; border:1px solid #ccc; } /* 主体: 1.宽度自适应 2.设置一个浮动布局 */ #wrapper .main{ width: 100%; height: 300px; background:green; float:left; } #wrapper aside{ width: 190px; height: 300px; background:blue; float:left; position:relative; } #wrapper .left{ margin-left:-100%; left:-200px; } #wrapper .right{ margin-left: -190px; right:-200px; }网页效果:案例26 圣杯布局2
Document
style4.css @charset "utf-8"; body{ margin:0; padding:0; } #container{ margin:0 auto; } #container .header{ width: 100%; height: 80px; background:red; } #container #wrapper{ overflow:hidden; padding:0 200px; min-width:300px; margin:10px 0; } #container .main{ width: 100%; height: 400px; background:blue; float:left; } #container aside{ float:left; width: 190px; height: 300px; background:cyan; position:relative; } #container .left{ margin-left: -100%; left:-200px; } #container .right{ margin-left:-190px; left:200px; } #container .footer{ width: 100%; height: 150px; background:green; }网页效果:案例27 双飞翼布局
Document
style5.css @charset "utf-8"; body{ margin:0; padding:0; } #container{ margin:0 auto; } #container .header{ width: 100%; height: 80px; background:red; } #container .wrapper{ overflow:hidden; min-width:300px; margin:10px 0; } #container .main{ width: 100%; float:left; } #container .main-wrapper{ background:pink; height: 400px; margin:0 200px; } #container aside{ float:left; width: 190px; height: 300px; background:cyan; } #container .left{ margin-left: -100%; } #container .right{ margin-left:-190px; } #container .footer{ width: 100%; height: 150px; background:green; }网页效果: