css使用技巧总结

最新推荐文章于 2025-05-05 22:57:28 发布

原创最新推荐文章于 2025-05-05 22:57:28 发布 · 357 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了CSS通用样式的设置方法，包括清除默认样式、布局元素的使用技巧及减少HTML元素的方法。此外，还详细讲解了针对不同版本IE浏览器的CSS Hack解决方案。

1.css通用样式

 1 @charset "gb2312"; 3 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ global ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 4 * { margin:0; padding:0;}
 5 html,body { height:100%;}
 6 body { background:#d4e3eb; font-family:"微软雅黑","宋体"; position:relative;}
 7 ul li, ol li { list-style:none;}
 8 h1,h2,h3,h4,h5,h6,em { font-weight:normal;}
 9 table { border-collapse:collapse;border-spacing:0}}
10 fieldset,img { border:0; vertical-align:middle;}
11 a { color:#2f3b54; text-decoration:none;}
12 a:focus { outline:0;}
13 a:focus,a:hover { color:#c00;}
14 input,textarea { font-family:"微软雅黑","Arial";}
15 p{word-wrap:break-word}
16 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
17 .clearfix { zoom:1;} /* 清除浮动 */
18 .clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both;}
19 .l { float:left;}
20 .r { float:right;}
21 .c { clear:both;}
22 .block { display:block;}
23 .none { display:none;}

2.减少Div中的html元素

　　常用的布局元素包括：div,h1,h2,h3,h4,h5,p,label,span,em,strong,ul,li;使用div作为主要的容器,其余元素填充div里面的内容

　　布局方式：

1   <div> 
2   <h1></h1>
3   <p><span></span>xxx</p>
4   </div>

　　取代

<div>
<div id="div1"/>
<div id="div2"/>    
</div>

3.Css Hark问题

<head>
    <title></title>
    <!--IE条件注释法-->
    <!--[if IE 6]>
        <link type="text/css" href="#" rel="stylesheet"/>
    <![endif]-->
    
    <!--如果大于ie6-->
    <!--[if gt IE 6]>
          <link type="text/css" href="#" rel="stylesheet"/>
    <![endif]-->

    <style type="text/css">
        .test{width:60px;height:50px;border:1px solid red;} /* ie6,7,8,9*/
        /*选择符前缀法*/
        *html .test{width:70px;}  /* ie6*/
        *+html .test{width:80px;}  /*ie7*/
        /*样式属性前缀法*/
        .test1{width:60px;*width:70px;_width:80px;height:50px;border:1px solid green;} /* *ie6,ie7*/
        /* _ie6*/
    </style>
</head>
<body>
    <div class="test"></div>
    <div class="test1"></div>
</body>
</html>
<!--[if IE 6]>
    <script type="text/javascript">
        alert("test");
    </script>
<![endif]-->