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.11—导航栏

    上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航 ...

  2. iOS平台在ffmpeg中使用librtmp

    转载请注明出处:http://www.cnblogs.com/fpzeng/p/3202344.html 系统版本:OS X 10.8 一.在iOS平台上交叉编译librtmp librtmp lin ...

  3. DataTables自定义事件

    $(document).ready(function() { var eventFired = function(type) { var n = $('#demo_info')[0]; n.inner ...

  4. Android调用系统的Activity、ContentProvider、Service、Broadcast Receiver

    Intent-------->Action |_____________Activity------------------------------->Intent Action |___ ...

  5. Cmake设置环境变量

    references: http://stackoverflow.com/questions/21047399/cmake-set-environment-variables-from-a-scrip ...

  6. FTP 上传文件

    有时候需要通过FTP同步数据文件,除了比较稳定的IDE之外,我们程序员还可以根据实际的业务需求来开发具体的工具,具体的开发过程就不细说了,这里了解一下通过C#实现FTP上传文件到指定的地址. /// ...

  7. poj1881：素因子分解+素数测试

    很好的入门题 先测试是否为素数,若不是则进行素因子分解,算法详见总结贴 miller robin 和pollard rho算法 AC代码 #include <iostream> #incl ...

  8. debuggap，移动端调试新方式

    最近发现了一个移动端调试的新技能,这里简单描述一下基本情况. 移动端调试常遇到的问题 手机访问只能看到页面的展现,除此之外看不到任何其他信息 无法像调试PC页面那么方便的查看js.dom.networ ...

  9. Java单元测试工具：JUnit4（一）（二）（三）（四）

    Java单元测试工具:JUnit4(一)--概述及简单例子 Java单元测试工具:JUnit4(二)--JUnit使用详解 Java单元测试工具:JUnit4(三)--JUnit详解之运行流程及常用注 ...

  10. mysql 中文乱码的解决方法

    添加或修改my.ini 配置文件,设置编码字符为utf8 ,默认为latin1,见红色字体 [mysql]# 设置mysql客户端默认字符集default-character-set=utf8 [my ...