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>


效果:


你可能感兴趣的:(html,css,交通)