网页布局之九宫格

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

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

放内容了....

目录
相关文章
图文混排
3.7 图文混排 3.7.1 插入图片和剪贴画 1、插入图片 1嵌入式对象: 只能放置到有文档插入点的位置。 不能与其他对象同时选择,不能与其他对象组合。 可以与正文一起排版,但不能实现环绕。 2浮动式对象: 可以放置到页面的任意位置。 可以同时选择多个对象,并允许与其他对象组合。 还可以与正文实现多种形式的环绕。 嵌入式对象 浮动式对象 位置 插入点位置 任意位置 同时选择、组合 不能 能 与正文排版 能 能 环绕 不能 能 默认 图片、剪贴画 形状、艺术字、文本框 非嵌入式(浮动式)对象的环绕方式: 四周型 上下型 紧密型 浮于文字上方 穿越型 衬于文字下方 三种插入
|
2月前
|
前端开发
CSS小技巧之绘制心形图案
CSS小技巧之绘制心形图案
41 0
|
2月前
|
前端开发
【CSS】解决图片和盒子底部产生的缝隙问题
【CSS】解决图片和盒子底部产生的缝隙问题
|
前端开发
纯CSS3不规则瀑布流布局特效
纯CSS3不规则瀑布流布局特效
157 0
纯CSS3不规则瀑布流布局特效
|
前端开发
巧用 CSS 实现炫彩三角边框动画
巧用 CSS 实现炫彩三角边框动画
146 0
巧用 CSS 实现炫彩三角边框动画
|
JavaScript 前端开发
9套迷人精致的CSS3 3D按钮动画
9套迷人精致的CSS3 3D按钮动画
273 0
|
前端开发 JavaScript Web App开发
如何用纯 CSS 创作从按钮两侧滑入装饰元素的悬停特效
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/yRyOZr 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1007 0
|
前端开发
如何用纯 CSS 创作小球变矩形背景的按钮悬停效果
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/yxbEzJ 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1088 0
|
前端开发 容器 Web App开发
如何用纯 CSS 创作一个方块旋转动画
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/gjgyWm 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1144 0