CSS 精華

歪SIR 2011-07-24

展開全文

DIV 上下居中用 line-height

Html代碼

<style type="text/css">
div.v-align {
line-height: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<div class="v-align">
垂直居中
</div>

例子1:

Html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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>

清除瀏覽器默認樣式

1.用其他有名的庫來清除（如：YUI)

2.自已清除
如：
* {
padding: 0;
margin:0;
}

讓A支持所有瀏覽器

Html代碼

<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." class="agideo">捷道數(shù)碼</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:

Html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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." class="agideo">捷道數(shù)碼</a>
<a href="http://www.google.com" class="google">Google</a>
</body>
</html>

A 偽類定義順序記憶法
LoVe:HAte(愛恨)

IMG vertical-align

vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length

baseline :默認值。將支持 valign 特性的對象的內(nèi)容與基線對齊

sub 垂直對齊文本的下標
super 垂直對齊文本的上標

top : 將支持 valign 特性的對象的內(nèi)容對象頂端對齊
text-top : 將支持 valign 特性的對象的文本與對象頂端對齊

middle : 將支持 valign 特性的對象的內(nèi)容與對象中部對齊
bottom : 將支持 valign 特性的對象的內(nèi)容與對象底端對齊

text-bottom : 將支持 valign 特性的對象的文本與對象頂端對齊
length : 由浮點數(shù)字和單位標識符組成的長度值 | 百分數(shù)?？蔀樨摂?shù)。定義由基線算起的偏移量?；€對于數(shù)值來說為0，對于百分數(shù)來說就是0%。請參閱長度單位。目前IE尚未實現(xiàn)此參數(shù)

例子3:

Html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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./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>

垂直 Margin 疊加
例子4:

Html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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:

Html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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./upload/attachment/162316/eee477c8-1fcc-3a41-874f-065f0d65a422.jpg) no-repeat 20px 20px;
}
#div2 {
background: urlhttp://dl./upload/attachment/162316/eee477c8-1fcc-3a41-874f-065f0d65a422.jpg) no-repeat 20% 20%;
}
#div3 {
background: url(http://dl./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>

Float 占地問題

1.父子TAG都Float以父能包含子

Html代碼

<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:

Html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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

Html代碼

<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>
lt;div class="parent">
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="child">
child
</div>
<div class="clear"></div>
</div>

例子7:

Html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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>