CSS构造模型与动态布局

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/gongxifacai_believe/article/details/91372149

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

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

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

7

8

11

1

2-3

7

8

11

1

2-3

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

7

8

11

1

2-3

7

8

11

1

2-3

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)固定定位布局 规格:固定大小,不能随着视窗改变。 采用:定位布局。 兼容:兼容当前主流浏览器。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券