首页手记 css布局学习总结与练习——实...

css布局学习总结与练习——实现多栏混合布局

标签：

Html/CSS

这节课程较为精简，掌握全部的知识点只需要能完成多栏布局即可。

<html>
<head>
<title>布局结构</title>
<style>
.head1 { background-color:#0000cc; text-align:center; height:68px; width:200px; left:10px; position:absolute}
.head2 { background-color:#cccccc; text-align:center; height:50px; margin:0 220px}
.head3 { background-color:#00cccc; text-align:center; height:68px; width:200px; right:10px; top:0; 

position:absolute}
.body1 { background-color:#cc00cc; float:left; margin-left:10px; width:40px; height:600px}
.body2 { background-color:#dd00cc; float:right; margin-right:10px; width:40px; height:600px}
.body3 { background-color:#00ccdd; margin:0 60px; height:600px; width:auto; text-align:center}
.tail1 { background-color:#ddccdd; float:left; height:50px; width:150px; margin-left:10px; text-align:center}
.tail2 { background-color:#ddccdd; float:left; height:50px; width:150px; margin-left:150px; text-align:center}
.tail3 { background-color:#ddccdd; float:left; height:50px; width:150px; margin-left:230px; text-align:center}
.tail4 { background-color:#ddccdd; float:left; height:50px; width:150px; margin-left:230px; text-align:center}
.tail5 { background-color:#ddccdd; float:right; height:50px; width:150px; margin-right:10px; text-align:center}
</style>
</html>

<body style="margin:0; padding:0">
<div class="head1">
    title1
</div>

<div class="head2">
    title2
</div>

<div class="head3">
    title3
</div>

<hr style="margin-left:220px; margin-right:220px;"/>

<div class="body1">
    The one
</div>

<div class="body2">
    The two
</div>

<div class="body3">
    The three
</div>

<hr style="margin-left:10px ; margin-right:10px;"/>

<div class="tail1">
    The four
</div>

<div class="tail2">
    The five
</div>

<div class="tail3">
    The six
</div>

<div class="tail4">
    The seven
</div>

<div class="tail5">
    The eight
</div>

</body>
</html>

分别使用了三种方式来实现head、body和tail的多栏布局，分别对应不同样式，还有一种按width比例实现与上面tail的方法类似，只是将width划分成等比例如5栏即：20%,20%,20%,20%,20%。
<hr/>
~仅以勉励自己，继续学习，也要时常复习，加油(^ω^)

点击查看更多内容