CSS+DIV布局

Leon1509

于 2009-06-25 14:08:24 发布

阅读量120

点赞数

分类专栏： DHTML 文章标签： CSS 交通 HTML

DHTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

部分参考了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>