阿粥的博客-www.iamwawa.cn/blog

[转]谈CSS书写风格

azoon@163.com(admin) — Sat,19 Jun 2010 15:12:49 +0800

随着公司业务的增加，需求变的越来越多，团队也因此在不断的扩大，我们经常会遇到几个人协同工作来完成同一件作品或者维护修改别人作品的时候，那么是什么最让你最感到困扰呢？我们在实现一个表现复杂的页面的同时，CSS文件就会比较繁琐，众多的选择符、属性让人眼花缭乱，那么如何更快的定位、如何更高效的编写样式呢？CSS的书写被很多人所忽略。关于书写风格，翻看了一些知名网站的作品，发现横向连排几乎成为各大产品项目的主流，然而，每个人对于CSS的写法各异，这就导致我们工作效率的降低。为了更好的协同工作，保持团队内CSS书写的一致性，几经波折后达成共识，具体书写方法如下：CSS属性横排书写，选择符纵排书写，每个”,”(逗号)后必须换行;

重构组代码书写规范示例：（其中数字只用做示范，实际应用中不建议用数字命名。）

.class_name_1 .class_name_1_1,
.class_name_2 .class_name_2_1 .class_name_2_1_1,
.class_name_3{style1:value; style2:value; styel3:value; }

有人说，好代码就是用记事本打开也是艺术品，而样式文件本身就是设计作品。目前并没有一个权威来界定这种规范，我们只能对两种写法做个简单的总结。

就样式文件本身对比：

纵向书写特点：

每个CSS属性独立一行，一般不会出现换行或横向滚动条。
可以通过firebug等工具查找到模块，在DW中ctrl+g行定位，修改方便。
属性段落间有缩进，保证了代码的整洁，层次清楚，符合编程语言代码规范，修改更加直观。

存在的问题：代码冗余（如空格符、tab符、换行符）；文件大小增加；容易出现纵向滚动条。

横向书写特点：

最大化的利用了空间，单屏内能显示更多，减小了纵向滚动条出现的几率，能够快速捕获较多的信息。
减小了文件大小，省去了不必要的空格、换行等。
横向书写方便分块以及注释，便于查看CSS结构，选择符一目了然。当今显示器正朝着越来越大，越来越宽发展，基本上一行内可以显示完全。
加快编写CSS速度，不用每次敲换行和tab，并且减少拉动滚动条的次数。
如果是活动页，不用作压缩处理。使用CSS optimizers 来优化CSS是提倡的，但是使用横向书写，基本上不存在多余的空格和换行，因此可以不用压缩，这样效率和能力都会得到提高。
便于阅读和查找相关结构。代码编辑器对同行数定位做的都比较好，因此我们要解决的是如何快速纵向定位目标。横向书写时选择符纵向对齐，再加上
.class_name_2 .class_name_2_1 .class_name_2_1_1的选择符层次分明，因此很容易定位到目标。
在调试小Bug的时候就可以直接打开CSS更改，不用再打开firebug去找到模块。
横向书写，是基于CSS选择符的写法，层次容易对比，更利于模块化。对整体CSS规划有好处，后期维护成本低。
便于不同版本的CSS代码对比。

存在的问题：书写过密，从而影响阅读。这种弊端显而易见，但只要优化做到家，这种状况会很少。

尽管对于现如今的带宽来说，网页文件那仅以K为单位的大小实在是微不足道，但如何将这以K来计算的网页文件精简到最小还是网页设计师们应该考虑的问题之一。而横向书写省去了不必要的空格、换行等，大大减小了文件大小。我们不能说哪种书写是对的，至于具体采用哪种写法依个人选择，当然改变习惯可能会影响一个人的工作效率，那我们提倡的是：提交的CSS样式文件是经过代码格式化的，而这个工作可以完全交给DW等工具，我们只要点击一下，整个文件就会像我们想象的那样呈现出来。这样的代码看起来很舒服，修改容易，团队成员在后续交接也会变得更加顺利。

PS: Dreamweaver下代码格式的设置方法

[译]如何书写高效、可维护、组件化的CSS

azoon@163.com(admin) — Sat,19 Jun 2010 13:29:40 +0800

翻译自 Russ Weakley 的 Efficient, maintainable CSS

翻译自Russ大师的一篇关于如何书写高效、可维护、组件化的CSS的演示文档。

Kingcms 外站调用本站内容代码

azoon@163.com(admin) — Fri,03 Apr 2009 16:25:05 +0800

Kingcms 外站调用本站内容代码
最近用kingcms来改版了这个小网站，发现kingcms真的很不错，DIY功能强大。
下面我搞个调用最新十篇文章的代码作为例子

1.首先在模板文件夹下新建一个文件，例如 js.html
然后输入下面内容，作为一个模板。注意模板里只有下面内容，其他等标签都删掉。utf8编码。

程序代码

document.writeln("

(king:title size="38" /)<\/a><\/li>");{/king}
document.writeln("<\/ul>");

复制代码2.进入kingcms后台，添加一个单页面，用上面制作的模板js.html 作为外部模板。
页面路径填adfile/js.htm，然后生成。

3.外站就可以用代码来调用本站最新10篇文章了。

如此类推就可以做出其他的调用代码了。

可能是个笨方法，不过算是一个方法吧。其实就是个生成js代码的模板。
不是转载的，自己写的.

阿里妈妈社区动态工具栏代码

azoon@163.com(admin) — Thu,05 Mar 2009 16:46:42 +0800

上过阿里妈妈的朋友不多不少都会发现在社区的页面上有上面截图的工具箱。
昨晚无聊就把他的代码截取下来了。代码改了一点没技术含量的东西。
下面是预览页面，打开即可以看到效果，很不错的。
http://www.iamwawa.cn/upfiles/sj/090309/almm.html

背景图片地址：http://www.iamwawa.cn/upfiles/sj/090309/club_tool_bg.gif

代码在此：

程序代码

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

无标题文档

域名信息查询

网站信息查询

http://tool.alimama.com/engine.php">搜索引擎收录查询

http://tool.alimama.com/linkin.php">反向链接查询

http://tool.alimama.com/keyword.php">关键词密度查询

http://tool.alimama.com/meta.php">网页meta信息检测

http://tool.alimama.com/code.php">网页源代码查看

http://tool.alimama.com/color.php">颜色代码选择器

http://tool.alimama.com/engine.php">搜索引擎收录查询

http://tool.alimama.com/linkin.php">反向链接查询

http://tool.alimama.com/keyword.php">关键词密度查询

http://tool.alimama.com/meta.php">网页meta信息检测

http://tool.alimama.com/code.php">网页源代码查看

http://tool.alimama.com/color.php">颜色代码选择器

SEO信息查询

网站实用工具

http://tool.alimama.com/engine.php">搜索引擎收录查询

http://tool.alimama.com/linkin.php">反向链接查询

http://tool.alimama.com/keyword.php">关键词密度查询

http://tool.alimama.com/meta.php">网页meta信息检测

http://tool.alimama.com/code.php">网页源代码查看

http://tool.alimama.com/color.php">颜色代码选择器

http://tool.alimama.com/html.php">Html特殊符号查询

http://tool.alimama.com/gettext.php">蜘蛛抓取模拟

http://tool.alimama.com/htmltojs.php">Html/js代码转换

http://tool.alimama.com/htmltoubb.php">Html/UBB代码转换

http://tool.alimama.com/code.php">网页源代码查看

http://tool.alimama.com/color.php">颜色代码选择器

更多网页特效代码http://www.iamwawa.cn/blog/">http://www.iamwawa.cn/blog/

网易的一个开源镜象

azoon@163.com(admin) — Fri,06 Feb 2009 17:08:27 +0800

网易的一个开源镜象，域名是 http://mirrors.163.com/
目前提供了 Debian、Ubuntu、Fedora、Gentoo、Centos、FreeBSD等流行开源操作系统以及Eclipse等开源软件的镜象

##ubuntu8.10的163源为：
deb http://mirrors.163.com/ubuntu/ intrepid main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ intrepid-security main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ intrepid-updates main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ intrepid-proposed main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ intrepid-backports main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ intrepid main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ intrepid-security main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ intrepid-updates main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ intrepid-proposed main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ intrepid-backports main restricted universe multiverse

##ubuntu 8.04的163源为：
deb http://mirrors.163.com/ubuntu/ hardy main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ hardy-security main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ hardy-updates main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ hardy-proposed main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ hardy-backports main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ hardy main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ hardy-security main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ hardy-updates main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ hardy-proposed main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ hardy-backports main restricted universe multiverse

[Jquery]鼠标在图片四角显示不同图片图片

azoon@163.com(admin) — Wed,24 Dec 2008 18:16:30 +0800

鼠标在图片四角显示不同图片图片

预览地址：
http://www.iamwawa.cn/blog/upfiles/js/081224-4pic/

 程序代码

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">

鼠标在图片四角显示不同图片图片

图片分区域显示不同的图片。（分 左上，右上，左下，右下。）

googleanalytics上用CSS控制的1像素圆角样式

azoon@163.com(admin) — Sun,21 Dec 2008 16:56:54 +0800

请进入日志再运行

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<a href="http://www.w3.org/TR/html4/strict.dtd" target="_blank" rel="external">http://www.w3.org/TR/html4/strict.dtd</a>">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>google analytics buttons</title>
<style type="text/css">
/* default stuff */
body {padding:20px; font-family:arial; text-align:center;}
p, li {font-size: 12px; line-height:18px;}
h3 {margin-bottom:6px;}
.examplesGoHere {text-align:left; margin:0 auto; }
.letsGiveItAFixedWidthOf200Pixels { width:200px; }
ul {list-style:none;margin-left:0;padding-left:0;margin-top:0;}
ul li {margin-bottom:8px; margin-left:0;padding-left:0; }
/* notched effect for links in the unordered list */
.notchedListItems a {
	display:block;
	border: solid #666;
	border-width: 0 1px;
	text-decoration: none;
	outline:none;
	color: #000;
	background: #e4e4e4;
}
.notchedListItems a b {
	display: block;
	position:relative;
	top: -1px;
	left: 0;
	border:solid #666;
	border-width:1px 0 0;
	font-weight:normal;
}
.notchedListItems a b b {
  border-width:0 0 1px;
  top: 2px;
  padding:1px 6px;
}
.notchedListItems a:hover,
.notchedListItems a:hover b {background:#666;color:white;}
.feature {
	border:solid #647aae;
 	border-width:0 1px;
	background:#b0c0e6;
}
.feature div {
  position:relative;
  top: -1px;
  left: 0;
  border:solid #647aae;
  border-width:1px 0 0;
}
.feature div div {
	top: 2px;
	border-width:0 0 1px;
	padding: .3em .3em .1em;
}
</style>
</head>
<body>
<div class="examplesGoHere letsGiveItAFixedWidthOf200Pixels">
	<h3>A list</h3>
	<ul class="notchedListItems">
		<li><a href="#"><b><b>About</b></b></a></li>
		<li><a href="#"><b><b>Contact</b></b></a></li>
		<li><a href="#"><b><b>Cssrain</b></b></a></li>
	</ul>

<h3>A div</h3>
	<div class="feature">
		<div>
			<div>
				<p>This is an example of the notched corners as applied to a div container.</p>
				<p>This is an example of the notched corners as applied to a div container.</p>
				<p>This is an example of the notched corners as applied to a div container.</p>
			</div>
		</div>
	</div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

用JavaScript做的密码强度提示效果

azoon@163.com(admin) — Sun,21 Dec 2008 16:45:10 +0800

可以点下面的链接看看效果，这断代码今天在电脑上不小心找出来的，不知道作者是谁，没法注明出处，对作者说声抱歉。
http://www.iamwawa.cn/blog/upfiles/pwt.htm

请进入日志再运行

HTML代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>密码</title>
<style type="text/css">
body{
	font-size:12px;
	font-family: Arial, Helvetica, sans-serif;
	margin:0;
}
form{
	margin:2em;
}
#chkResult{margin-left:53px;height:15px;}
</style>
</head>

<body>
<form name="form1">
	<label for="pwd">用户密码</label>
	<input type="password" name="pwd" onBlur="chkpwd(this)" />
	<div id="chkResult"></div>
	<label for="pwd2">重复密码</label>
	<input type="password" name="pwd2" />
</form>
<script type="text/javascript">
	function chkpwd(obj){
		var t=obj.value;
		var id=getResult(t);
		
		//定义对应的消息提示
		var msg=new Array(4);
		msg[0]="密码过短。";
		msg[1]="密码强度差。";
		msg[2]="密码强度良好。";
		msg[3]="密码强度高。";
		
		var sty=new Array(4);
		sty[0]=-45;
		sty[1]=-30;
		sty[2]=-15;
		sty[3]=0;
		
		var col=new Array(4);
		col[0]="gray";
		col[1]="red";
		col[2]="#ff6600";
		col[3]="Green";
		
		//设置显示效果
		var bImg="<a href="http://www.iamwawa.cn/blog/upfiles/pwt.gif" target="_blank" rel="external">http://www.iamwawa.cn/blog/upfiles/pwt.gif</a>";//一张显示用的图片
		var sWidth=300;
		var sHeight=15;
		var Bobj=document.getElementById("chkResult");

Bobj.style.fontSize="12px";
		Bobj.style.color=col[id];
		Bobj.style.width=sWidth + "px";
		Bobj.style.height=sHeight + "px";
		Bobj.style.lineHeight=sHeight + "px";
		Bobj.style.background="url(" + bImg + ") no-repeat left " + sty[id] + "px";
		Bobj.style.textIndent="20px";
		Bobj.innerHTML="检测提示：" + msg[id];
	}
	
	//定义检测函数,返回0/1/2/3分别代表无效/差/一般/强
	function getResult(s){
		if(s.length < 4){
			return 0;
		}
		var ls = 0;
		if (s.match(/[a-z]/ig)){
			ls++;
		}
		if (s.match(/[0-9]/ig)){
			ls++;
		}
	 	if (s.match(/(.[^a-z0-9])/ig)){
			ls++;
		}
		if (s.length < 6 && ls > 0){
			ls--;
		}
		return ls
	}
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

css常见问题解决办法收集

azoon@163.com(admin) — Sun,21 Dec 2008 16:23:29 +0800

一、IE6的双倍边距BUG

例如:

程序代码

浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

二、为什么FF下文本无法撑开容器的高度？

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：

 程序代码
div { height:auto!important; height:200px; min-height:200px; }

三、怎么样才能让层显示在FLASH之上呢？
　　
解决的办法是给FLASH设置透明:

程序代码

http://www.easyq.net.cn/">:

四、怎样使一个层垂直居中于浏览器中？

程序代码

　
这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二

五、关于IE6样式中背景图片不缓存的BUG

示例：

 程序代码

a{ background:url(images/normal.gif); } a:hover { background:url(images/hover.gif); } 

如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果，在firefox下是没有什么问题的，第一次加载之后，浏览器都会从缓存读取背景图片；

而IE6在这里有一个bug，它每次都从服务器端读取背景图片，结果就是，若服务器反应较慢hover效果就会出现短暂的空白，令人极度不爽。一直以来都是通过“两张背景图片合并、background-postion控制位置”的方式解决问题的，效果差强人意。

具体来说就是在页面中加入一段简单的javascript脚本，告诉ie6：本地有背景图片的话就不要麻烦服务器了。 document.execCommand("BackgroundImageCache",false,true);

关于这段脚本的放置方式有两种：

1.用CSS，在css中加入如下代码

html {}{ filter: expression(document.execCommand("BackgroundImageCache", false, true)); }

2.用JS：document.execCommand("BackgroundImageCache",false,true);
如下：

程序代码

定位的应用-仿制了一个太极.

azoon@163.com(admin) — Sun,21 Dec 2008 15:57:07 +0800

今日逛经典论坛时，见到的，很不错，用CSS的定位做出来的八卦。

请进入日志再运行

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>太极</title>
<style type="text/css">
 *{ margin:0px; padding:0px;}
 body{ font-family:courier new,courier,monospace; font-size:12px; line-height:18px;}
 .tj_box{ width:200px; height:150px;position:relative; background-color:#fff;  left:0px;top:0px; margin:100px auto;}
 .tj_box span{ display:block;}
 .tj_box span.cir1{ color:#000; font-size:400px; line-height:200px;width:250px; position:absolute;}
 .tj_box span.cir2{ color:#fff; font-size:380px; line-height:200px; width:220px;position:absolute; left:6px; top:-1px; overflow:hidden;}
 .tj_box span.cir3{ 
 color:#000000;
font-size:380px;
left:5px;
line-height:198px;
overflow:hidden;
position:absolute;
top:0;
width:110px;
 }
.tj_box span.cir4{
color:#fff;
font-size:195px;
height:150px;
left:62px;
line-height:240px;
overflow:hidden;
position:absolute;
top:-6px;
width:120px;
}
.tj_box span.cir5{
color:#000;
font-size:195px;
height:150px;
left:60px;
line-height:140px;
overflow:hidden;
position:absolute;
top:-2px;
width:120px;
}
.tj_box span.cir6 {
color:#FFFFFF;
font-size:70px;
height:100px;
left:95px;
line-height:100px;
overflow:hidden;
position:absolute;
top:15px;
width:100px;
}
.tj_box span.cir7 {
color:#000000;
font-size:70px;
height:100px;
left:105px;
line-height:100px;
overflow:hidden;
position:absolute;
top:60px;
width:100px;
}
 
</style>
</head>
<body>
    <div class="tj_box">
	   <span class="cir1">•</span>
	    <span class="cir2">•</span>
		<span class="cir3">•</span>
		<span class="cir4">•</span>
		<span class="cir5">•</span>
		<span class="cir6">•</span>
		<span class="cir7">•</span>
		
	   
	</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

阿粥的博客-www.iamwawa.cn/blog

[转]谈CSS书写风格

[译]如何书写高效、可维护、组件化的CSS

翻译自 Russ Weakley 的 Efficient, maintainable CSS

Kingcms 外站调用本站内容代码

阿里妈妈社区动态工具栏代码

网易的一个开源镜象

[Jquery]鼠标在图片四角显示不同图片图片

图片分区域显示不同的图片。（分 左上，右上，左下，右下。）

googleanalytics上用CSS控制的1像素圆角样式

用JavaScript做的密码强度提示效果

css常见问题解决办法收集

定位的应用-仿制了一个太极.

图片分区域显示不同的图片。（分左上，右上，左下，右下。）