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. A + B Problem,hdu-1000

    A + B Problem Problem Description Calculate A + B.   Input Each line will contain two integers A and ...

  2. Unity中Mecanim工作流

    Mecanim工作流可以被分解为3个主要阶段:1.资源的准备和导入这一阶段由美术师或动画师通过第三方工具来完成,例如Max或Maya.2.角色的建立主要有以下两种方式1)人形角色的建立.Mecanim ...

  3. FB是磁珠的符号

    本文来自:http://www.coofish.org/post/FB-cizhu.html今天实验室一哥们研究DSP电路图,发现图中有一个符号是FB,外形有点像电阻(R),但是不清楚是什么电子元器件 ...

  4. 自制单片机之九……写给对制做并口ISP下载线有疑惑的朋友

    一.器件的选用 制做并口ISP下载在网上有很多的电路和对应的PC端下载软件.很多人疑惑,不知该用哪张图,用哪个下载软件.我看了一下,采用的器件主要是74HC373.74HC541和74HC244.其实 ...

  5. DPI情况下处理

    1. 字体不要跟着变大小,那就要使用setPixe,不要使用setPointSize 2. 图片可设置QPixmap::setDevicePixelRatio http://doc.qt.io/qt- ...

  6. Qt在Windows下的三种编程环境搭建

    尊重作者,支持原创,如需转载,请附上原地址:http://blog.csdn.net/libaineu2004/article/details/17363165 从QT官网可以得知其支持的平台.编译器 ...

  7. inux xsel 拷贝复制命令行输出放在系统剪贴板上

    转载自:http://oldratlee.com/post/2012-12-23/command-output-to-clip 为什么要这么做?直接把命令的输出(比如 grep/awk/sed/fin ...

  8. netstat命令, netstat指令在windows和linux有什么不同

    查看当前tcp监听端口[op@TIM html]$ netstat -nltp(Not all processes could be identified, non-owned process inf ...

  9. Global build settings

    [ ] Select all packages by default *** General build options ***   [ ] Show packages that require gr ...

  10. 【剑指offer】面试题38：数字在排序数组中出现的次数

    题目: 统计一个数字在排序数组中出现的次数. 思路: 对二分查找进行改进,找到数字在数组中第一次出现和最后一次出现的位置,这样就得到它出现的次数. 以找第一次出现的位置为例:如果mid元素大于k,则在 ...