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. mysql概要（六）连接

    内连接 [join on / from 表1,表二 ]效果一样 区别是:可以理解为首先取得笛卡儿积后,再 内连接:取俩表的匹配数据: 左连接:取的俩表匹配数据,并且保留未匹配数据中左表的数据,右表数据 ...

  2. SQL 总结

    1. select 使用正则表达式 正则表达式的模式串, 与linux基本相同, oracle提供以下4个函数来支持正则表达式: REGEXP_LIKE: 比较一个字符串是否与正则表达式匹配(看来是返 ...

  3. linux之flock函数锁文件

    头文件  #include<sys/file.h> 定义函数  int flock(int fd,int operation); 函数说明  flock()会依参数operation所指定 ...

  4. hostapd源代码分析（一）：网络接口和BSS的初始化

    [转]hostapd源代码分析(一):网络接口和BSS的初始化 原文链接:http://blog.csdn.net/qq_21949217/article/details/46004349 最近在做一 ...

  5. iOS开发之用Xcode 在真机上截屏与模拟器截屏

    一.真机截屏 1.打开Xcode 6 2.在xcode 选择模拟器或者真机设备的地方选中你的真机 3.Debug-->View Debugging-->Take Screenshot of ...

  6. 转：strcmp函数实现及分析

    转自:strcmp函数实现及详解 strcmp函数是C/C++中基本的函数,它对两个字符串进行比较,然后返回比较结果,函数形式如下:int strcmp(constchar*str1,constcha ...

  7. D3.js 饼状图的制作

    1.数据 有如下数据,需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终 ...

  8. Android_开发工具的下载和开发环境的搭建

    一.Android开发工具的下载  Android开发者官网: http://developer.android.com/           Android开发工具:http://www.andro ...

  9. phalcon: 获取参数的方法

    phalcon: 获取参数的方法 一般情况下:GET/POST $this->request->get(参数); $this->request->getPost("参 ...

  10. 七大查找算法（附C语言代码实现）

    来自:Poll的笔记 - 博客园 链接:http://www.cnblogs.com/maybe2030/p/4715035.html 阅读目录 1.顺序查找 2.二分查找 3.插值查找 4.斐波那契 ...