CSS构造模型与动态布局

1、CSS构造块

（1）div
div是division的缩写，用于定义XHTML文件中的区域。
1）添加div

<div>
	<p>This is our content area.</p> 
</div>

2）给div添加id

<div id="container">
	<p>This is our content area.</p> 
</div> 

#container { 
	padding: 20px; 
	border:1px solid #000; 
	background:#ccc; 
}

3）添加子div

<div id="container"> 
	<p>This is our content area.</p> 
	<div class="box"> 
		<p>I’m in a box!</p> 
	</div> 
	<div class="box"> 
		<p>I’m also in a box!</p>
	</div> 
</div> 

.box{ 
	margin:10px; 
	padding:20px; 
	border:1px solid #000; 
}

4）div和上下文选择器

.box p { 
	color: #333; 
} 
#container p { 
	color: #333; 
}

（2）边距
1）外边距：margin

#container { 
	margin-top: 20px; 
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom: 20px; 
	width: 300px; 
	border: 1px solid #333; 
	padding: #ccc; 
} 
#container { 
	margin: 20px auto 1em auto;
}

用margin: auto居中：

body { 
	text-align: center; 
} 
#container { 
	width:400px; 
	margin: 10px auto 10px auto; 
	padding: 20px; 
	background:#ccc; 
	text-align: left;
}

2）内边距：padding

#container { 
	padding-top: 20px; 
	padding-left: 10%; 
	padding-right: 1em; 
	padding-bottom:0; 
	background:#ccc; 
}

3）主体的外边距、内边距都设为0

body { 
	margin: 0; 
	padding: 0; 
}

（3）边框
border-style（边框样式）可以有以下样式：none（无边框），dotted（点线），dashed（虚线），solid（实线），double（双线），groove（凹槽），ridge（凸槽），inset（凹边），outset（凸边）。
例如：border-style: solid dotted inset outset;
border系列属性有：border-width（长度），border-top-width，border-right-width，border-bottom-width，borer-left-width，border-color，border，border-top，border-right，border-bottom，border-left。
（4）定位
p，h1和div等称为块级元素，strong和span等称为行内元素。
1）相对定位

#myBox {
	position: relative; 
	top:20px; 
	left:20px;
}

2）绝对定位

#myBox { 
	position:absolute; 
	top:20px; 
	left:20px; 
}

（5）浮动

.news img { 
	float: left; 
} 
.news p{ 
	float: right; 
}

2、CSS构造列表与导航

（1）内边距与外边距

ul { 
	margin: 0; 
	padding: 0; 
}

（2）使用图片作为列表图标

ul { 
	margin: 0; 
	padding:0; 
	width:200px; 
	list-style-image:url(images/list.gif); 
	line-height: 150%; 
}

（3）以背景图片作为项目列表图标

ul { 
	list-style-type:none; 
} 
li { 
	background:url(images/list.gif) no-repeat left center; 
	padding: 0 0 0 25px; 
}

（4）内联列表

ul { 
	list-style-type:disc;
} 
li {
	display:inline;
}

这里的display属性值为block代表该元素设置为块元素，为inline代表该元素设置为内联元素。
（5）背景图片和内联列表

ul { 
	list-style-type: none; 
} 
li { 
	display:inline; 
	background: url(images/list.gif) no-repeat left center; 
	margin: 0 0 0 10px; 
	padding: 0 0 0 15px; 
}

（6）垂直导航栏

<div> 
	<ul> 
		<li><a href="#">Drubjs Menu</a></li> 
		<li><a href="#">Beer</a></li> 
		<li><a href="#">Spirits</a></li> 
		<li><a href="#">Cola</a></li> 
		<li><a href="#">Lemonade</a></li> 
		<li><a href="#">Tea</a></li> 
		<li><a href="#">Coffee</a></li> 
	</ul> 
</div>

ul {
	list-style-type:none; 
	margin:5px; 
	padding:2px;
	width:160px; 
	font-size:12px;
} 
li {
	background:#ddd; 
	margin:0; 
	padding:2px 10px; 
	border-left:1px solid #fff;
	border-top:1px solid #fff; 
	border-right:1px solid #666; 
	border-bottom:1px solid #aaa;
}

（7）垂直翻转的列表

ul { 
	margin:0; 
	padding:0; 
	list-style-type: none; 
}
ul a { 
	display:block; 
	width:200px; 
	height:40px;
	line-height:40px;
	color:#000; 
	text-decoration:none; 
	background:#94b8E9 url(images/pixy-rollover.gif) no-repeat left center; 
	text-indent:50px; 
}
a:hover { 
	background-position: right bottom; 
}

（8）水平导航条

ul { 
	margin: 0; 
	padding: 0 2em; 
	list-style: none; 
	line-height: 2.1em; 
	width:720px; 
	background:#faa819 url(images/mainNavBg.gif) repeat-x; 
} 
ul li { 
	float: left; 
}
ul a { 
	color:#fff; 
	padding: 0 10px;
	background:url(images/divider.gif) repeat-y left top; 
	text-decoration: none;
}

3、CSS构造背景图像

（1）使用span能更好的控制局部区域的文本：<span>文本内容</span>
（2）使用display属性提供区块和内联之间的转换：inline，block，none。
（3）背景图象渐变的制作

body { 
	background: #ccc url(bg.gif) repeat-x; 
}

（4）给区块加上背景

#branding { 
	width: 700px; 
	height: 200px; 
	background: url(branding.gif) no-repeat; 
}

（5）给标题加上一个小图标

h1 { 
	padding-left:20px; 
	background: url(bullet.gif) no-repeat left center; 
}

如果希望使用百分比而不使用关键字，则 0 50%这样就实现了垂直居中。
（6）圆顶角

<div class=”box”> 
	<h2>Headline</h2> 
	<p>Content</p> 
</div>

.box { 
	width: 418px; 
	background: #ccc url(bottom.gif) no-repeat left bottom; 
}
.box h2 {
	background:url(top.gif) no-repeat left top;
}

如果不希望碰到边界，则加上填充。

.box h2 { 
	padding:10px 20px 0 20px; 
} 
.box p{ 
	padding:0 20px 10px 20px; 
}

（7）简单的CSS阴影效果

<div class="img-wrapper"> 
	<img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard"/> 
</div>

.img-wrapper { 
	background:url(images/shadow.gif) no-repeat bottom right; 
	clear:right; 
	float:left; 
	position: relative; 
	margin: 10px 0 0 10px; 
}
.img-wrapper img { 
	display: block; 
	margin: -5px 5px 5px -5px; 
	position: relative; 
}

4、CSS构造超链接

（1）给超链接加上边框

a:link { 
	color: #f00; 
	text-decoration: none; 
	border-bottom:1px dashed #333; 
	line-height: 150%; 
}

（2）在段落中加上超链接

a:link { 
	color: #f00; 
	text-decoration: none; 
	border: 1px solid #333; 
	background: #ccc; 
	padding: 2px; 
	line-height: 150%; 
}

（3）用背景图片作为记号

a:link { 
	color:#f00; 
	padding: 0 15px 0 0; 
	background:url(images/arrow.gif) no-repeat right center; 
}
a:visited { 
	color:#999; 
	padding: 0 15px 0 0; 
	background:url(images/checkmark.gif) no-repeat right center; 
}

（4）运用派生来构造超链接

p a:link, p a:visited, p a:hover, p a:active { 
	color:#f00; 
} 
ul a{ 
	color:#000; 
}

（5）运用图片作为下划线

a:link,a:visited { 
	color: #666; 
	text-decoration:none; 
	background: url(images/underline1.gif) repeat-x left bottom; 
} 
a:hover,a:active { 
	background:url(images/underline1-hover.gif); 
}

（6）突出显示不同类型的超链接

.external{ 
	background:url(images/externalLink.gif) no-repeat right top; 
	padding-right: 10px; 
}

（7）使用属性选择器来做链接

a[href^ ="http:"] { 
	background:url(images/externalLink.gif) no-repeat right top; 
	padding-right: 10px; 
} 
a[href^="mailto:"] { 
	background:url(images/email.png) no-repeat right top; 
	padding-right: 13px; 
}

（8）创建超链接按钮

a { 
	display: block;
	width: 6em; 
	padding: 0 2em; 
	line-height: 1.4; 
	background-color: #94b8e9; 
	border: 1px solid black; 
	color: #000; 
	text-decoration: none; 
	text-align: center;
} 
a:hover { 
	background-color: #369; 
	color:#fff; 
}

（9）图像翻转

a { 
	display: block; 
	width: 200px; 
	height: 40px; 
	line-height: 40px; 
	background-color: #94b8e9; 
	color: #000; 
	text-decoration: none; 
	text-indent:50px; 
	background: #94b8ea url(images/button.gif) no-repeat left top; 
} 
a:hover { 
	background: #369 url(images/button_over.gif) no-repeat left top; 
	color: #fff; 
}

（10）已访问链接样式

<ul> 
	<li><a href="http://www.andybudd.com/">Andy Budd's Blogography</a></li> 
	<li><a href="http://www.stuffandnonsense.co.uk/">Stuffand Nonsense</a></li> 
	<li><a href="http://www.hicksdesign.co.uk/journal/">Hicks Design</a></li> 
	<li><a href="http://www.clagnut.com/">Clagnut</a></li> 
	<li><a href="http://www.htmldog.com/">HTML Dog</a></li> 
	<li><a href="http://adactio.com/journal/">Adactio</a></li> 
	<li><a href="http://www.allinthehead.com/">All In The Head</a></li> 
	<li><a href="http://www.markboulton.co.uk/journal/">Mark Boulton</a></li> 
	<li><a href="http://www.ian-lloyd.com/">Ian Lloyd</a></li> 
</ul>

ul {
	list-style:none;
} 
li {
	margin: 5px 0;
} 
li a {
	display: block; 
	width:300px; 
	height: 30px; 
	line-height: 30px; 
	color: #000; 
	text-decoration: none; 
	background:#94B8E9 url(images/visited.gif) no-repeat left top; 
	text-indent: 10px;
} 
li a:visited { 
	background-position: right top; 
}

（11）CSS工具提示

<p> 
	<a href="http://www.andybudd.com/" class="tooltip">Andy Budd
		<span> (This website rocks) </span>
	</a>is a webdeveloper basedin Brighton England. 
</p>

a.tooltip { 
	position: relative; 
} 
a.tooltip span { 
	display: none; 
} 
a.tooltip:hover{ 
	font-size: 100%;
} 
a.tooltip:hover span { 
	display:block; 
	position:absolute; 
	top:1em; 
	left:2em; 
	padding: 0.2em 0.6em; 
	border:1px solid #996633;
	background-color:#FFFF66; 
	color:#000;
}

5、 CSS 构造表格

（1）简单表格

table { 
	width:auto; 
	border-collapse:collapse; 
	margin-left:20px; 
	border:1px solid black; 
} 
td,th { 
	width:50px; 
	border:1px solid black; 
	padding:5px; 
	background:gold; 
	text-align:center; 
	vertical-align:middle; 
	text-indent:5px; 
}

1	2	3	4	5	6
7	8	9	10	11	12

1	2
1	8	9	10	11	12

（2）行组和列组

table.example1 thead { 
	background:orange; 
	color:black; 
} 
table.example1 tbody { 
	background:gold; 
	color:black; 
} 
table.example1 tfoot { 
	background:firebrick; 
	color:white; 
}
*.col1 { 
	background:wheat; 
} 
*.col2 { 
	background:gold; 
} 
*.col3 { 
	background:orange;
} 
 *.col4 { 
	background:tomato; 
} 
 *.col5 { 
	background:firebrick; 
} 
 *.col6 { 
	background:black; 
	color:white; 
 }

1	2	3	4	5	6
7	8	9	10	11	12
13	14	15	16	17	18

1	2
1	8	9	10	11	12

（3）表格选择符

1	2	3	4	5	6
7	8	9	10	11	12
13	14	15	16	17	18

（4）分隔的边框

table { 
	border-collapse:separate; 
}
td,th { 
	width:50px; 
	padding:5px; 
	text-align:center; 
	vertical-align:middle; 
	background:gold; 
	text-indent:5px; 
}
.boxed-table { 
	border:1px solid black; 
}
.boxed-cells td { 
	border:1px solid black; 
}
.boxed-cells td.x { 
	border:none; 
}

1	2-3
1	7	8			11

1	2-3
1	7	8			11

1	2-3
1	7	8			11

（5）重复的边框

table { 
	border-collapse:collapse; 
}
td,th { 
	width:50px; 
	padding:5px; 
	text-align:center; 
	vertical-align:middle; 
	background:gold; 
	text-indent:5px; 
}
.boxed-table { 
	border:1px solid black; 
}
.boxed-cells td { 
	border:1px solid black; 
}
.boxed-cells td.x { 
	border:none; 
}

1	2-3
1	7	8			11

1	2-3
1	7	8			11

1	2-3
1	7	8			11

（6）隐藏和删除单元格、行和列

table { 
	border-collapse:separate; 
} 
td,th { 
	width:50px; 
	padding:5px; 
	text-align:center; 
	vertical-align:middle; 
	background:gold; 
	text-indent:5px; 
	border:1px solid black; 
}
.hidden { 
	visibility:hidden; 
}
.delete { 
	display:none; 
}

1	2	3	4
5	6	7	8

（7）垂直对齐数据

.x {
	vertical-align:middle;
}

6、CSS构造表单

（1）表单标签的使用

<label for="name">姓名: <input type="text" name="name" id="name"/></label>

（2）去掉默认的表单间隔

form { 
	margin: 0; 
	padding: 0; 
}

（3）给文本框添加漂亮的边框

input,textarea { 
	border: 3px double #333; 
}

（4）给下拉菜单设置背景色

select { 
	background:red; 
}

（5）给文本区域添加滚动条

textarea { 
	SCROLLBAR-FACE-COLOR: #333; 
	SCROLLBAR-HIGHLIGHT-COLOR: #666; 
	SCROLLBAR-SHADOW-COLOR: #333; 
	SCROLLBAR-3DLIGHT-COLOR: #999; 
	SCROLLBAR-ARROW-COLOR: #999;
	SCROLLBAR-TRACK-COLOR: #000; 
	SCROLLBAR-DARKSHADOW-COLOR: #000;
}

（6）表单外边框设置 fieldset legend

fieldset { 
	margin:0 0 10px 0; 
	padding: 5px; 
	border: 1px solid #333; 
}
legend { 
	background-color: #ddd; 
	margin: 0; 
	padding: 5px; 
	border-style: solid; 
	border-width: 1px; 
	border-color: #fff #aaa #666 #fff; 
}
fieldset { 
	background: #ddd; 
}

（7）结构化表单布局

<form id="regForm"> 
	<fieldset> 
		<legend>登陆信息</legend> 
		<div class="dataArea frist"> 
			<label for="username">用户名：<input type="text" id="username" class="input" />		</label> 
		</div> 
		<div class="dataArea"> 
			<label for="password">密码：<input type="text" id="password" class="input" /></label>
		</div> 
		<div class="dataArea"> 
			<label for="passwordVerify">确认密码：<input type="text" id="passwordVerify" class="input" /></label> 
		</div> 
	</fieldset> 
	<fieldset> 
		<legend>个人信息</legend> 
		<div class="dataArea frist"> 
			<label for="nickname">昵称：<input type="text" id="nickname" /></label>
		</div> 
		<div class="dataArea"> 
			<label for="email" class="hint">电子邮件：<input type="text" id="email" /></label> 
		</div> 
		<div class="subArea"> 
			<input type="submit" value="注册 " /> 
			<input type="button" value="返回" /> 
		</div> 
	</fieldset> 
</form>

#regForm fieldset { 
	padding:0 20px 10px; 
	border:0; 
	border-top:1px #d0d0bf solid; 
} 
#regForm legend { 
	padding:0 10px; 
	font-weight:bold; 
} 
#regForm .dataArea { 
	padding:2px 0; 
} 
#regForm .frist { 
	padding:8px 0 2px; 
} 
#regForm .subArea input { 
	padding:1px 4px; 
} 
#regForm label { 
	width:110px; 
	text-align:right; 
	float:left; 
}

7、布局

（1）流体浮动布局
规格：当视窗变化时跟着变化。
采用：浮动布局。
兼容：兼容当前主流浏览器。
（2）流体定位布局
规格：当视窗变化时跟着变化。
采用：定位布局。
兼容：兼容当前主流浏览器。
（3）固定浮动布局
规格：固定大小，不能随着视窗改变。
采用：浮动布局。
兼容：兼容当前主流浏览器。
（4）固定定位布局
规格：固定大小，不能随着视窗改变。
采用：定位布局。
兼容：兼容当前主流浏览器。

魏晓蕾博客专家

发布了219 篇原创文章 · 获赞 603 · 访问量 129万+

他的留言板关注