10种有用的CSS技巧

简介:

 

  1. 重置浏览器的默认设置

          首先将以下代码加到你的全局css文件中:

/* 1.Reset browser defaults then reset the browser font size */
            body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
            blockquote,th,td 
{ margin : 0 ;  padding : 0 ;   }
            table 
{  border-collapse : collapse ;  border-spacing : 0 ;   }
            fieldset,img 
{  border : 0 ;   }
            address,caption,cite,code,dfn,em,strong,th,var 
{  font-style : normal ;  font-weight : normal ;   }
            ol,ul 
{  list-style : none ;   }
            caption,th 
{  text-align : left ;   }
            h1,h2,h3,h4,h5,h6 
{  font-size : 100% ;  font-weight : normal ;   }
            q:before,q:after 
{  content : ;   }
            abbr,acronym 
{  border : 0 ;   }
            html 
{ font-size :  62.5% ; }

 

然后,我们把字体大小font-size设为10px如:

 

html  { font-size :  62.5% ; }

 

这样我们就比较容易的通过em单位来设置页面字体的大小了,e.g

 

ContractedBlock.gif Code

 

     2.水平居中(仅限固定宽度)

          

     这个我想大家都会知道的,如:

    

div#container  { margin :  0 auto ; }

 

 

     3.充分利用position中的absolute和relatively

 

     4.居中,还是居中(纵横通杀)

 

     

div.popup  {  height : 400px ;  width : 500px ;  position :  absolute ;  top :  50% ;  left :  50% ; }
div.popup 
{  margin-top :  -200px ;  margin-left :  -250px ; }

 

     Memo:

               ·必须指定width和height的固定值;

               ·position值为absolute;

               ·分别指定top与left为50%;

               ·设置margin-top和margin-left分别height和width的负值的一半,也可以简写为:margin:-200px 0 0 -250px;

 

     5.CSS也能复用

 

      建立你的global css rules,充分在任何可以用到的页面用它吧,e.g

     

.left  { float :  left ; }
.right 
{ float :  right ; }
img .left 
{  border : 2px solid #aaaaaa ;  margin :  0 10px 0 0 ; }
img .right 
{  border : 2px solid #aaaaaa ;  margin :  0 0 0 10px ;  padding :  1px ; }

 

 

     6.IE6的margin bug

     

     当你设置div元素的float属性并指定了margin-left属性,在IE6或以下版本浏览的时候你可以会太跌眼镜,IE6怎么给你愉愉地加了margin的值呢?

     解决方法:把div设为内联的就行了 e.g

 

     

div  { float : left ; margin : 40px ; display : inline ; }

 

 

     7.简单的导航菜单

     xhtml:

     

 

< div  id ="navbar" >
        
< ul >
        
< li >< href =http://www.peakflowdesign.com > Peakflow Design </ a ></ li >
        
< li >< href =http://www.google.com > Google </ a ></ li >
        
< li >< href ="http://zenhabits.net/" > Zen Habits </ a ></ li >
        
</ ul >
        
</ div >

 

     CSS:

          

            #navbar ul li  { display : inline ; margin : 0 10px 0 0 ; }
            #navbar ul li a 
{ color :  #333 ; display : block ; float : left ; padding : 5px ; }
            #navbar ul li a:hover 
{ background : #eee ; color : black ; }

 

 

     8. 尽量减少使用table来布局

 

     9.页面元素可以有多个class, e.g

 

     

< div  class ="regColor bigSize" > I am a reg color of font width big size! </ div >

 

 

     orginal article:http://www.peakflowdesign.com/design/10-useful-css-tricks-to-conquer-the-world/

 

 

转载请注明出处[ http://samlin.cnblogs.com/] 
作者赞赏
 


刚做的招标网: 八爪鱼招标网 请大家多意见
分类:  Web2.0

本文转自Sam Lin博客博客园博客,原文链接:http://www.cnblogs.com/samlin/archive/2008/08/09/1264491.html,如需转载请自行联系原作者
目录
相关文章
|
8天前
|
XML 编解码 前端开发
CSS语言的基本内容
CSS语言的基本内容
|
8天前
|
XML 前端开发 JavaScript
css的作用
【4月更文挑战第22天】css的作用
15 7
|
前端开发
【CSS详解】一文掌握CSS基础用法(下)
【CSS详解】一文掌握CSS基础用法(下)
【CSS详解】一文掌握CSS基础用法(下)
|
前端开发 Java SEO
【CSS详解】一文掌握CSS基础用法(上)
【CSS详解】一文掌握CSS基础用法(上)
150 0
|
前端开发 容器
CSS补充
CSS补充
106 0
|
前端开发
CSS 学习4.四种css导入方式
CSS 学习4.四种css导入方式
CSS 学习4.四种css导入方式
|
弹性计算 前端开发
技巧篇:CSS高级技巧详解
  display -- block;(转换为块元素&& 显示) none(隐藏 && 不保留原来的位置) -- 重要!   visibility -- visible(显示) hidden (隐藏 && 保留原来的位置 )   复习:overflow:hidden; 1.之前解决父子关系垂直嵌套的合并塌陷问题。2.清除浮动
116 0
|
前端开发 JavaScript
CSS-Next : CSS预处理器简单写法的替代者, 想了解下么?
借助相关的插件我们可以把新的特性降级主流浏览器可以识别的状态(比如CSS3模拟) 但里面的一些特性,折腾了下发现基本可以满足开发了(代替CSS预处理器SASS,LESS); 因为大多数人用预处理器最多的几个特性无非如下: 继承,嵌套写法, 全局变量,计算颜色 当然,这不是说sass/less 不够好,相反它们可以做更多复杂的工作,逻辑运算和条件判断这些;
202 0
|
前端开发