网页布局之九宫格

九宫格虽然嵌套了一些标签，但对于IE6、IE7来讲为了达到预期的美术效果，这中间需要进行权衡；无论怎么讲，他还是很多精华之处。

 

先看下面的效果，典型的圆角：

image

 

虽然圆角有很多的实现方案：

1、使用DIV进行模拟

2、可以使用wekit或moz的一些私有属性进行模拟…

3、使用VML进行处理

4、….

 

九宫格它的嵌套方式是左、中、右，大致的结构如下：

<div class="mod mod2 …"><!--这里可以附加更多CLASS来改变整体的表现-->
    <div class="modelTL">
        <div class="modelTR">
            <div class="modelTM"></div>
        </div>       
    </div>   
    <div class="modelML">
        <div class="modelMR">
            <div class="modelMM"></div>
        </div>
    </div>
    <div class="modelBL">
        <div class="modelBR">
            <div class="modelBM"></div>
        </div>
    </div>   
</div>

无论怎么变化，样式命名都可以遵循规范：modelTL、modelTR、modelTM、modelML、modelMR、modelMM、modelBL、modelBR、modelBM

 

最终的结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>九宫格</title>
<style type="text/css">
*{margin:0; padding:0;}
html, body{font:12px/1.4 sans-serif,Tahoma,Arial,"宋体"; white-space:normal; word-break:break-all; height:100%; }
body {background-color:#fff;}

img{border:0;}
a{outline:none;}
input{font-size:12px;}
.ipt,textarea{font-size:12px;border:1px solid #ccc; color:#b3b3b3; background:#fff;}
i,em,b{font-style:normal; font-weight:normal;}
a:hover{color:#000;}

.clear{display:block; height:1px; overflow:hidden; clear:both; background:none; border:none;}

	
.model{margin-bottom:5px;}
.modelTL,.modelTR,.modelTM,.modelBL,.modelBR,.modelBM{background-image:url(https://cahty.googlecode.com/svn/trunk/images/mod.gif); overflow:hidden;}
.modelTL{height:30px; background-repeat:no-repeat; padding-left:2px;}
.modelTR{height:30px; background-repeat:no-repeat; background-position:right -80px; padding-right:2px;}
.modelTM{height:30px; background-repeat:repeat-x; background-position:0 -40px;}
.modelBL{height:11px; background-repeat:no-repeat; padding-left:2px; background-position:0 -120px; clear:both;}
.modelBR{height:11px; background-repeat:no-repeat; background-position:right -200px; padding-right:2px;}
.modelBM{height:11px; background-repeat:repeat-x; background-position:0 -160px;}
.modelML{border-left:1px solid #ACACAC; border-right:1px solid #ACACAC; padding:0 10px; background:#fff; clear:both;}


.tit h3{font-size:14px; /*color:#292D88;*/ color:#C6C6C6;}
.tit h3 i{font-weight:bold;}
.titL,.titR{display:none;}
.titM{height:30px; overflow:hidden; line-height:30px;padding:0px 8px;}
.titM a{float:right; color:#666; text-decoration:none;}
.titM a:hover{color:#000; text-decoration:underline;}
.tit h3 span{font-weight:normal; color:#b3b3b3; font-size:12px;}
</style>
</head>
<body>
	<div class="model" style="width:240px; margin:50px;">
		<div class="modelTL">
			<div class="modelTR">
				<div class="modelTM">
					<div class="tit">
						<!--<div class="titL"></div>
						<div class="titR"></div>-->
						<div class="titM">
							<a href="javascript:;">查看更多个人动态</a>
							<h3>我的动态</h3>
						</div>
					</div>
				</div>			
			</div>
		</div>
		<div class="modelML">
			<div class="modelMR">
				<div class="modelMM">
					<div>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
						<p>放内容了....</p>
					</div>
				</div>
			</div>
		</div>
		<div class="modelBL">
			<div class="modelBR">
				<div class="modelBM"></div>
			</div>
		</div>
	</div>
</body>
</html>

 

运行示例：

posted @ 2010-10-14 13:48  meteoric_cry  阅读(2883)  评论(0)  编辑  收藏  举报