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

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

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,

blockquote,th,td {margin:; padding:; }

table { border-collapse:collapse; border-spacing:; }

fieldset,img { border:; }

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:; }

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

html {font-size: 62.5%;}

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

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

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

<div id='parent'>

<div id='son'></div>

</div>

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

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

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

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

div.popup { margin-top: -200px; margin-left: -250px;}

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

5.可以重复利用的规则

.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;}

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

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

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

<div id=”navbar”>

<ul>

<li><a href=”http://www.peakflowdesign.com”>Peakflow Design</a></li>

<li><a href=”http://www.google.com”">Google</a></li>

<li><a 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的form表单 

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

<form action=”form.php” method=”post”>

<fieldset>

<legend>Personal Information</legend>

<div>

<label for=”first_name”>First Name:</label>

<input type=”text” name=”first_name” id=”first_name” size=”10″ value=”" />

</div>

<div>

<label for=”last_name”>Last Name:</label>

<input type=”text” name=”last_name” id=”last_name” size=”10″ value=”" />

</div>

<div>

<label for=”postal”>Zip/Postal Code:</label>

<input type=”text” name=”postal” id=”postal” size=”10″ value=”" />

</div>

</fieldset>

</form>

CSS:

form div {clear:left;display:block;width:400px;zoom:;margin:5px 0 0 0;padding:1px 3px;}

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：

<body>

<div id=”nonFooter”>

<div id=”content”> *Place all page content here* </div>

</div>

<div id=”footer”> *Place anything you want in your footer here*

</div>

</body>

CSS:

html, body { height: 100%; }

#nonFooter { position: relative; min-height: 100%; }

* html #nonFooter { height: 100%; }

#content { padding-bottom: 9em; }

#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. ROC曲线和PR曲线

    转自:http://www.zhizhihu.com/html/y2012/4076.html分类.检索中的评价指标很多,Precision.Recall.Accuracy.F1.ROC.PR Cur ...

  2. cf D. Dima and Trap Graph

    http://codeforces.com/contest/366/problem/D 遍历下界,然后用二分求上界,然后用dfs去判断是否可以. #include <cstdio> #in ...

  3. js深入研究之克隆，属性，数组，对象，函数

    代码 <script type="text/javascript"> /* 克隆原型得到对象 */ function clone(object) { function ...

  4. 【转】64位win7硬盘安装64位ubuntu 13.04

    原文网址:http://www.cnblogs.com/jiangz/p/3751617.html 最近本来是准备通过升级的方式把ubuntu从12.04升级到12.10再升级到13.04的,但是升级 ...

  5. 定时关机命令－shutdown

    定时关机命令-shutdown 一般会用到的定时关机命令有两种: Shutdown -s -t 3600 1小时后自动关机(3600秒) at 12:00 Shutdown -s 12:00自动关闭计 ...

  6. JVM基础和调优（一）

    最近的项目中,出现了内存和性能的问题,需要优化,所以趁着这个机会,把自己关于java虚拟机的东整理一下,不对的地方,欢迎指出. 数据类型,因为在java的优化的过程中,检测到的数据类型一般比较的基础, ...

  7. Best Cow Line (POJ 3617)

    题目: 给定长度为N的字符串S,要构造一个长度为N的字符串T.起初,T是一个空串,随后反复进行下列任意操作. ·从S的头部删除一个字符,加到T的尾部 ·从S的尾部删除一个字符,加到T的尾部 目标是要构 ...

  8. java算法之身份证号码验证

    调用时直接 new IDCard().verify(身份证id);就可以了 实现代码如下: public class IDCard { private String _codeError; //wi ...

  9. Java常见内存溢出异常分析(OutOfMemoryError)

    原文转载自:http://my.oschina.net/sunchp/blog/369412 1.背景知识 1).JVM体系结构 2).JVM运行时数据区 JVM内存结构的相关可以参考: http:/ ...

  10. python数据类型-布尔值

    布尔是计算机里最基本的判断单位,布尔只有两个值:真或假,即True False,也就是1或0. 在以后学习流程控制时会经常用到布尔值. 先来看简单的小例子: >>> 1+1 > ...