论坛首页 → Web前端技术论坛 →

CSS 精华-实用技巧

浏览 1986 次
锁定老帖子 主题：CSS 精华-实用技巧
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • jim.jin
  • 等级: 二星会员
  • 性别:
  • 文章: 0
  • 积分: 230
  • 来自: 温州
   发表时间：2009-10-29   最后修改：2010-01-13
CSS
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>




    • 描述: background position
    • 大小: 7.7 KB
    • 描述: background position 2
    • 大小: 2.8 KB
    • 描述: accept
    • 大小: 781 Bytes
    返回顶楼
             
    论坛首页 → Web前端技术版

    跳转论坛:
    Global site tag (gtag.js) - Google Analytics