css使用技巧总结

来源：互联网发布：游戏编程师工资高吗编辑：程序博客网时间：2024/06/03 17:16

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

0 0