css使用技巧总结

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

  

  

发布了29 篇原创文章 · 获赞 1 · 访问量 8032

猜你喜欢

转载自blog.csdn.net/binfire/article/details/45827421
今日推荐