CSS 精华-实用技巧

jim.jin

浏览: 30459 次
性别:
来自: 温州

最近访客更多访客>>

猪肉佬520

studyit

liuzhouqi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS IE Google XHTML HTML

DIV 上下居中用 line-height

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

清除浏览器默认样式

1.用其他有名的库来清除（如：YUI)

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

让A支持所有浏览器

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

A 伪类定义顺序记忆法
LoVe:HAte(爱恨)

IMG vertical-align

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>

垂直 Margin 叠加
例子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>

Float 占地问题

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>