[size=medium][b]DIV 上下居中用 line-height[/b][/size]
例子1:
[b][size=small]清除浏览器默认样式[/size][/b]
1.用其他有名的库来清除(如:YUI)
2.自已清除
如:
* {
padding: 0;
margin:0;
}
[b][size=small]让A支持所有浏览器[/size][/b]
例子2:
[size=large][color=red][b]A 伪类定义顺序记忆法
LoVe:HAte(爱恨)[/b][/color][/size]
[b][size=small]IMG vertical-align[/size][/b]
vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
baseline :默认值。将支持 valign 特性的对象的内容与基线对齐
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top : 将支持 valign 特性的对象的内容对象顶端对齐
text-top : 将支持 valign 特性的对象的文本与对象顶端对齐
middle : 将支持 valign 特性的对象的内容与对象中部对齐
bottom : 将支持 valign 特性的对象的内容与对象底端对齐
text-bottom : 将支持 valign 特性的对象的文本与对象顶端对齐
length : 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0,对于百分数来说就是0%。请参阅 长度单位 。目前IE尚未实现此参数
例子3:
[b][size=small]垂直 Margin 叠加[/size][/b]
例子4:
[*]Background position
例子5:
[b][size=small]Float 占地问题[/size][/b]
1.父子TAG都Float以父能包含子
例子6:
2.最后一个子TAG后加一clear的无语义tag
例子7:
<style type="text/css">
div.v-align {
line-height: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<div class="v-align">
垂直居中
</div>
例子1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
<style type="text/css">
div.v-align {
line-height: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<!--[if IE]>
<![endif]-->
</head>
<body>
<div class="v-align">
垂直居中
</div>
</body>
</html>
[b][size=small]清除浏览器默认样式[/size][/b]
1.用其他有名的库来清除(如:YUI)
2.自已清除
如:
* {
padding: 0;
margin:0;
}
[b][size=small]让A支持所有浏览器[/size][/b]
<style type="text/css">
a.agideo:link, a.agideo:visited {
font-weight: bold;
text-decoration: none;
color: green;
}
a.agideo:hover, a.agideo:active {
font-weight: bold;
text-decoration: none;
color: red;
}
</style>
<a href="http://www.agideo.com" class="agideo">捷道数码</a>
<style type="text/css">
a.google:hover, a.google:active {
font-weight: bold;
text-decoration: none;
color: red;
}
a.google:link, a.google:visited {font-weight: bold;
text-decoration: none;
color: green;
}
</style>
<a href="http://www.google.com" class="google">Google</a>
例子2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
<style type="text/css">
a.agideo:link, a.agideo:visited {
font-weight: bold;
text-decoration: none;
color: green;
}
a.agideo:hover, a.agideo:active {
font-weight: bold;
text-decoration: none;
color: red;
}
a.google:hover, a.google:active {
font-weight: bold;
text-decoration: none;
color: red;
}
a.google:link, a.google:visited {
font-weight: bold;
text-decoration: none;
color: green;
}
</style>
<!--[if IE]>
<![endif]-->
</head>
<body>
<a href="http://www.agideo.com" class="agideo">捷道数码</a>
<a href="http://www.google.com" class="google">Google</a>
</body>
</html>
[size=large][color=red][b]A 伪类定义顺序记忆法
LoVe:HAte(爱恨)[/b][/color][/size]
[b][size=small]IMG vertical-align[/size][/b]
vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
baseline :默认值。将支持 valign 特性的对象的内容与基线对齐
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top : 将支持 valign 特性的对象的内容对象顶端对齐
text-top : 将支持 valign 特性的对象的文本与对象顶端对齐
middle : 将支持 valign 特性的对象的内容与对象中部对齐
bottom : 将支持 valign 特性的对象的内容与对象底端对齐
text-bottom : 将支持 valign 特性的对象的文本与对象顶端对齐
length : 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0,对于百分数来说就是0%。请参阅 长度单位 。目前IE尚未实现此参数
例子3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
<style type="text/css">
div.v-align {
border: 1px solid red;
line-height: 40px;
float: left;
font-size: 11px;
height: 40px;
}
div.v-align img.only-img {
float:left;
}
div.v-align.has-img {
padding-top: 10px;
height: 30px;
}
div.v-align.has-img-and-text img.has-text {
vertical-align: -4px !important;
vertical-align: middle;
margin-top: -3px !important;
margin-top: 0px;
}
div.v-align.has-img-and-text {
padding-top: 0px !important;
padding-top: 10px;
height: 40px !important;
height: 30px;
}
</style>
<!--[if IE]>
<![endif]-->
</head>
<body>
<div class="v-align">
正常
</div>
<div class="v-align has-img">
<img src="http://dl.iteye.com/upload/attachment/162320/1f89f269-580c-304b-975a-e6004b9893ce.png" class="only-img" />
</div>
<div class="v-align has-img-and-text">
<img src="./accept.png" align="absmiddle" class="has-text" />有图片有字
</div>
</body>
</html>
[b][size=small]垂直 Margin 叠加[/size][/b]
例子4:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
<style tyep="text/css">
body, div {
padding:0;
margin:0;
}
div, span {
padding: 10px;
margin: 10px;
border: 10px solid #000;
}
#div1 {
background-color: red;
}
#div2 {
background-color: green;
}
#div3 {
background-color: blue;
}
</style>
<!--[if IE]>
<![endif]-->
</head>
<body>
<div id="div1">
<div>div1</div>
</div>
<div id="div2">
<div>div2</div>
</div>
<div id="div3">
<span>span1</span>
<span>span2</span>
</div>
</body>
</html>
[*]Background position
例子5:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
<style tyep="text/css">
body, div {
padding:0;
margin:0;
}
div {
border:1px solid #ccc;
height: 200px;
width: 300px;
}
#div1 {
background: url(http://dl.iteye.com/upload/attachment/162316/eee477c8-1fcc-3a41-874f-065f0d65a422.jpg) no-repeat 20px 20px;
}
#div2 {
background: urlhttp://dl.iteye.com/upload/attachment/162316/eee477c8-1fcc-3a41-874f-065f0d65a422.jpg) no-repeat 20% 20%;
}
#div3 {
background: url(http://dl.iteye.com/upload/attachment/162318/8be0e495-2d0a-3ec2-9f5f-7465eb8c23ae.jpg) no-repeat 20% 20%;
}
</style>
<!--[if IE]>
<![endif]-->
</head>
<body>
<div id="div1">
20px
</div>
<br/>
<div id="div2">
20%
</div>
<br/>
<div id="div3">
20%
</div>
</body>
</html>
[b][size=small]Float 占地问题[/size][/b]
1.父子TAG都Float以父能包含子
<style type="text/css">
div.parent {
border: 1px solid red;
width: 600px;
float: left; /* For round child */
}
div.child {
border: 1px solid green;
float: left;
}
</style>
<div class="parent">
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
</div>
例子6:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
<style type="text/css">
div.parent {
border: 1px solid red;
width: 600px;
float: left; /* For round child */
}
div.child {
border: 1px solid green;
float: left;
}
</style>
<!--[if IE]>
<![endif]-->
</head>
<body>
<div class="parent">
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
</div>
</body>
</html>
2.最后一个子TAG后加一clear的无语义tag
<style type="text/css">
div.parent {
border: 1px solid red;
width: 600px;
}
div.child {
border: 1px solid green;
float: left;
}
div.clear {
clear: both;
}
</style>
<div class="parent">
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="clear"></div>
</div>
例子7:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
<style type="text/css">
div.parent {
border: 1px solid red;
width: 600px;
}
div.child {
border: 1px solid green;
float: left;
}
div.clear {
clear: both;
}
</style>
<!--[if IE]>
<![endif]-->
</head>
<body>
<div class="parent">
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="clear"></div>
</div>
</body>
</html>