CSS定义Radio单选项和Checkbox复选框样式

完全使用css来实例

<style type=”text/css”>
form#form1 {font:12px tahoma,sans-serif}
input[type="checkbox"] {visibility:hidden;width:0;height:0;margin:0;padding:0;}
input[type="checkbox"]+label {background:url(checkstyle.gif) no-repeat;padding-left:18px;color:#ccc;}
input[type="checkbox"]+label:hover {color:#369;background-position:0 -16px;}
input[type="checkbox"]:checked+label {color:#000;background-position:0 -48px;}
input[type="checkbox"]:focus+label {color:#963;background-position:0 -32px;}
input[type="radio"] {visibility:hidden;width:0;height:0;margin:0;padding:0;}
input[type="radio"]+label {background:url(checkstyle.gif) no-repeat 0 -64px;padding-left:18px;color:#ccc;}
input[type="radio"]+label:hover {color:#369;background-position:0 -80px;}
input[type="radio"]:checked+label {color:#000;background-position:0 -112px;}
input[type="radio"]:focus+label {color:#963;background-position:0 -96px;}
</style>

史上最全的css hack（兼容ie6-9,firefox,chrome,opera,safari）

CSS的浏览器兼容

在这个浏览器百花争鸣的时代，作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心，主要体现在javascript和css上面。javascript我这次就不谈了，先说说css。

为了适应不同浏览器不同的版本（版本主要就ie来说），ie这朵奇葩现在我们要兼容6-9，它的10也快出来了。。。在ie下我们可以写条件注释来区分ie和其他浏览器，以及ie的版本，这些请大家自行google。这篇文章主要讨论的是css hack。下面废话补多说了，直接上代码：

<!DOCTYPE html>  
<html>  
<head>  
    <title>Css Hack</title>  
    <style>  
    #test   
    {   
        width:300px;   
        height:300px;   
          
        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow\0;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/
    }  
    :root #test { background-color:purple\9; }  /*ie9*/
    @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/
    </style>  
</head>  
<body>  
    <div id="test">test</div>  
</body>  
</html>

    上面这段代码大家可以直接copy出来，保存成html在各浏览器试试。下面我来分析下：
    background-color:blue; 各个浏览器都认识，这里给firefox用；
    background-color:red\9;\9所有的ie浏览器可识别；
    background-color:yellow\0; \0 是留给ie8的，但笔者测试，发现最新版opera也认识，汗。。。不过且慢，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；
    +background-color:pink; + ie7定了；
    _background-color:orange; _专门留给神奇的ie6；
    :root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple\0;}，呃。。。这个。。。，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
    @media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

    好了就这么多了，特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。

利用Data URL(data:image/jpg;base64,)加速网页加载的方法

利用Data URL(data:image/jpg;base64,)base64形式存储图片,将小图片生成数据流形式

先来看下下边这段代码：

<img src=”data:image/gif;base64,R0lGODlhJQAlAJECAL3L2AYrTv///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgACACwAAAAA
JQAlAAACi5SPqcvtDyGYIFpF690i8xUw3qJBwUlSadmcLqYmGQu6KDIeM13beGzYWWy3DlB4IYaM
k+Dso2RWkFCfLPcRvFbZxFLUDTt21BW56TyjRep1e20+i+eYMR145W2eefj+6VFmgTQi+ECVY8iG
xcg35phGo/iDFwlTyXWphwlm1imGRdcnuqhHeop6UAAAIfkEBQoAAgAsEAACAAQACwAAAgWMj6nL
XAAh+QQFCgACACwVAAUACgALAAACFZQvgRi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwXABEA
DAADAAACBYyPqcsFACH5BAUKAAIALBUAFQAKAAsAAAITlGKZwWoMHYxqtmplxlNT7ixGAQAh+QQF
CgACACwQABgABAALAAACBYyPqctcACH5BAUKAAIALAUAFQAKAAsAAAIVlC+BGL3Z3IlxUmUuhtR2
LzHhsiEFACH5BAUKAAIALAEAEQAMAAMAAAIFjI+pywUAIfkEBQoAAgAsBQAFAAoACwAAAhOUYJnA
agwdjGq2amXGU1PuLEYBACH5BAUKAAIALBAAAgAEAAsAAAIFhI+py1wAIfkEBQoAAgAsFQAFAAoA
CwAAAhWUL4AIvdnciXFSZS6G1HYvMeGyIQUAIfkEBQoAAgAsFwARAAwAAwAAAgWEj6nLBQAh+QQF
CgACACwVABUACgALAAACE5RgmcBqDB2MarZqZcZTU+4sRgEAIfkEBQoAAgAsEAAYAAQACwAAAgWE
j6nLXAAh+QQFCgACACwFABUACgALAAACFZQvgAi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwB
ABEADAADAAACBYSPqcsFADs=
“>

其实“data:image/gif;base64,R0lGODlhJ……” 就是一张图片的Data URL，就是利用base64编码把图片数据翻译成标准ASCII字符。
等同于：

<img src=”http://www.lrxin.com/images/loading.gif”>

显示结果：

Data URL它现将图片转换成base64编码，以文本的形象随着文件加载。
再由浏览器在本地直接绘制图片，不是从服务器加载，所以节省了HTTP连接，起到加速网页的作用。

语法：
data:image/jpg;    声明数据协议及类型名称
base64,               编码形式为base64
/9j/4AAQSkZ……    base64编码结果

最后附上Data URL的生成方法（PHP）： 

<?php 
//php读取和保存base64编码的图片内容
header('Content-type:text/html;charset=utf-8'); 
//读取图片文件，转换成base64编码格式
//$image_file = './loading.gif'; 
$image_file = 'http://www.lrxin.com/images/loading.gif'; 
$image_info = getimagesize($image_file); 
$base64_image_content = "data:{$image_info['mime']};base64," . chunk_split(base64_encode(file_get_contents($image_file)));
?>

<img src="<?php echo $base64_image_content;?>" />

需要注意：本方法适合于小图片，大图片就不要考虑了，另外IE8以下浏览器不支持这种方法。
用这种方法会加重客户端的CPU和内存负担，总之有利有弊。
IE8 之前的浏览器不支持 Data URL

在线生成工具：
http://www.greywyvern.com/code/php/binary2base64
http://www.kawa.net/works/js/data-scheme/base64-e.html

简单的说，data类型的Url大致有下面几种形式。

data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,<HTML代码>
data:text/html;base64,<base64编码的HTML代码>
data:text/plain;charset=UTF-8;base64,<base64编码的HTML代码>
data:text/css,<CSS代码>
data:text/css;base64,<base64编码的CSS代码>
data:text/javascript,<Javascript代码>
data:text/javascript;base64,<base64编码的Javascript代码>
data:image/gif;base64,<base64编码的gif图片数据>
data:image/png;base64,<base64编码的png图片数据>
data:image/jpeg;base64,<base64编码的jpeg图片数据>
data:image/x-icon;base64,<base64编码的icon图片数据>

css3选择器 – :nth-child()伪类选择器

css3:nth-child()伪类选择器

语法：:nth-child(an+b)   

用途： :nth-child()伪类选择器可以很好的帮组我们选择列表中的特定标签。

支持： IE     Firefox     Chrome     Safari     Opera 所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更早的版本。目前能较好地支持她的只有Opera9+和Safari3+。

下边结合例子，由浅入深，具体讲解。

第一种：简单数字序号写法，匹配第n个元素。
语法： :nth-child(n)
说明： 参数n必须为大于0的整数。直接匹配第n个元素。

例子：

li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

———————华丽的分割线———————

第二种：倍数写法，匹配所有倍数为a的元素。
语法： :nth-child(an)
说明： 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

例子：

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

———————华丽的分割线———————

第三种：倍数分组匹配
语法： :nth-child(an+b) 与 :nth-child(an-b)

说明： 先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。）

例子：

li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/

li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/

li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/

li:nth-child(3n±0){background:orange;}/*相当于(3n)*/

li:nth-child(±0n+3){background:orange;}/*相当于(3)*/

———————华丽的分割线———————

第四种：反向倍数分组匹配
语法： :nth-child(-an+b)

说明： 此处一负一正，均不可缺省，否则无意义。这时与:nth-child(an+1)相似，都是匹配第1个，但不同的是它是倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个。

例子：

li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/

li:nth-child(-1n+8){background:orange;}/*或(-n+8)，匹配前8个（包括第8个）LI，这个较为实用点，用来限定前面N个匹配常会用到*/

———————华丽的分割线———————

第五种：奇偶匹配
语法： :nth-child(odd) 与 :nth-child(even)

说明： 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。

解决微信内置浏览器上传图片-html5将图片转换base64进行上传

有些安卓的微信浏览微网站，不能通过file上传文件、图片，但是ios系统的都是可以上传图片。

传统的通过 $_FILES 方式上传在微信浏览器下失败。
这里可以换个思路：
    我们可以先现将图片转成base64的字符，在把字符通过POST方式上传给服务器，在服务器端把POST过来的base64字符，还原出图片保存在服务，完成图片上传过程。

html5有个功能就可以将图片转换base64，那就是FileReader。

实现： 

function readFile(obj){ 
        var file = obj.files[0]; 	
        //判断类型是不是图片
        if(!/image\/\w+/.test(file.type)){   
                alert("请确保文件为图像类型"); 
                return false; 
        } 
        var reader = new FileReader(); 
        reader.readAsDataURL(file); 
        reader.onload = function(e){ 
                alert(this.result); //就是base64
 
        } 
} 

<input type="file"  id="picFile" onchange="readFile(this)" />

什么才是好的设计

今天为大家分享一些Good UI 在一些项目中获取的设计以及运营策略等方面的经验。

这是本人收藏了很久的干货，最近开始做网站产品，又把它翻出来了。

Good UI是一家研究用户体验的设计机构。我们知道成功的页面设计不仅有很高的转化率更便于用户使用，既能满足商业目标更能为用户带来良好的体验。


1.用通栏布局代替多栏布局

2. 给用户些好处，别急着做生意

3. 整合相似的功能，去掉零碎的UI元素

4.利用社会认同效应，别总是自吹自擂

5.主要功能需要多次强化显示

6.区分选中和可点击的状态，不要使用户困惑

7.布局有层次有重点，而非简单罗列

8. 允许用户撤销操作而不是使用弹窗需要用户确认

9. 明确的告知用户适用人群而不是简单的面向所用用户

10.简洁明了，直接了当

11.页面上多使用对比的方法


12.直接标出产地，别总单纯的讲历史


13.使用简洁的表单


14.把选项列出来而不是藏起来


15.使用连续性的提示符，别让用户误以为页面到了终点


16.功能专一而不是使用太多的链接


17.提示体统状态


18.在动作按钮上增加些吸引人的诱惑


19.用直接操作来代替无数个菜单


20.直接显示输入框可以省略一个页面


21.用一些动效过度而不用立即显示变化


22.循序渐进的引导用户而非生硬的要求用户注册


23.试着减少线框，减少不必要的注意


24.向用户展示功能上的便捷之处而不是泛泛的展示特性


25.用户没有使用记录的时候要善于引导


26.给出默认的选项而不需要用户选择


27.保持一致性降低用户的学习成本


28.自动补全一些数据，降低用户的操作负担


29.尊重用户的使用习惯而不是创造新的规则


30.提示用户如何规避风险，而不是总想着如何获利


31.善于引导用户的视觉浏览线，而非单一布局


32. 将相关的条目分组，不要杂乱无章的排列


33.采用及时校验而不是到最后才提示错误


34.需要用户输入的格式宽松严格限定格式


35.让用户有一些紧急的意识，别让用户拖得太久


36. 适当尝试饥饿营销


37. 帮助用户识别


38. 使用更大的点击区域


39. 增加加载的速度，别让用户等太久


40. 可以给用户提供一些快捷操作


41. 使用一些对比


42. 初始化的时候给用户一些激励


43.循序渐进地引导用户，不要简单粗暴地直接呈现给用户

来自：简书

作者：产品小妖

微信订阅号【产品小妖】
新浪微博号@产品小妖Bebe

链接：http://www.jianshu.com/p/2d1c9d8d55a7

单行文字滚动效果，jquery手写

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单行文字滚动效果，jquery手写</title>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" ></script>
<style>
ul ,li{ margin:0px; padding:0px; list-style:none;}
.roll-box{ background:# #FF0000; height:35px; overflow:hidden;}
.roll-box li { line-height:35px; height:35px;}
</style>

</head>

<body>

<div class="roll-box" id="roll-box">
<ul >
    <li><a href="javascript:;" class="roll-item">1【中国电子进出口浙江公司】 26款热门车型保养费用大公开！看你有没被坑蒙在鼓里~</a></li>
    <li><a href="javascript:;" class="roll-item">2【中国电子进出口浙江公司】 手把手教你折百合花，超简单的</a></li>
    <li><a href="javascript:;" class="roll-item">3【公元大厦】 美丽的水果晚餐！好吃又减肥！</a></li>
</ul>
</div>

<script>
function autoNotice(obj) {

	$(obj).find("ul:first").animate({
		marginTop: "-35px"
	},
	500,
	function() {
		$(this).css({
			marginTop: "0px"
		}).find("li:first").appendTo(this);
	});
}

var myar = setInterval('autoNotice("#roll-box")', 2500);

</script>

</body>
</html>

——————————————————-

小修改： 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>单行文字滚动效果，jquery手写</title>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" ></script>
<style>
ul ,li{ margin:0px; padding:0px; list-style:none;}
.roll-box{ background:# #FF0000; xheight:35px; overflow:hidden; width:200px;}
.roll-box li { line-height:35px; xheight:35px;}
</style>

</head>
<body>

<div class="roll-box" id="roll-box">
<ul >
    <li><a href="javascript:;" class="roll-item">1【中国电子进出口浙江公司】 26款热门车型保养费用大公开！看你有没被坑蒙在鼓里~</a></li>
    <li><a href="javascript:;" class="roll-item">2【中国电子进出口浙江公司】 手把手教你折百合花，超简单的</a></li>
    <li><a href="javascript:;" class="roll-item">3【公元大厦】 美丽的水果晚餐！好吃又减肥！</a></li>
</ul>
</div>

<script>
function autoNotice(obj) {
	
	var h = $(obj).find("ul:first li:first").height();
	console.log();
	$(obj).find("ul:first").animate({
		marginTop: -h+"px"
	},
	500,
	function() {
		$(this).css({
			marginTop: "0px"
		}).find("li:first").appendTo(this);
	});
}

var myar = setInterval('autoNotice("#roll-box")', 2500);

</script>

</body>
</html>

写给HTML初学者的30条最佳实践

1.保持标签闭合

以前，经常见到类似下面的代码（译注：这是多久以前啊……）： 

<li>Some text here.  
<li>Some new text here.  
<li>You get the idea.

注意外面包裹的UL/OL标签被遗漏了（谁知是故意还是无意的），而且还忘记了关闭LI标签。按今天的标准来看，这是很明显的糟糕做法，应该100%避免。总之，保持闭合标签。否则，你验证html标签的时候可能遇到问题。

更好的方式 

<ul>  
  <li>Some text here. </li>  
  <li>Some new text here. </li>  
  <li>You get the idea. </li>  
</ul>

2.声明正确的文档类型

笔者早先曾加入过许多CSS论坛，每当用户遇到问题，我们会建议他首先做两件事：

1.验证CSS文件，保证没有错误。

2.确认添加了正确的doctype 

DOCTYPE 出现在HTML标签之前，它告诉浏览器这个页面包含的是HTML，XHTML，还是两者混合，这样浏览器才能正确解析。

通常有四种文档类型可供选择： 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

关于该使用什么样的文档类型声明，一直有不同的说法。通常认为使用最严格的声明是最佳选择，但研究表明，大部分浏览器会使用普通的方式解析这种声明，所以很多人选择使用HTML4.01标准。选择声明的底线是，它是不是真的适合你，所以你要综合考虑来选择适合你得项目的声明。

3.永远不要使用内联样式

当你在埋头写代码时，可能会经常顺手或偷懒的加上一点行内css代码，就像这样： 

<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>

这样看起来即方便又没有问题。然而，这在你的编码实践中是个错误。

在你写代码时，在内容结构完成之前最好不要加入样式代码。 

这样的编码方式就像打游击，是一种很山寨的做法。——Chris Coyier

更好的做法是，完成标签部分后，再把这个P的样式定义在外部样式表文件里。

建议 

#someElement > p {  
  color: red;  
}

4.将所有外部css文件放入head标签内

理论上讲，你可以在任何位置引入CSS样式表，但HTML规范建议在网页的head标记中引入，这样可以加快页面的渲染速度。 

雅虎的开发过程中，我们发现，在head标签中引入样式表，会加快网页加载速度，因为这样可以使页面逐步渲染。 —— ySlow团队
<head>  
<title>My Favorites Kinds of Corn</title>  
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />  
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />  
</head>

5.javascript文件放在底部

要记住一个原则，就是让页面以最快的速度呈现在用户面前。当加载一个脚本时，页面会暂停加载，直到脚本完全载入并执行完成。因此会浪费用户更多的时间。

如果你的JS文件只是要实现某些功能，（比如点击按钮事件），那就放心的在body底部引入它，这绝对是最佳的方法。

建议 

<p>And now you know my favorite kinds of corn. </p>  
<script type="text/javascript" src="path/to/file.js"></script>  
<script type="text/javascript" src="path/to/anotherFile.js"></script>  
</body>  
</html>

6.永远不要使用内联javascript。现在不是1996年了！

许多年以前，还存在一种这样的方式，就是直接将JS代码加入到HTML标签中。尤其是在简单的图片相册中非常常见。本质上讲，一个“onclick”事件是附加在 标签上的，其效果等同于一些JS代码。不需要讨论太多，非常不应该使用这样的方式，应该把代码转移到一个外部JS文件中，然后使用“ addEventListener / attachEvent ”加入事件监听器。或者使用jquery等框架，只需要使用“click”方法。 

$('a#moreCornInfoLink').click(function() {  
  alert('Want to learn more about corn?');  
});

7.边开发，边验证

很多人并不真正理解标准验证的意义和价值，笔者在一篇博客中详细分析了这个问题。一句话，验证是为你服务的，不是给你找麻烦的。

如果你刚开始从事网页制作，那强烈建议你下载Web Developer Toolbar（chrome用户请自行在应用商店搜索，ie用户可能就杯具了） ，并在编码过程中随时使用”HTML标准验证”和“CSS标准验证”。如果你认为CSS是一种非常好学的语言，那么它会把你整的死去活来。你不严谨的代码会让你的页面漏洞百出，问题不断，一个好的方法就是—— 验证，验证，再验证。

8.下载firebug

Firebug是当之无愧的网页开发最佳插件，它不但可以调试JavaScript，还可以直观的让你了解页面标记的属性和位置。不用多说， 下载！

‘

据笔者观察，大部分的使用者仅仅使用了Firebug 20%的功能，那真是太浪费了，你不妨花几个小时的时间来系统学习这个工具，相信会让你事半功倍。

资源

●Overview of Firebug

●Debug Javascript With Firebug – video tutorial

10.保持标签名小写

理论上讲，html不区分大小写，你可以随意书写，例如： 

<DIV>  
<P>Here's an interesting fact about corn. </P>  
</DIV>

但最好不要这样写，费力气输入大些字母没有任何用处，并且会让代码很难看.

建议 

<div>  
　　<p>Here's an interesting fact about corn. </p>  
</div>

11.使用H1-H6标签

笔者建议你在网页中使用其中全部六种标记，虽然大部分人只会用到前四个，但使用最多的H会有很多好处，比如设备友好、搜索引擎友好等，不妨把你的P标签都替换成H6。 

<h1>This is a really important corn fact! </h1>  
<h6>Small, but still significant corn fact goes here. </h6>

12.写博客时，请将H1留给文章标题

今天笔者在Twitter上发起一次讨论：是该把H1定义到LOGO上还是定义到文章标题上，有80%的人选择了后者。

当然具体如何使用要看你的需求，但我建议你在建立博客的时候，将文章题目定为H1，这对搜索引擎优化(seo)是非常有好处的。

13.下载ySlow

在过去几年里，雅虎的团队在前端开发领域做了许多伟大的工作。前不久，它们发布了一个叫ySlow的Firebug扩展，它会分析你的网页，并返回 一个“成绩单”，上面细致分析了这个网页的方方面面，提出需要改进的地方，虽然它有点苛刻，但它绝对会对你有所帮助，强烈推荐—— ySlow！

14.使用无序列表（UL）包裹导航菜单

通常网站都会有导航菜单，你可以用这样的方式定义： 

<div id="nav">  
 <a href="#">Home </a>  
  <a href="#">About </a>  
  <a href="#">Contact </a>  
</div>

如果你想书写优美的代码，那最好不要用这种方式。 

为什么要用UL布局导航菜单？ ——因为UL生来就是为定义列表准备的

最好这样定义： 

<ul id="nav">  
  <li><a href="#">Home</a></li>  
  <li><a href="#">About</a></li>  
  <li><a href="#">Contact</a></li>  
</ul>

15.学习如何应对IE

IE一直以来都是前端开发人员的噩梦！

如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效： 

<!--[if lt IE 7]>  
   <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />  
<![endif]-->

这些代码的意思是：如果用户浏览器是IE6及以下，那这段代码才会生效。如果你想把IE7也包含进来，那么就把“[if lt IE 7]”改为“[if lte IE 7]”。

16.选择合适的IDE

不论你是Windows还是Mac用户，这里都有很多优秀的编辑器供你选择：

Mac 用户

●Coda

●Espresso

●TextMate

●Aptana

●DreamWeaver CS4 PC 用户

●InType

●E-Text Editor

●Notepad++

●Aptana

●Dreamweaver CS4

17.上线前，压缩代码

通过压缩您的CSS和Javascript文件，您可以减少总大小的25%左右，但在开发过程中不必压缩，然而，一旦网站完成后，利用一些网络压缩程序或多或少节省一些带宽。下面列出一些工具。

Javascript 压缩服务

●Javascript Compressor

●JS Compressor

CSS Compression Services

●CSS Optimiser

●CSS Compressor

●Clean CSS

18.精简，精简，在精简

回望我们大多数人写的第一个页面，一定会发现严重的 “DIV癖”( divitis )，通常初学者的本能就是把一个段落用DIV包起来，然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。 

网页写完后，一定要多次回头检查，尽量的减少元素的数量。 能用UL布局的列表就不要用一个个的DIV去布局。

正如写文章的关键是“缩减，缩减，缩减”一样，写页面也要遵循这个标准。

19.给所有图片加上“alt”属性

为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息，并且对图像搜索引擎友好。

糟糕的做法 

<IMG SRC="cornImage.jpg" />

更好的做法 

<img src="cornImage.jpg" alt="A corn field I visited." />

20.通宵达旦

我经常不知不觉的学习工作到凌晨，我认为这是个很好的状况。

我的“啊～哈！”时间（ “AH-HA” moments，指柳暗花明或豁然开朗的时刻）通常都发生在深夜，比如我彻底理解JavaScript的“闭包”概念，就是在这样一种情况下。如果你还没有感受过这种奇妙的时刻，那就马上试试吧！

21.查看源代码

没有什么比模仿你的偶像能让你更快的学习HTML。起初，我们都要甘做复印机，然后慢慢得发展自己的风格。研究你喜欢的网站页面代码，看看他们是怎么实现的。这是高手的必经之路，你一定要试一下。注意：只是学习和模仿他们的编码风格，而不是抄袭和照搬！

留意网络上各种炫酷的JavaScript效果，如果看上去是使用了插件，那根据它源码中head标签内的文件名，就可以找到这个插件名称，然后就可以学习它据为己用。

22.为所有的元素定义样式

这一条在你制作其他公司企业网站时尤为必要。你自己不使用blockquote标记？那用户可能会用，你自己不使用OL？用户也可能会。花时间做一个页面，显示出ul, ol, p, h1-h6, blockquotes, 等等元素的样式，检查一下是否有遗漏。

23.使用第三方服务

现在互联网上流行着许多可以免费加在网页中的API，这些工具非常强大。它可以帮你实现许多巧妙的功能，更重要的是可以帮你宣传网站。

24.掌握Photoshop

Photoshop是前端工程师的一个重要工具，如果你已经熟练掌握HTML和CSS，那不妨多学习一下Photshop。

1.观看Psdtuts+上的视频课程。

2.花费每月25$注册成为Lynda.com的会员，海量精品课程。

3.推荐“You Suck at Photoshop”系列

4.花费几个小时记住尽可能多的PS快捷键。

25.学习每一个HTML标签

虽然有些HTML标签很少用到，但你依然应该了解他们。比如“abbr”、“cite”等，你必须学习它们以备不时之需。

顺便说下，如果你不熟悉上面两个标签，可以看下下面的解释：

●abbr 和你估计的差不多，它是abbreviation的缩写（英语差的估计不到），“Blvd”能用<abbr>标签包裹，因为他是“boulevard”的缩写。（喜大普奔也可以喽）。

●cite 被用来作为引用内容的标题（blockquote）。例如，如果你在你的博客中引用本篇文章，你可以将“给HTML初学者的三十条最佳实践”用<cite>包裹，注意它不应该被用来包裹引用的作者，这是常见的误区。

26.参与社区讨论

网络上有许许多多优秀的资源，而社区中也隐藏着许多高手，这里你既可以自学，也能请教经验丰富的开发者。

27.使用reset.css

Css Reset也就Reset Css ,就是重置一些HTML标签样式，或者说默认的样式。

关于是否应该使用CSS Reset，网上也有激烈的争论，笔者是建议使用的。你可以先选用一些成熟的CSS Reset，然后慢慢演变成适合自己的。 

html, body, div, span,   
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
img, ins, kbd, q, s, samp,  
small, strike, strong,   
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td {  
    margin: 0;  
    padding: 0;  
    border: 0;  
    outline: 0;  
    font-size: 100%;  
    vertical-align: baselinebaseline;  
    background: transparent;  
}  
body {  
    line-height: 1;  
}  
ol, ul {  
    list-style: none;  
}  
blockquote, q {  

    quotes: none;  
}  
blockquote:before, blockquote:after,  
q:before, q:after {  
    content: '';  
    content: none;  
}  
  
table {  
    border-collapse: collapse;  
    border-spacing: 0;  
}

28.对齐元素

简单来说，你应该尽可能的对齐你的网页元素。可以观察一下你喜欢的网站，它们的LOGO、标题、图表、段落肯定是对得非常整齐的。否则就会显得混乱和不专业。

29.关于PSD切片

现在你已经掌握了HTML、CSS、Photoshop知识，那么你还需要学习如何把PSD转换为网页上的图片和背景，下面有两个不错的教程：

●Slice and Dice that PSD

●From PSD to HTML/CSS

30.不要随意使用框架

Javascript和CSS都有许多优秀的框架，但如果你是初学者，不要急于使用它们。如果你还没能熟练的驾驭CSS，使用框架会混淆你的知识体系。尽管你可能能会说javascript和jQuery是可以同事学习的，但这对css并不适合。我个人提倡960 CSS 网格框架，并且我经常使用它。还是那句话，如果你是css的初学者，学习框架只会让你更加困惑。

CSS框架是为熟练开发者设计的，这样会节省它们大量的时间

让ie9以下版本（ie6、7、8）兼容html5新特性的方法

一直以来ie浏览器都是web程序猿所痛恨，丫的兼容性真让人无解了，下面是针对操蛋浏览器兼容html5新标签的方法
一：JavaScript 语句 document.createElement(“myHero”) 是为了为 IE 浏览器添加新的元素。（ie8及一下版本不支持）
二：
国内不建议使用
<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
< ![endif]–>
建议这个
<!–[if lt IE 9]>
<script src=”http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js”></script>
< ![endif]–>
针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。
虽然这个解决方案对操蛋浏览器识别新标签有一定作用，但是限制挺多的，所以呼吁所有的程序猿同胞们用这段代码
<!–[if lt IE 9]>
<script type=”text/JavaScript”>
alert(“请使用ie9或更高版本的浏览器或是更高级的浏览器，推荐使用谷歌浏览器、火狐浏览器，以便您浏览本站优质内容”);
</script>
< ![endif]–>

css属性选择器中*=和~=有什么区别呢？

[title~=’this’] 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
比如<img title=’yes this’ />
[title*=’this’]  选择具有att属性且属性值为包含val的字符串的E元素。
比如<img title=’thisistrue’ />

ime-mode:disabled （用css实现关闭文本框输入法）

css 之 ime-mode
语法：
ime-mode : auto | active | inactive | disabled
取值：
auto : 默认值。不影响ime的状态。与不指定 ime-mode 属性时相同
active : 指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活ime
inactive : 指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活ime
disabled : 完全禁用ime。对于有焦点的控件(如输入框)，用户不可以激活ime
说明：
设置或检索是否允许用户激活输入中文，韩文，日文等的输入法(ime)状态。
此属性对于 currentstyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 imemode 。
示例：
就是这样。所以当某个文本域不需要中文输入的时候，我们可以通过设置 ime-mode 属性值为 inactive 或者 disabled，减少错误的可能性。同样的我们可以设置那些需要中文输入的文本域的 ime-mode 属性值为 active。

通常C/S的业务系统，都会注意输入法的控制问题。开发基于B/S的业务系统，也一定会遇到同样问题，ime-mode相信可以帮上忙。不过 FireFox 并不支持这一样式单属性。
示例：

input {ime-mode: auto; }
<form name="form1" method="post" action="">
    <input type="text" name="textfield" style="ime-mode:disabled ">
</form>

实例：jQuery弹性滑动导航菜单

jQuery弹性滑动导航菜单，导航下的标示横线随着鼠标经过移动。

代码如下： 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>实例：jQuery弹性滑动导航菜单</title>
<style type="text/css">
body{ font-size:100%; font-family:"Microsoft YaHei","Arial"; background:#fff;}
#nav{ position:relative; width:832px; _width:835px; margin:100px auto 0 auto; border-bottom:2px #ddd solid;}
#nav .nav-menu{ height:50px;}
#nav .nav-menu a{ display:block; float:left; height:50px; padding:0 40px; line-height:50px; color:#666; font-size:16px; text-decoration:none;}
#nav .nav-current{ position:absolute; bottom:-2px; height:2px; overflow:hidden; background:#80b600;}
</style>
<script id="jquery_172" type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){

(function(){
var $navcur = $(".nav-current");
var $nav = $("#nav");
var current = ".current";
var itemW = $nav.find(current).innerWidth();	//默认当前位置宽度
var defLeftW = $nav.find(current).position().left;	//默认当前位置Left值

//添加默认下划线
$navcur.css({width:itemW,left:defLeftW});

//hover事件
$nav.find("a").hover(function(){
	var index = $(this).index();	//获取滑过元素索引值
	var leftW = $(this).position().left;	//获取滑过元素Left值
	var currentW = $nav.find("a").eq(index).innerWidth();	//获取滑过元素Width值
	$navcur.stop().animate({
		left: leftW,
		width: currentW
	},300);
	
},function(){
	$navcur.stop().animate({
		left: defLeftW,
		width: itemW
	},300)
})
})();

});
</script>
</head>
<body>
<div id="nav">
	<div class="nav-menu">
		<a href="#" class="current">首页</a>
		<a href="#">了解我们</a>
		<a href="#">产品展示</a>
		<a href="#">服务报价</a>
		<a href="#">最新消息</a>
		<a href="#">联系方式</a>
	</div>
	<div class="nav-current"></div>
</div>
</body>
</html>

html img Src base64 图片显示

Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。
　　在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。
　　目前，Data URI scheme支持的类型有：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
　　base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，在PHP中可以用函数base64_encode() 进行编码，如echo base64_encode(file_get_contents(‘wg.png’));
目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

 

举个图片的例子：

 

网页中一张图片可以这样显示：

<img src=“http://www.letuknowit.com/images/wg.png”/>
也可以这样显示：
<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

JQuery双色表格

//双色表格
$(".TableA tbody tr:odd").addClass("bg");//奇数行
$(".TableA tbody tr:even").addClass("bg");//偶数行
$(".TableA tbody tr").mouseover(function(){ $(this).addClass("over"); }).mouseout(function(){$(this).removeClass("over");});//鼠标经过离开

让IE6不支持PNG透明图片iepngfix

 

让IE6不支持PNG透明图片

官方网站：http://www.twinhelix.com/css/iepngfix/

百度网盘：http://pan.baidu.com/share/link?shareid=408557&uk=1010090726

CSS 背景半透明文字不透明兼容ie、火狐等浏览器

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> New Document </title>
<meta name=”Author” content=””>
<meta name=”Keywords” content=””>
<meta name=”Description” content=””>
<style>
#wrapper
{
background: #369;
width:300px;
height:150px;
}
#div1
{
-moz-opacity: 0.3; /* FF 3.5以下 */
opacity: 0.3; /* FF 3.5及以上 */
filter: alpha(opacity=30); /* IE6及以上 */
background: #fff;
width: 200px;
height: 50px;
}
#div2
{
background: rgba(255, 255, 255, 0.3) !important; /* IE无效，FF有效 */
background: #fff;
filter: alpha(opacity=30);
width: 200px;
height: 50px;
}
#div2 span
{
position: relative;
}
</style>
</head>

<body>
<div id=”wrapper”>
<div id=”div1″>
<span>图层背景半透明，字体颜色也半透明</span>
</div>
<br />
<div id=”div2″>
<span>图层背景半透明，字体颜色不半透明</span>
</div>
</div>
</body>
</html>