网页布局之九宫格-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

网页布局之九宫格

简介: 九宫格虽然嵌套了一些标签,但对于IE6、IE7来讲为了达到预期的美术效果,这中间需要进行权衡;无论怎么讲,他还是很多精华之处。   先看下面的效果,典型的圆角:   虽然圆角有很多的实现方案: 1、使用DIV进行模拟 2、可以使用wekit或moz的一些私有属性进行模拟… 3、使用VML进行处理 4、….

九宫格虽然嵌套了一些标签,但对于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>

 

运行示例:

xmlns="http://www.w3.org/1999/xhtml"> 九宫格

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章