1.重置浏览器的字体大小 

重置浏览器的默认值 ，然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ，如果你不想下载9MB的文件，代码如下：

  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
  2. blockquote,th,td {margin:; padding:; }
  3. table { border-collapse:collapse; border-spacing:; }
  4. fieldset,img { border:; }
  5. address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
  6. ol,ul { list-style:none; }
  7. caption,th { text-align:left; }
  8. h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
  9. q:before,q:after { content:”; }
  10. abbr,acronym { border:; }

其次，我们重设浏览器字体的大小为10像素，使用如下：

html {font-size: 62.5%;}

这个大小基本合适，然后您可以根据自己的需要调整大小，如 标题1为120像素:
h1 {font-size: 2em;}

2.设置水平居中
大多数的网站目前都是固定宽度的。CSS代码如下：
div#container {margin: 0 auto;}

3.控制位置：绝对位置，相对位置
假如有两个div

  1. <div id='parent'>
  2. <div id='son'></div>
  3. </div>

div有left和top属性,是用来定位的.

如果内层的div的position属性是absolute.那他就是相对于文档的左上角的位置..
如果内层的div(id为son的那个)position属性为relative,那它的left和top值就是相对于外层的div的左上角的距离.

4.将重要元素放置在屏幕中央
如果你希望将您想要的东西放在最中央，可以使用以下CSS：

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

您必须明确的指定宽度和高度，再把top和left属性设为他们的一半，这样就可以是这个部分回到屏幕的中心。

5.可以重复利用的规则

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

设置自己的CSS样式表，就可以在您需要的时候直接的添加标记即可。

6. 解决IE6 的浮动元素的双倍边距问题
对一个div设置了float:left 和 margin-left:100px 那么在IE6中，这个bug就会出现。您只需要多设置一个display即可，代码如下：
div {float:left;margin:40px;display:inline;}

7.简单的导航菜单
在您的设计中预设一个导航栏是非常有益的。可以让别人对你网页的主要内容有一个大致的了解。第一次来的XHTML：

  1. <div id=”navbar”>
  2. <ul>
  3. <li><a href=”http://www.peakflowdesign.com”>Peakflow Design</a></li>
  4. <li><a href=”http://www.google.com”">Google</a></li>
  5. <li><a href=”http://zenhabits.net/”>Zen Habits</a></li>
  6. </ul>
  7. </div>

CSS代码：

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

8.不使用table的form表单 

正如我们现在进行网站设计的table-free，把重点是放在使用DIVs上。不再对表的列和域进行约束，所以我们需要一些好用的CSS，在JeddHowden.com 发现
XHTML:

  1. <form action=”form.php” method=”post”>
  2. <fieldset>
  3. <legend>Personal Information</legend>
  4. <div>
  5. <label for=”first_name”>First Name:</label>
  6. <input type=”text” name=”first_name” id=”first_name” size=”10″ value=”" />
  7. </div>
  8. <div>
  9. <label for=”last_name”>Last Name:</label>
  10. <input type=”text” name=”last_name” id=”last_name” size=”10″ value=”" />
  11. </div>
  12. <div>
  13. <label for=”postal”>Zip/Postal Code:</label>
  14. <input type=”text” name=”postal” id=”postal” size=”10″ value=”" />
  15. </div>
  16. </fieldset>
  17. </form>

CSS:

  1. form div {clear:left;display:block;width:400px;zoom:;margin:5px 0 0 0;padding:1px 3px;}
  2. form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}

9.让footer总是停留在页面的底部 

在网页的底部总是保留着公司的版本信息，如何是这部分信息来实现呢？这是一个很古老的技术，这都要归功于The Man in Blue 。
XHTML：

  1. <body>
  2. <div id=”nonFooter”>
  3. <div id=”content”> *Place all page content here* </div>
  4. </div>
  5. <div id=”footer”> *Place anything you want in your footer here*
  6. </div>
  7. </body>

CSS:

  1. html, body { height: 100%; }
  2. #nonFooter { position: relative; min-height: 100%; }
  3. * html #nonFooter { height: 100%; }
  4. #content { padding-bottom: 9em; }
  5. #footer { position: relative; margin-top: -7.5em; }

10.在同一元素上使用多种类 

随着有用的功能越来越多的，大多数的人都忽略了内部CSS的选择。一个元素可以套用很多的类，例如：
.red {color: red;}
.bold {font-weight: strong;}

我们可以运用它：
<p class=”red bold”>This text will be red yet also bold!</p>

希望这些能对您有所帮助！

最常用的CSS技巧收集笔记的更多相关文章

  1. Java 常用类库与技巧【笔记】

    Java 常用类库与技巧[笔记] Java异常体系 Java异常相关知识 Java在其创立的时候就设置了比较有效的处理机制,其异常处理机制主要回答了三个问题:what,where,why what表示 ...

  2. 一些常用的 CSS 技巧和知识点

    作为一名前端工程师,CSS 是必备技能之一,然而在日常开发中,总有那么些时候,面对着炫酷的效果图,脑子里的 CSS 属性却一片空白,于是只能借助搜索引擎,在一堆复杂的介绍中找到需要的内容复制粘贴.有没 ...

  3. css技巧收集

    1. 使用 :not() 为导航添加/取消边框 传统的方法为导航栏添加边框: /* add border */ .nav li { border-right: 1px solid #666; } /* ...

  4. CSS技巧收集——巧用滤镜

    最近暴雪一款叫<守望先锋>的游戏火到不行,身边很多人都深受其毒害,虽然博主自己没有买(穷),但是耳濡目染也了解了个大概. 由于之前大致学习了一下 css 滤镜的各种用法,所以心血来潮结合二 ...

  5. CSS技巧收集——毛玻璃效果

    先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的 ...

  6. 20 个常用的 CSS 技巧

    1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate {    filter: grayscale(100%);    -webkit-filter: g ...

  7. 常用的 CSS 技巧

    1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(%); -webkit-filter: grayscale( ...

  8. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  9. python3.4学习笔记(六) 常用快捷键使用技巧，持续更新

    python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...

随机推荐

  1. Scala学习笔记--特质trait

    http://outofmemory.cn/scala/scala-trait-introduce-and-example 与Java相似之处 Scala类型系统的基础部分是与Java非常相像的.Sc ...

  2. WPF异常“调用线程无法访问此对象,因为另一个线程拥有该对象 ”

    WPF中在对界面进行操作的时候,可能会遇到"调用线程无法访问此对象,因为另一个线程拥有该对象"异常,这是因为WPF中只有UI线程才能操作UI元素,非UI线程要访问UI时就会报异常了 ...

  3. 记录终端输出的LOG到文件

    先要说明为什么要记录终端会话,因为常会遇到这样的情况,终端是有缓存大小限制的,当在终端打印的消息超出缓存范围,它前面的打印消息就自动丢失了,这对于我们调试程序会造成障碍,所以有记录完整终端打印消息的必 ...

  4. PYTHON线程知识再研习B

    使用threading.Thread模块,也有两种使用方法,可以用类,也可以在实例化对象中传入函数或类实例. #!/usr/bin/env python # -*- coding: utf-8 -*- ...

  5. void (*fun)(void);

    2440test程序中的Main.c中在结构体中有这么一句: void (*fun)(void); 后查阅资料得知这句代码的意思是: 定义一个函数指针. 比如:定义一个指向函数的指针,该函数有一个整形 ...

  6. EE就业最好的方向是转CS，其次是VLSI/ASIC DESIGN & VERIFICATION

    Warald在2012年写过一篇文章<EE现在最好就业的方向是VLSI/ASIC DESIGN VERIFICATION>,三年过去了,很多学电子工程的同学想知道现在形势如何. 首先,按照 ...

  7. qmake使用实践：包含动态库的Qt4工程

    文章来源:http://blog.csdn.net/dbzhang800/article/details/6317006 本文是qmake的一个使用练习,是半年前所学的 分析与学习Qt Solutio ...

  8. PowerShell中调用外部程序和进程操作命令例子

    学习PowerShell,我们不指望通过C#编程去搞定所有事情,我们应该记住cmd.exe或者说批处理给我们留下的宝贵财富——通过调用外部程序去解决问题.调用了外部程序,势必就要对进程进行管理,这就是 ...

  9. libeXosip2(3) -- SIP messages and call control API

    SIP messages and call control API The SIP messages and call control API. More... Modules eXosip2 INV ...

  10. poj 1286 Necklace of Beads (polya（旋转+翻转）+模板)

      Description Beads of red, blue or green colors are connected together into a circular necklace of ...