第1个回答 2014-03-03
这样的布局你可以从大往小看，首先你看这个整体，分析这几个的样式之后，你发现是分左右两个部分的，所以你就再下一级里放两个div，设置左浮动，就会横排并列，然后分析左面的，是分上下两个部分，然后写一个img一个p就可以搞定，右边的话是几个超链接，那你直接写a标签也可以，用span包住也可以，然后微调一下就能解决了追问
能写下代码让我参考下吗？
第2个回答 2014-03-03
就拿知识那一块为例，图标与知识放在一个div内，右边的文字连再放在一个div内，之前2个div是平级的，都设定好宽度左浮动，然后再再里面做细分就行了
其实div+css有点像我们小时候玩的俄罗斯方块积木，这需要我们发挥想象来排列div的组合方式追问
.box01{ float:left; width:40px; height:60px;}
.icon01{ width:40px; height:40px; text-align:center; font:14px/40px '宋体'; color:white; background:#f64269;}
.icon01_font{text-align:center; font:bold 14px/20px '宋体'; color:#f64269;}
.box02{float:left; width:130px; height:60px; margin-right:70px;}
.box02_font{text-decoration:none; font:12px/20px '宋体'; color:black; margin-left:5px; white-space:nowrap;}
</style>
</head>
<body>
<div class="box01">
<div class="icon01">图标</div>
<div class="icon01_font">知识</div>
</div>
<div class="box02">
<a href="#" class="box02_font">装修知识</a>
<a href="#" class="box02_font">装修风水</a>
<a href="#" class="box02_font">装修流程</a>
</div>
<div class="box01">
<div class="icon01">图标</div>
<div class="icon01_font">房子</div>
</div>
<div class="box02">
<a href="#" class="box02_font">儿童房</a>
<a href="#" class="box02_font">书房</a>
<a href="#" class="box02_font">卫生间</a>
<a href="#" class="box02_font">厨房</a>
</div>
</body>
其实div+css有点像我们小时候玩的俄罗斯方块积木，这需要我们发挥想象来排列div的组合方式追问
高手求解，那代码怎么写
追答<style type="text/css">.box01{ float:left; width:40px; height:60px;}
.icon01{ width:40px; height:40px; text-align:center; font:14px/40px '宋体'; color:white; background:#f64269;}
.icon01_font{text-align:center; font:bold 14px/20px '宋体'; color:#f64269;}
.box02{float:left; width:130px; height:60px; margin-right:70px;}
.box02_font{text-decoration:none; font:12px/20px '宋体'; color:black; margin-left:5px; white-space:nowrap;}
</style>
</head>
<body>
<div class="box01">
<div class="icon01">图标</div>
<div class="icon01_font">知识</div>
</div>
<div class="box02">
<a href="#" class="box02_font">装修知识</a>
<a href="#" class="box02_font">装修风水</a>
<a href="#" class="box02_font">装修流程</a>
</div>
<div class="box01">
<div class="icon01">图标</div>
<div class="icon01_font">房子</div>
</div>
<div class="box02">
<a href="#" class="box02_font">儿童房</a>
<a href="#" class="box02_font">书房</a>
<a href="#" class="box02_font">卫生间</a>
<a href="#" class="box02_font">厨房</a>
</div>
</body>
大概写了一个例子，你应该能看懂的
本回答被提问者采纳第3个回答 2014-03-03
这也可以有ul li的啊 只要图标不是点动的啊 设成背景图标也可以的啊 字再首行缩进就好 li再设成左浮动 设定要ul的宽度就好 省了成多代码追问
能详细写些代码吗？让我参考下
追答我自己写的代码中的一段你参考下:
试题下载
主题贴数:12
版主：admini
版块创建时间：2012-4-25 16:19:00
CSS:ul{ height:100px;color:#000; background:url(../Images/Logo2.png) no-repeat #FFF 10px 25px; text-indent:130px;}应该能看明天白吧 你要用话给li加浮动 这样旁边的字可以横排
相似回答