【导语】下面小编给大家整理用me.alipay.com制作我的支付宝捐款页面网页设计（共7篇），希望大家喜欢！
篇1：用me.alipay.com制作我的支付宝捐款页面网页设计
如何使用支付宝收取捐款? 记得几年前我就在 Google 拼命地搜索. 最近支付宝上线一个针对个人收款的新产品, me.alipay.com. 支付宝用户可以创建一个收款页面, 别人能在收款页面上直接付款. 对我来说, 这就是支付宝捐款页面.
创建支付宝个人收款页面
创建页面十分简单, 只要登录 me.alipay.com, 输入你的 ID 和个人描述既可开通. 这里有一点需要特别注意, 一旦开通, 个人 ID 则不能修改.
开通完成你会获得一个链接, 别人通过这个链接进入你的收款页面. 假设你做一个捐款按钮链向收款页面, 那它就是一个捐款页面了.
优势和弊端
好处不言而喻, 方便快捷, 便于推广. 对经常收款的用户和博客来说十分有用, 可以让支付宝更具社会化特性.
也有一些网友认为其弊端是隐私和安全. 网友觉得收款页面上显示个人姓名欠妥, 而且担心引起而频发网络诈骗.
支付宝的捐款功能
作为一个博主, 这个新功能很有价值, 终于可以创建类似 Paypal 的捐款功能了. (出乎意料地, 现在 Paypal 上已经找不到创建 Donate 按钮的入口了. 但 Paypal 捐款功能仍是可用的.)
若干年前, 支付宝曾经有过捐款功能的, 但后来只提供慈善机构使用, 而个人产品悄然消失了. 这么好几年, 如果需要接受捐款, 只能使用支付宝的商家服务.
结束语
不多说了, 觉得有用的也别举手了, 赶紧去抢个喜欢 ID 吧.
me.alipay.com
篇2：页面制作如何精确还原设计稿网页设计
作为一名合格的页面重构者，其实基础能力项有一条：网页还原设计稿，
你能做到页面与设计稿丝毫不差吗？
有人可能会想，又不是造原子弹，哪能一像素不差啊？
我想说: 细节真的很重要！细节决定成败，真可谓失之毫米差之千里，如果你是想打造一个精品项目真的有那么可怕。所以在前面嗦那么多是想大家多重视页面细节问题，真的要把页面当原子弹来做。这里分享一下我工作中的一点经验吧，请多多拍砖。
第一步：打蛇打七寸——视觉规范
有时候我们从设计师那里拿到的设计稿不一定是精确无误的，例如：同一类的模块标题文字，一个地方是13PX，另外一个地方是14PX；一个页面有多种字体颜色肉眼看起来一样却实际取到的色值不一样；每个段落的行高不一样；同一类型的弹出框多种尺寸；等等…… 这样的情况，我们不能为了还原设计稿而还原设计稿。
为了减少与设计师沟通上的成本，重构师不得不督促设计师做前期整站的视觉规范，把一些公共能约定的内容以文档的形式写明，后期严格执行起来。
设计师最好是在页面开始制作前定好视觉规范，这样可以大大减少页面制作后期联调的成本。另外页面制作可以对模板化的东西前期做统一的规范，如字体、ICON、边框、背景色、间距等做统一的class接口，等后期设计规范固定下来后有变动的地方调起来就很容易了。
第二步：万事俱备，只欠东风——设计稿标注
务必要求设计师在设计稿上对各种间距、宽度、特殊字体、特殊字色、特殊行高等等进行标注，这样在页面制作的时候不用去重新量取也大大加强了还原设计稿的准确度，更减少了与设计师的沟通成本和后期联调成本。如下样例：
第三步：工欲善其事，必先利其器——网页标尺工具(FastStone Capture)
航海用的指南针、医生用的体温计、木匠用的卷尺……很多职业都有它专用的测量仪器，那么我们在制作页面的时候势必也要测量间距、宽度、高度、颜色……等等数据，那么页面制作是不是也应该有一个专业的页面精确测量的工具呢？
这里有一款可以精确测量网页的软件想分享给大家，软件名是 FastStone Capture，记得是一同事去年推荐给我的，当时只是为了找一款可以截屏的小软件，而今我想找一款可以专门用来测量网页的软件的时候，想不到它还能排上用场——软件虽小，却五脏俱全，
简单教程：
1、打开测量工具
点击控制面板最右边的图标，打开选择“屏幕尺”，会在屏幕上显示如下图的尺子、为了方便透视测量，可将尺子设置成透明或半透明：
2、横向测量
默认尺子是横放的，可以按键盘上、下、左、右键单像素移动尺子，鼠标点在尺子的刻度上，屏幕右上角会有一个放大镜显示测量的区域，拖动鼠标可以精确测量水平的长度。拖动尺子横向两边缘可将尺子任意拉长或缩短。
3、垂直测量
点击尺子上的如图的按钮图标可将尺子垂直：
或双击尺子可将尺子垂直。
垂直测量和横向测量的方法类似，这里就不重复说了。
4、点对点测量
点击尺子上的图标:，屏幕右上角放大镜会显示线长度。
用鼠标拖动从A点到B点的直线，测量两点间的距离。
5、矩形测量
可惜该软件没有三角板也没有圆规，难以测量矩形。别急，可以用其他方法代替，这里用到截屏功能。
点击尺子上的图标关闭尺子，返回软件控制面板，点第三个图标（扑捉矩形区域）：
拖动鼠标测量想要测量的网页矩形模块吧，屏幕左（或右）上角的放大镜会显示w*h=值*值，w是宽度，h是高度。
6、网页取色
点击软件控制面板右边的图标：，出现下拉框，选择“屏幕取色器”，出现吸管图标，移动吸管指示的坐标点击获取屏幕任一地方的颜色值。
OK，简单教程到此结束，本想搞个视频演示的，但想想这个软件其实很简单很简单，如果有不明白的地方可以实际操作一下 ^_^
如果严格做到以上设计师到重构师流程的三个步骤，页面还会有那么多页面还原设计稿的问题吗？
实践证明，我在负责的新项目中这样的问题已经减少了很多了。
原文链接：www.topcss.cn/?p=102
篇3：页面制作也是一门艺术网页设计
当一个页面制作工程师将html页面呈现在你面前的时候，你看到的代码全是DIV，毫无章法可言，你作何感想？如果你看到的页面结构清晰、注释明朗、标签合理，你又作何感想？很明显，你更愿意看到的是第二类页面，如果将页面比喻成一个女人，你更希望站在你面前的这个女人线条清晰、凸凹有致、精于打扮而又恰到好处，不是吗？好的页面总能让你体会到一种赏心悦目的快感，你会忍不住的看了再看，你会在查看的代码的同时想到《登徒子好色赋》中所言的东家之子。我这样说可能有些过，但我相信你对好的代码所带来的美感一定有所体味。在许多人看来，页面制作是一项很简单的工作，不就是将设计图转换成html吗？如果页面制作就是这样一个简单的转换工作，那为何还要衍生出页面制作工程师这样的职位呢？一项工作如果被职业化，那么它就不那么简单了。在我看来，页面制作不仅仅是技术，更是一门艺术。
在UI设计师将一套设计稿交付到你（这里我假设你就是一名页面制作工程师）的手中之后，该如何去完成页面的制作？有经验的工程师从不急于动手，而是认真的查看每一张设计图，并进行对比分析。他们通常会从设计图中找出页面的基本框架，找出页面中相同或者相似的东西，并进行语义化分析，选择合适的标签。在真正构建html的时候，他们会充分利用那些我们常见的技术，如滑动门技术、sprite技术、图像替代技术。他们会将灵活性考虑其中，并努力将维护成本降低到最低程度。他们并不是简单的切割设计图，而是分离其中的元素，这些分离的元素会被多次复用，
有时候设计稿很多，可是他们很淡然，因为在他们看来，不过是几个元素合成叠加而已。他们会选择理想的图片格式，并在保证图片质量的基础上进行有效地压缩处理。在整个制作过程中，他们始终遵循结构与表现相分离的原则。他们会使用语义化的标签来构建html，并充分利用这些标签来书写高效的的css文件。他们可能把大量的时间花在一个基本框架页的制作上，但这丝毫不影响他的效率。在他们眼中，一切都在的掌控之中。“运乎之妙，存乎一心”，他们理解各种常见技术，熟悉每个html标签，深刻领悟css语法。故而游刃有余，目无全牛。一张设计稿呈现在他们面前时，他们一眼就能看出基本骨架，很自然的想到用那些技术来实现，并能准确的表达出设计图中语义化的标签。
对于初学者来说，可能有所不同。他们很可能缺乏全局意识，为了切图而切图，全然不知标签语义化的重要性，以至于页面中全是DIV。他们会极尽所能的恢复设计稿的原貌（这在某种程度上来说是件好事），全然不知那些我们常见的技术技巧。在项目向前推进的时候，问题接踵而来，原来的html结构难以重用，样式一塌糊涂。简单的修修补补已经很难解决出现的种种问题，如果遇上设计图些微改动的时候，更是叫苦不迭。每当这个时候，他们常常会一筹莫展，无所适从。初学者往往缺乏以下东西：1）没有足够的全局意识，对每一个细节把握不够；2）对常见的技术技巧了解不深；3）不理解标签语义化的重要性，或者知道标签的含义，却不知道如何用它。而要真正掌握这些，也得费一番功夫才能练就。一旦掌握了这些东西，页面制作就变得很轻松。一旦你弄透了，在设计稿呈现给你的时候，你可以无视那些华丽的视觉效果，而是直指图中语义化的标签，直接构建html。那些华丽的效果不过是css的外衣。
来自：www.denisdeng.com/?p=1137
篇4：用表格制作网页
利用表格制作网页
实验目标
该网页将利用设计页面的布局，制楚雄师院的页面简介。通过该种制作，我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象，已达到自然，生动的配置构成元素的目的。
实验过程
《1》在dreamweaver中执行《文件》中的《新建》命令，创建一个HTML文档。然后在《文件》中保存该文档。然后在《文档》工具栏的《标题》中输入“师院首页”。然后单击《常用》工具栏的表格按钮，插入一个3行3列的表格。
<2>选中第2行表格的第2单元格。单击属性面板中的合并所选单元格按钮，将其合并。然后将指针置于第1行第1列单元格内在属性面板中将《宽》设为200，<高》设为30。
《3》单击《常用》工具栏中的常用图像按钮，再打开的《选择图像源文件》对话框中选中一幅图片，单击《确定》按钮，为单元的插入一幅图片。
《4》将鼠标指针移到第1行1列单元格内，在属性面板中将《宽》设为50，《高》设为30，单击《常用》工具栏中的图像按钮，打开《插入鼠标经过图像》对话框。
《5》在打开的< 插入鼠标经过图像>对话框中，单击《原始图像》后面的《浏览》按钮.。在打开的对话框中选中一幅图片，单击确定按钮，在单击《鼠标经过图像》后面的《浏览》按钮，用同样的方法选定一幅图片。
《6》设置完成后，单击《确定》按钮，然后同同第4,5步一样为第1行的第1,2列也分别设置鼠标经过图像。然后将鼠标指针置于第一行第三列的单元格内，在《属性》面板中，为《宽》设为100，《高》。设为50。为《背景颜色》设为#333cc。
《7》将鼠标指针置于表格的第3行，按前面的方法，为第3行单元格也插入一幅图片。然后将鼠标指针置于表格的下一行，单击《常用》工具栏表格图标按钮，为文档在插入一个3行3列的表格。
《8》将鼠标指针置于插入表格的第1行第1列中，在属性面板中将《宽》。设为120，然后将鼠标指针置于第1行第1列单元格内，按下Ctrl+Alt+t组合键，打开《表格》对话框。设置好后，单击《确定》按钮，给单元格插入嵌套表格。
《9》选中插入的嵌套表格在属性面板中将《对齐》设置为剧中右对齐。然后将鼠标指针置于嵌套表格第一行中，按照前面的方法，为其插入一幅图片。同样的，为其第2,3,4,5列也分别插入图片。
《10》在属性面板中，将第6列单元格的《高》设为50，再将鼠标指针置于第7列，为其插入一幅图片。单击《状态栏》中的《tatle》标签，选中第7步插入的3行3列的表格，在属性面板中，为《背景颜色》设置为#009966。
《11》将鼠标指针置于7步插入表格的第2行2列中，在属性面板中，将《垂直》设置为顶端。打开《表格》对话框，其中的设置如图11所示。设置完后，单击《确定》按钮，为单元格插入嵌套。
《12》在上一步插入表格的属性面板中，将对齐方式设为居中对齐，将鼠标置于该表格的第2行，按下ctrl+alt+I组合键，在打开的对话框中选择一幅图，单击确定，为单元格插入图片。在该单元格的属性面板中，单击居中对齐按钮，将图片居中。
《13》将光标置于下1列单元格，输入文字。在网页中右击，在弹出的快捷键菜单中执行《CSS样式》的新建命令，弹出《新建CSS规则》对话框。按照设置后，单击《确定》按钮，弹出《X1的规则定义》对话框。
《14》在《X1规则定义》对话框中，将《文字》设为宋体，《大小》设为12像素，，《样式》设为正常，<行高>设为26像素,其余不变.单击<确定>按钮，在编辑窗口选中输入的文字，右击，在弹出的快捷菜单中执行《CSS样式》的x1命令，为文字应用css样式。
《15》将鼠标指针置于第7步插入的3行2列表格的下一行，然后按下ctrl+Alt+T组合键打开《表格》对话框，设置完毕后，单击《确定》按钮，为网页插入表格。
《16》选中上一步插入的表格，在属性面板中，将《背景颜色》设为#99FF66。将鼠标指针设置于第1行单元格内，在属性面板中，将《水平》设为右对齐，然后为该单元格插入一幅图片。
《17》将鼠标指针置于定2行单元格内，在属性面板中，将《格式》设为段落，《水平》设为右对齐，然后输入师院信息。在网页中右击，在弹出的快捷键菜单中执行《css样式》的《新建》命令弹出《新建css规则》对话框。
《18》《新建css规则》对话框的设置如图18所示，设置好后，单击《确定》按钮。弹出《x2的规则定义》对话框，将《大小》设为19像素，《样式》设为正常，《行高》设为20像素，《颜色》设为，其余不变。设置完毕后，单击确定按钮。
《19》在编辑窗口选中输入的文字，右击在弹出的快捷菜单中执行《css样式》的《x2》命令，为文字应用css样式。按下ctrl+s组合保存文件，按下F12键预览在IE中。
什么是表格
表格，是指按所需的内容项目画成格子，分别填写文字或数字的书面材料，便于统计查看。是人们表达解释事务性质所运用的数据传达形式，在经济领域或者统计活动中运用很是广泛。
在Microsoft Office 中：
表格：表格由一行或多行单元格组成，用于显示数字和其他项以便快速引用和分析。表格中的项被组织为行和列。
表格由行，列，单元格三个部分组成。
在现实生活中：
表格应用于各种软件中,有表格应用软件也有表格控件,典型的像Office word,excel, 表格是最常用的数据处理方式之一，主要用于输入、输出、显示、处理和打印数据，可以制作各种复杂的表格文档，甚至能帮助用户进行复杂的统计运算和图表化展示等。表格控件还可常用于数据库中数据的呈现和编辑、数据录入界面设计、数据交换(如与Excel交换数据)、数据报表及分发等。比如Spread,ComponentOne的FlexGrid。而随着互联网时代的发展，现在还能在网上做表格，简称“网表”或“在线表格”。
表格的HTML基本语法
什么是网页
网页是一个文件，通常是HTML格式(文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页通常要透过网页浏览器来阅读。根据W3C对于WEB PAGE的定义，网页是一个信息的集合，其内容包含一个或多个网络资源的信息，同时预期使其成为单一个URI。进一步说，一个网页其包含一个或多个嵌入于网页中的网络资源使其成为单一个URI档案(HTML)，而该URI并 不再嵌入于其他档案之中。
网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，您的网站就是由网页组成的，如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。
网页是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。网页经由网址(URL)来识别与存取，是万维网中的一“页”，是超文本标记语言格式(标准通用标记语言的一个应用，文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。
静态网页
静态网页，其内容是预先确定的，并存储在Web服务器或者本地计算机/服务器之上。
特点：
1，制作速度快，成本低
2，模板一旦确定下来，不容易修改，更新比较费时费事
3，常用于制作一些固定板式的页面。
4，通常用于文本和图像组成，常用于子页面的内容介绍。
动态网页
动态网页，是取决于由用户提供的功能，并根据存储在数据库中的网站上的数据中创建的页面。
储存
当要将网页存入自己的电脑内，网页浏览器通常提供以下的选择：
只储存网页的文字部分完装封装，即连同该网页(HTML)所要用到的图像、Applet和JavaScript等文件也一并封装储存只有HTML，不作任何改动;若果网页内的连结是相对连结，可能会令图片消失只有HTML，但将网页内连结到的文件改成绝对定义有些网页浏览器容许在打印网页前预览，并可选择印底色与否，甚至放大、缩小。
篇5：页面换肤功能浅析网页设计
原理：通过存取cookie和dom操作调用不同的样式表文件来实现前台换肤，
换肤示例下载：sour.rar （酷勤网备用下载地址：sour.rar 9k）
Html代码部分:
1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href.
2.皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能)
灰色绿色黄色蓝色粉色紫色Js部分:
1.换肤方法
//设置cookie,按钮选中状态,页面皮肤
skin.setSkin=function(n){
var skins =$(“skin”).getElementsByTagName(“li”);
for (i=0;i
{
skins[i].className=“”;//初始化按钮状态
}
skin.setCookie(n);//保存当前样式
$(“skin_”+n).className=“selected”;//设置选中皮肤按钮的样式
$(“cssfile”).href=“css/main”+n+“.css”;//设置页面样式
}
2.存取cookie
//将当前皮肤n存到cookie
skin.setCookie=function(n){
var expires=new Date;
expires.setTime(expires.getTime()+24*60*60*365*1000);
var flag=“Skin_Cookie=”+n;
document.cookie=flag+“;expires=”+expires.toGMTString();
}
//返回用户设置的皮肤样式
skin.readCookie=function(){
var skin=0;
var mycookie=document.cookie;
var name=“Skin_Cookie”;
var start1=mycookie.indexOf(name+“=”);
if(start1==-1){
skin=0;//如果没有设置则显示默认样式
}
else{
var start=mycookie.indexOf(“=”,start1)+1;
var end=mycookie.indexOf(“;”,start);
if(end=-1){
end=mycookie.length;
}
var values= unescape(mycookie.substring(start,end));
if (values!=null)
{
skin=values;
}
}
return skin;
}
3.绑定换肤按钮事件
skin.addEvent=function(){
var skins =$(“skin”).getElementsByTagName(“li”);
for (i=0;i
{
skins[i].onclick=function(){skin.setSkin(this.id.substring(5))};
}
}
4.页面加载完成后设置皮肤样式
window.onload=function(){
skin.setSkin(skin.readCookie());//根据读取cookie返回值设置皮肤样式
skin.addEvent();//绑定按钮事件
来自：bbs.blueidea.com/thread-2860926-1-1.html
篇6：页面重构中的组件制作要点网页设计
在写完前面“模块化”相关的文章后，感觉试图用“模块化”本身去讲什么是“模块化”真是不容易讲得清，相信大家都多多少少能理解什么是“模块化”，但是不容易说得清，也有不少同学反馈说缺少实例。现在的团队里在推“组件化”，做为“模块化”的一个应用方式，也许正好可以从另一个方面讲讲“模块化”的实现。
这里的“组件”跟“模块”并没有本质的区别，那为什么还要提一个新的名词呢？在《 页面重构中的模块化思维 》中提到了“模块化”的应用是十分广的，而且大家已经对它有了自己的理解，想要重新认识“模块化”是不太容易的，因此决定换一个名。“模块化”更多的讲一种思维，而这里的“组件化”更多的是讲一种实现。
一个组件效果的实现，需要的支持可能是不同的，组件强调的是“效果的完整”，要保证效果完整，就需要HTML、CSS、前端脚本甚至后台脚本等的配合。
简单列下做组件时需要注意的几点：
组件需要一个底层的运行环境。特别是对于CSS，就是常说的全站公共样式，包括reset。
确保同一组件在同一底层环境中的效果完整。
组件中的定义需要注意受组件外继承定义1的影响。
在使用上面这些定义的时候，应该注意继承性对作用范围中标签的影响。同理，为了减少组件中被外层定义中的有继承性定义的影响，必要时须要在组件中reset。
在做一个组件之前，有几个问题需要先搞清楚，如：
是否需要静态化？
组件有多少种状态？
是否通过脚本程序实现状态的更改？
组件更新的频率？
这些问题对于组件如何实现更优起了很重要的作用。了解了基本的实现方式后，在制作组件所要考虑的方面，大概有下面这些：
效果的完整性（同一底层环境）
良好的性能
可移植、复用（同一底层环境）
易维护
易扩展
一个好用的组件，应该是充分考虑到上面这些点，并在它们间找到平衡。
我们来看一个例子：
首先，我们需要了解基本的实现环境：
是否需要静态化？（需要）
组件有多少种状态？（三种基本状态：正常、当前、已完成）
是否通过脚本程序实现状态的更改？（不使用）
组件更新的频率？（较低）
第一步第二步第三步第一步第二步第三步第一步第二步第三步
.flow_step{width:950px;height:25px;margin:20px auto 10px;padding:0;}.flow_step ol{margin:0;padding:0;}.flow_step li{float:left;padding:0px 15px 0px 0px;list-style.:decimal inside;background:url(step.png) #E6E6E6 no-repeat 100% -50px;color:#333333;font:700 14px/25px “宋体”;text-align:center;}
/* 当前步骤 */.flow_step li.current{background-color:#FF5500;color:#FFFFFF;}
/* 已完成步骤 */.flow_step li.done{background-position:100% 0px;background-color:#FFD98D;color:#FF6600;}
/* 已完成无当前步骤 */.flow_step li.done_none{background-position:100% -50px;background-color:#FFD98D;color:#FF6600;}
/* 当前步骤的上一步 */.flow_step li.current_prev{background-position:100% -25px;background-color:#FFD98D;}
/* 最后一个步骤 */.flow_step li.last{background:none;background-color:#E6E6E6;}
/* 最后一个步骤为当前步骤 */.flow_step li.last_current{background:none;background-color:#ff5500;color:#FFFFFF;}.flow_step li.last_current_none{background:none;background-color:#FFD98D;color:#FF6600;}.flow_step .cols3 li{width:301px;}.flow_step .cols4 li{width:222px;}.flow_step .cols5 li{width:175px;}
完成效果见 Demo ，再看看它几个方面的分析：
效果的完整性，可移植、复用，良好的性能：没问题
易维护：较差。HTML维护量较大，每个状态需要一个新的HTML代码；样式的组合需要花点时间理解。
易扩展：较差。新增一个5步的导航，需要增加10个HTML代码片段；样式基本不需要更新。
较难做成程序模板，HTML代码量较大。
同一个效果，如果基本的实现环境有所改变，可能就需要一种新的作法：
是否需要静态化？（需要）
组件有多少种状态？（三种基本状态：正常、当前、已完成）
是否通过脚本程序实现状态的更改？（可使用CGI）
组件更新的频率？（有多种步骤，3~5步）
有多个步骤同在一个页面的情况
第一步第二步第三步
/* 组件页面流程图 */.flow_step{width:950px;height:25px;overflow:hidden;margin:20px auto 10px;padding:0;}.flow_step ol{width:110%;margin:0;padding:0;}.flow_step li{float:left;padding:0px 15px 0px 0px;list-style.:decimal inside;background:url(step.png) #e6e6e6 no-repeat 100% -50px;color:#333333;font:700 14px/25px “宋体”;text-align:center;}.flow_step .cols3 li{width:301px;}.flow_step .cols4 li{width:222px;}.flow_step .cols5 li{width:175px;}.flow_step .cols6 li{width:143px;}
/* 当前步骤效果 */.flow_step_no1 .step_1,.flow_step_no2 .step_2,.flow_step_no3 .step_3,.flow_step_no4 .step_4,.flow_step_no5 .step_5,.flow_step_no6 .step_6{background-position:100% -50px;background-color:#FF5500;color:#FFFFFF;}
/* 最后一步去箭头 */.cols3 .step_3,.cols4 .step_4,.cols5 .step_5,.cols6 .step_6{background-image:none;}
/* 当前步骤时前一步的效果 */.flow_step_no2 .step_1,.flow_step_no3 .step_2,.flow_step_no4 .step_3,.flow_step_no5 .step_4,.flow_step_no6 .step_5{background-position:100% -25px;background-color:#FFD98D;color:#FF6600;}
/* 前前步骤时除去前一步外已完成的效果 */.flow_step_no3 .step_1,.flow_step_no4 .step_1,.flow_step_no4 .step_2,.flow_step_no5 .step_1,.flow_step_no5 .step_2,.flow_step_no5 .step_3,.flow_step_no6 .step_1,.flow_step_no6 .step_2,.flow_step_no6 .step_3,.flow_step_no6 .step_4{background-position:100% 0;background-color:#FFD98D;color:#FF6600;}
/* 最后一步时的效果 */.flow_step_no3 .cols3 .step_3,.flow_step_no4 .cols4 .step_4,.flow_step_no5 .cols5 .step_5,.flow_step_no6 .cols6 .step_6{background-color:#ff5500;color:#ffffff;}
/* 已完成无当前步骤 */.flow_step_no1_n .step_1,.flow_step_no2_n .step_2,.flow_step_no3_n .step_3,.flow_step_no4_n .step_4,.flow_step_no5_n .step_5,.flow_step_no6_n .step_6{background-position:100% -50px;background-color:#FFD98D;color:#FF6600;}.flow_step_no2_n .step_1,.flow_step_no3_n .step_2,.flow_step_no4_n .step_3,.flow_step_no5_n .step_4,.flow_step_no6_n .step_5{background-position:100% 0;}.flow_step_no3_n .cols3 .step_3,.flow_step_no4_n .cols4 .step_4,.flow_step_no5_n .cols5 .step_5,.flow_step_no6_n .cols6 .step_6{background-color:#FFD98D;color:#FF6600;}
完成效果见 Demo ，再看看它几个方面的分析：
效果的完整性，可移植、复用，良好的性能：没问题
易维护：一般。HTML维护简单，多个步骤、状态同在一个HTML；样式的维护点较多。
易扩展：一般。HTML扩展性较好；样式的扩展性一般，基本不需更新。
可较方便的制作为程序模板。
从上面的例子可以看出，同样的效果，不同的实现方式，它的可维护、可扩展等等特性是不大相同的，在CSS森林群里讨论这个图的实现时，还看到了上面两种之外的实现方式，像完全使用脚本将各个状态输出等。
近期对模块化实现方式的一点总结，欢迎讨论。
1常用有继承性的样式定义：
text-indent
text-align
layout-flow
writing-mode
line-break
white-space
word-wrap
list-style
list-style-image
list-style-position
list-style-type
font
font-style
font-variant
font-weight
font-size
line-height
font-family
color
text-transform
letter-spacing
word-spacing
本文来自：www.cssforest.org/blog/index.php?id=146
篇7：网页设计制作规范
网页设计制作规范
网页设计制作规范发布时间： 2003-11-26 作者：秩名
总 论
本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。
/基 本 要 求
1. 在网站根目录中开设images common temp 三个子目录，根据需要再开设media 子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等；common 子目录中放css、js,、php、include 等公共文件；temp 子目录放客户提供的各种文字图片等等原始资料；media 子目录中放flash, avi, quick time 等多媒体文件 。
2. 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
3. temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。
4. 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂，
/脚 本 编 写
我们应该有一个脚本整体风格一致的概念，意思是一个月后和一个月前的你写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致，因为我们不可能永远孤立的开发，你随时都有可能和三个月前的自己合作（你的客户要求改版），也经常要和工作室中不同的`同事共同开发一个项目，还有可能被要求修改已经离职人员开发的脚本，当然你自己也有可能会扔下一个项目给后来的同事。
1. Html 文件的通用模板：
其他meta 标 记
样式表定义
客户端Javascript 函数定义及初始化操作
… …
补充：
为了保证网站能够与下一代的web 语言xml 标准兼容，所有的HTML 标签的属性都要用单引号或者双引号括起，即我们应该写 而不 是 .
2. 允许全文检索的页面，为了使Internet 上的搜索引擎能够有效检索，在频道的首页的html的
之间应该加入Keywords 和Description 元标记，例如 ：3. CSS 文件的格式样例代码 ：
p { text-indent: 2em; }
body { font-family: “宋体”; font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}
table { font-family: “宋体”; font-size: 9pt; line-height: 20px; color: #000000}
a:link { font-size: 9pt; color: #FFFFFF; text-decoration: none}
a:visited { font-size: 9pt; color: #99FFFF; text-decoration: none}
a:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a:active { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:link { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:visited { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:active { font-size: 9pt; color: #FF9922; text-decoration: none}
.blue { font-family: “宋体”; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}
-->
这里尤其要注意的是a:link a:visited a:hover a:actived 的排列顺序一定要严格照上面的样例代码，否则或多或少会出问题。另外我们规定重定义的最先，伪类其次，自定义最后，便于自己和他人阅读！
为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。
在写
| 缩进两个半角空格，&l t;td> 中如果还有嵌套的表格，
|
