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. HTML&CSS基础学习笔记1.6-html的文本操作标签

    文本也许是HTML里最常见的元素了,所以我们有必要对HTML的文本操作标签做下认识. 1. <em>,<i>内的文字呈现为倾斜效果: 2. <strong>,< ...

  2. 【转】对ARM堆栈的理解

    对ARM堆栈的理解 堆栈严格来说应该叫做栈,栈(Stack)是限定仅在一端进行插入或删除操作的线性表.因此,对栈来说,可以进行插入或删除操作的一端端称为栈顶(top),相应地,另一端称为栈底(bott ...

  3. Cassandra笔记--2. 安装

    1. 从apache官网下载Cassandra,我用的版本是2.1.8.压缩包解压,这里的目录是D:\cassandra\apache-cassandra-2.1.8 2. 配置环境变量  添加环境变 ...

  4. Swift 可选链-备

    在Swift程序表达式中会看到问号(?)和感叹号(!),它们代表什么含义呢?这些符号都与可选类型和可选链相关,下面来看看可选链. 可选链: 类图: 它们之间是典型的关联关系类图.这些类一般都是实体类, ...

  5. hdu Largest prime factor

    类似于素数打表. #include <cstdio> #include <cstring> #include <algorithm> #define maxn 10 ...

  6. leetcode: sortlist之四种方法

    原题链接:https://oj.leetcode.com/problems/sort-list/ 题目:空间复杂度为常数,时间复杂度为O(nlogn)的排序链表实现 方法一:第一想法是模拟数组的快速排 ...

  7. 在eclipse中创建web项目

    如何创建dynamic web project项目 本文的演示是从本地文件创建dynamic web project,从svn检出的同时创建dynamic web project于此类似.我们推荐使用 ...

  8. BZOJ2750: [HAOI2012]Road

    2750: [HAOI2012]Road Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 261  Solved: 113[Submit][Status ...

  9. 【转】Ubuntu重装，直接进win7，不进linux的解决方案（添加Ubuntu启动菜单）

    原文网址:http://my.oschina.net/u/1377657/blog/281875 本人重装了Ubuntu12.04.4 LTS, 将Ubuntu启动项放在了/boot分区里面,启动的时 ...

  10. 什么时候该使用NoSQL存储数据库？

    原文地址:http://www.jdon.com/39240 文章总结以下几点:1.频繁写,很少读统计数据,比如点击率,应该使用基于内存的in-memory的key/value存储数据库如Redis, ...