请问css怎样写这样一个布局 上图！谢谢

html-css014

请问css怎样写这样一个布局 上图！谢谢,第1张

<style type="text/css">

.main{background-color:#f90padding:5px 20px 10px}

.leftClum{float:leftfont-size:24pxwidth:24px}

.rightClum{margin:0padding:0}

.rightClum li {display:inlinewidth:33%list-style-type:noneline-height:2}

/**####Link Style####**/

a{color:whitetext-decoration:none}

.aFocus{ color:yellow}

/**###clear both###**/

.cl{clear:bothline-height:0font-size:0}

</style>

<div class="main">

<div class="leftClum">

首页

</div>

<ul class="rightClum">

<li><a href="#" class="aFocus">联系我们</a></li>

<li><a href="#" class="aFocus">>联系我们</a></li>

<li><a href="#">联系我们</a></li>

<li><a href="#">联系我们</a></li>

<li><a href="#">联系我们</a></li>

<li><a href="#">联系我们</a></li>

</ul>

<div class="cl"></div>

</div>

因为是直接看着你的图，在这个输入框里写的代码，所以木有调试，不保证代码错对，但是实现思路大体就这样了。

<style type="text/css">

.main{width:90%margin: 10px auto}

.clum01{float: leftdisplay: inlinewidth:24%}

.clum02{float: leftdisplay: inlinewidth:51%}

.clum03{float: leftdisplay: inlinewidth:24%}

.con{border:1px solid #ccc}

.clum01 .con{height: 250px}

.clum02 .con,.clum03 .con{margin-left:10pxheight:120px}

.clum02 .the2,.clum03 .the2{margin-top:10px}

.main .con{font-size:24pxfont-weight: bold}

</style>

<div class="main">

<div class="clum01">

<div class="con">01</div>

</div>

<div class="clum02">

<div class="con">02</div>

<div class="con the2">05</div>

</div>

<div class="clum03">

<div class="con">03</div>

<div class="con the2">04</div>

</div>

</div>

不懂再问