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:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } 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:0; }
其次，我们重设浏览器字体的大小为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:1;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. linux常用命令--实用小技巧

    >查看端口是否被启动--netstat 命令:netstat -an | grep 4445结果:如果有tcp一行则代表端口是开放的,如果没有说明没有访问权限,端口未开放 一般的,在服务器上端口 ...

  2. ORACLE不常用但实用的技巧- 树查询 level用法

    树查询 使用树查询的前提条件是: 在一条记录中记录了当前节点的ID和这个节点的父ID. 注意:一旦数据中出现了循环记录,如两个节点互为对方的父结点,系统就会报 ORA-01436错误(ORA-0143 ...

  3. PHP 常用函数库和一些实用小技巧

    PHP 常用函数库和一些实用小技巧 作者: 字体:[增加 减小] 类型:转载   包括文件读取函式,文件写入函式,静态页面生成函式,目录删除函式等   文件读取函式 //文件读取函式 function ...

  4. Eclipse 常用快捷键及使用技巧

    做 java 开发的,经常会用 Eclipse 或者 MyEclise 集成开发环境,一些实用的 Eclipse 快捷键和使用技巧,可以在平常开发中节约出很多时间提高工作效率,下面我就结合自己开发中的 ...

  5. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  6. Chrome 实用调试技巧

    Chrome 实用调试技巧 2016-07-23 如今Chrome浏览器无疑是最受前端青睐的工具,原因除了界面简洁.大量的应用插件,良好的代码规范支持.强大的V8解释器之外,还因为Chrome开发者工 ...

  7. Vim实用小技巧

    Vim实用小技巧 一些网络上质量较高的Vim资料 从我07年接触Vim以来,已经过去了8个年头,期间看过很多的Vim文章,我自己觉得非常不错,而且创作时间也比较近的文章有如下这些. Vim入门 目前为 ...

  8. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  9. 实用小技巧（一）：UIScrollView中上下左右滚动方向的判断

    https://www.jianshu.com/p/93e8459b6dae 2017.06.01 01:13* 字数 674 阅读 1201评论 0喜欢 1 2017.06.01 01:13* 字数 ...

随机推荐

  1. FileCopy

    /*[入]指的是到内存里,[出]指的是到内存外*/ import java.io.*; public class MyReadFile{ public static void main(String[ ...

  2. 2年后的Delphi XE6

    1.有幸下载到Delphi XE6,下载地址如下: http://altd.embarcadero.com/download/radstudio/xe6/delphicbuilder_xe6_win. ...

  3. mybatis动态sql中的trim标签的使用

    trim标记是一个格式化的标记,可以完成set或者是where标记的功能,如下代码: 1. select * from user <trim prefix="WHERE" p ...

  4. jquery: 一些常见的获取

    jq1.6+ 勾选checked $(#id).attr("checked", true); 判断checkbox是否选择 $(#id).prop("checked&qu ...

  5. as中的陷阱

    一.DisplayObject 1.有关width和height 对于一个对象A, 如果您设置了 width 属性,则 scaleX 属性会相应调整,并且会一直保存下来.尤其要注意的是如果A没有任何内 ...

  6. Hibernate-细细道来-01

    Dao代码,如何编写? 使用Jdbc技术,原始的jdbc操作, Connection/Statement/ResultSet DbUtils组件, 轻量级的dao的组件: Hibernate技术  [ ...

  7. java编程思想

    Java编程思想,Java学习必读经典,不管是初学者还是大牛都值得一读,这里总结书中的重点知识,这些知识不仅经常出现在各大知名公司的笔试面试过程中,而且在大型项目开发中也是常用的知识,既有简单的概念理 ...

  8. C/C++深度copy和浅copy

    #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include<string. ...

  9. hdu 3908 Triple(组合计数、容斥原理)

    Triple Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 125536/65536 K (Java/Others) Total Su ...

  10. hdu---(3779)Railroad(记忆化搜索/dfs)

    Railroad Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...