CSS+DIV布局
部分参考了http://k.pconline.com.cn/question/1250175.html网页源代码html:
<style>.qnbox_l3 {border:1px solid #6FA7D4;background:#F2F7FB;margin:3px;padding:8px}.f12px{font-size:12px;}.w1 {width:expression((document.body.offsetWidth-60) / 3 + "px");height:expression((document.body.offsetHeight-45) / 2 + "px")}.ln24{line-height:24px;}.ln25{line-height:25px;}.fleft{float:left;}.box_con {margin:0 auto;background:#FFF;padding:10px 20px;}</style><body><div><div class="w1 qnbox_l3 f12px fleft">水果<div class="box_con ln24"><h3>水果</h3><ol><li>桔子</li><li>苹果</li><li>香蕉</li></ol></div></div><div class="w1 qnbox_l3 f12px fleft">交通工具<div class="box_con ln24"><h2>交通工具</h2><ol><li>汽车</li><li>火车</li><li>轮船</li></ol></div></div><div class="w1 qnbox_l3 f12px fleft">水果<div class="box_con ln24"><h1>水果</h1><ol><li>桔子</li><li>苹果</li><li>香蕉</li></ol></div></div><div class="w1 qnbox_l3 f12px fleft">水果<div class="box_con ln24"><h3>水果</h3><ol><li>桔子</li><li>苹果</li><li>香蕉</li></ol></div></div><div class="w1 qnbox_l3 f12px fleft">交通工具<div class="box_con ln24"><h2>交通工具</h2><ol><li>汽车</li><li>火车</li><li>轮船</li></ol></div></div><div class="w1 qnbox_l3 f12px fleft">水果<div class="box_con ln24"><h1>水果</h1><ol><li>桔子</li><li>苹果</li><li>香蕉</li></ol></div></div></div></body>
效果：
http://www.agoit.com/upload/attachment/118849/259dbaa2-195d-3f43-ac45-44a1cdcc0a3b.png
页:
[1]