来看看：帮我写出更好的CSS代码的一些技能
一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。网页制造WEB文章简介：这只是一些帮我写出更好的代码的一些技能。固然这毫不是此文的停止，当我发明了别的技能时，我会持续分享的。
1.Reset
真的，要一向利用一个reset，不管是利用EricMeyerReset、YUIReset、大概你本人的定制的reset，必定要利用。
这能够复杂到仅仅将一切元素中的margin和padding属性往失落:
html,body,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,blockquote,
pre,form,fieldset,table,th,td{margin:0;padding:0;}
EricMeyer和YUI的Resets款式是很棒的，但对我来讲，它们走的太远了。我想要你扫除一切器材，然后再从头界说元素的很多属性。这就是EricMeyer所保举的。假如有更无效的办法是用它的话，你不该该只是拿来他的款式文件，将它间接放到本人的项目中——提炼它，在它的基本上重修，把它酿成你本人的。
哦，请不要再如许:
*{margin:0;padding:0;}
它被利用的中央太多了，假如把一个单选框的padding往失落，你以为会产生甚么事变？表单位素有的时分会有些对照时兴的体现，以是最好仍是让它们坚持原状吧。
2.按字母排序
一个小测试
上面的两个例子，你以为哪一个能较快找到margin-right属性的地位？
例1
div#headerh1{
z-index:101;
color:#000;
position:relative;
line-height:24px;
margin-right:48px;
border-bottom:1pxsolid#dedede;
font-size:18px;
}
例2
div#headerh1{
border-bottom:1pxsolid#dedede;
color:#000;
font-size:18px;
line-height:24px;
margin-right:48px;
position:relative;
z-index:101;
}
不要告知我例2没有例1快！经由过程将这些款式的属性依照字母排序，你所创立的联贯性将帮你削减消费在寻觅某个属性的工夫。
我晓得有的人以这类办法构造排序，其别人又用别的的办法来构造款式的按次。可是在我地点的公司，我们分歧下定决计依照字母来排序。当你和其别人配合开辟代码的时分，这类办法一定对你有效。每次看到某个款式表没有依照字母排序，我就很厌恶，由于它们看起来对照混乱无序……
网页制造WEB文章简介：这只是一些帮我写出更好的代码的一些技能。固然这毫不是此文的停止，当我发明了别的技能时，我会持续分享的。
3.有构造的
你应当构造你的款式，如许你就能够对照简单的找到想要的内容和放在一同的相干条目。这可使用正文的办法。比方，我是如许构造我的款式表的:
4.分歧性
不管你如今以何种体例编码，坚持下往。我非常厌恶关于完整单行大概完整多行的争议，这自己是没有甚么可争议的!每一个人都有本人的意见，以是就用你以为对的并自始至终坚持下往。
就我团体而言，我利用夹杂形式，假如一个款式有凌驾3条属性，我就接纳多行：
div#header{float:left;width:100%;}
div#headerdiv.column{
border-right:1pxsolid#ccc;
float:right;
margin-right:50px;
padding:10px;
width:300px;
}
div#headerh1{float:left;position:relative;width:250px;}
我利用这类办法是由于我的文本编纂器一行在换行前恰好能包容也许3个属性，假如没有太多的属性，明显单行要比多行更容易读。
5.从准确的中央入手下手
在你写好你的标签之前不要动你的款式文件
当我筹办完工的时分，在我创立一个CSS文件之前，我反省并对全部文档举行编码(HTML)，从入手下手body标签到停止全部body标签。不增加任何过剩的div、id或class。我会增加一些通用的div，好比头部，内容，底部，由于我晓得这些器材一定会有。
经由过程先编码全部文档，你能够制止呈现多DIV症或多类症，这些偏差有的时分多是致命的！你只必要在你入手下手写CSS和断定必要别的的器材来完成相干效果的时分再到场它们。
利用CSS的向后选择器来界说子元素。不要间接主动的为元素增加类或id。请记着，假如一个文档没有优秀的格局(布局)，CSS是毫无代价的。
*编纂注:我不克不及充足的夸大这一点。就像Trevor说的,在没有100%完成HTML之前，不要动你的CSS文件。
结论
这只是一些帮我写出更好的代码的一些技能。固然这毫不是此文的停止，当我发明了别的技能时，我会持续分享的。
/*****Reset*****/
Reset
/*****BasicElements*****/
为基础元素界说款式:body,h1-h6,ul,ol,a,p,etc.
/*****GenericClasses*****/
界说一些独自的款式，好比，浮动、往失落元素的底部边距等。
是的，大概他们不敷语义化，可是，它们对无效的编码是很无效的。
/*****BasicLayout*****/
界说基础模板:头部、底部、等，用来界说网站的基础布局
/*****Header*****/
界说头部的一切元素
/*****Content*****/
界说内容地区的一切元素
/*****Footer*****/
底部款式
/*****Etc*****/
持续界说别的款式经由过程利用正文和对类似元素举行分组，能够更快的找到你必要的内容。
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。
页:
[1]