新人不懂怎么下手？传说中的前端流程呐~~~

来源：互联网发布：电气画图用什么软件编辑：程序博客网时间：2024/06/10 13:49

Freshman。前端开发流程。

又一次痛苦的开始。

为了之后不再无头苍蝇般乱碰，我要给自己一个做事流程。

其实我觉得最简单就是

1.先切图

哈哈哈~看到没看到没~~开始不用敲代码~~~看看图，大致了解结构~~~切图就好了~~

切图难么~？不难~容易么~？非要一次切到位完全符合美工产品测试的要求对齐到无极限其实也不容易~

所以，千万要不怕糙，切一次无所谓的图~~~~能差不多一次出来就行了~~到时候有问题再改呗~~~小提示：放大沿着像素边切

其实切图好简单好简单，就是切是img的部分~~~其它文字链接，哪怕是加粗或者啥啥啥的文字效果，不管。

按钮一般就是直接切图，不另行分开，这样可以简便很多，而且可以房子忽略某些美工做出来的效果。

切好之后改改名字，类似于....head_ XXX , main_XX , top_XXX~~把弄好的文件夹 images 直接拖进源文件夹里。

2.建一个文件夹，里面有

3.开始写html：

当然要建好html文件啦~~一般在整个源文件夹里。

建好之后，先写一个

(.html)

<!DOCTYPE html>
<html>

<head>

（注意：不管，是不是之前有类似的网页！！！除非是只换一块字/图片修改，而且还是要有源文件的！！其它都一样，否则，按照这样的进阶，对于初学者你，显然心理上会更乐意接受~~）

4.（html）加轻松一点的东东进去~

比如

（<title> </title>）

比如body里面盒子分配的名称注释。当然，这要取决于，你的psd是什么样子的。

所以呢，你的代码，都没写啥呢，就这么多了哈哈~~~是不是很有成就感呐呐呐~~~~

<!DOCTYPE html>
<html>

<head>

（ ）

（ ）

（ ）

（ ）

</body>

</html>

5.同时呢，可以开始写css啦~~~嘿嘿嘿~~

当然，也要先建一个css文件，在css文件夹里~然后链进html里~~

href 是文件位置，rel是是告诉浏览器你将采用什么编码来对下面的内容进行处理，type是指调用样式的文件类型为CSS样式。

当然，一般只改改href 就OK了呗~~

有些部分写得和这个不太一样，比如加个 media="all" 这种~~你可以按照自己需求多写或少写。嗯哼。

于是整个html的代码就变成：

(.html)

<!DOCTYPE html>
<html>

<head>

<title> Freshman。前端开发流程。</title>

这样可以让你边写html边设置格式~比较舒适方便~~

6.嘻嘻....接下来，就是重头戏之一啦~~~CSS文件本身部分。

先给空空的文件，加个头 ~~

@charset "utf-8";
/* CSS Document */

嘻嘻嘻~~~空文件突然有内容了是不是很有成就感呐~？

下一步就是加注释嘛~~~嘻嘻嘻~~有新文件都要注释~~结构清晰~容易改动~~利人利己，天下大吉~~~~~

=======================================================================

CSS Reset

=======================================================================

Banner Rules

=======================================================================

Head Rules

=======================================================================

Top Rules

=======================================================================

Main Rules

=======================================================================

Foot Rules

=======================================================================

和html一样一样的~~清晰又美好~之后不管是妞妞自己改还是别人看，都很清楚~~要注意的是注释长相和html里不太一样喔~~

第一行当然要加 Reset 啦，要是页面很多，多个css的话，这个reset可以作为一个单独 reset.css 链进去~要是只有一个css文件就直接在上面写呗~分类就行了~

reset.css内容

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
main,menu,nav,output,ruby,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,main,menu,nav,section{
display:block;
}
body{
line-height:1;font-family: '微软雅黑',tahoma,arial,'宋体';
}
ol,ul{
list-style:none;
}
blockquote,q{
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:'';
content:none;
}

/* Don't kill focus outline for keyboard users: http://24ways.org/2009/dont-lose-your-focus */
a:hover,a:active{
outline:none;
}

table{
border-collapse:collapse;
border-spacing:0;

}

.clearfix:after

{content:"."; display:block; height:0; clear:both; visibility:hidden; }

上面的步骤看起来有点不能直接看到效果，但亲爱的必须相信我呐~~~在后面的编程里，这里磨的刀会很利于你砍柴~~~~绝对事半功倍。

7.搞好了html和css的基本~就可以high起来~~开始大干一场了~哈哈~~亲爱的亲爱的~~你发现了没~~~~其实早在第4步你就确定了整个html的div架子呢~~~~~

华丽丽地排呗~~~

按照不同位置（top、head、main、foot）这种~从左到右，从上到下~要是多个页面的话我一般会实现公共部分先~~~

该图片图片，

src是文件位置

tppabs标签是离线浏览器下载完整个网页后，在图片或超级链接标签内加入的标签，以记录该图片或超级链接指向的原始地址。因为这个标签不是合法标签，所以普通浏览器会忽略它。

所以 tppabs不用写。

width=" height="看你心情，姑娘。

所以一般是

该文字文字~~

该链接链接~~~~

该列表列表~呐呐呐~~

<ul><li>Coffee</li><li>Milk</li></ul>

该输入框输入框~~

该下拉框下拉框~~

该单选框单选框~~

该

checkbox

checkbox

<input type="checkbox" name="bike" />

该button button~~

相应css：

.mobile-right3-paynow-button {
width: 139px;
height: 40px;
margin: 20px 85px;
background: url(../images/PaymentBusiness-paynow-button.png) center center;
border: none;
}

该插件插件。

嘿嘿~这里插件你就写个注释~

哈哈~~到底是啥插件到时候再说~~~你要知道就知道~~~不知道就算了~~~~

前面几步的关键就是~~不要卡住~~！！~~亲爱的，不要卡住~~~~流水般的编下去~~~~

所以这步叫做~~~~~~~~加上内容先~~~~~~不管它啥样，先弄进去~~~~~~那你的网站就有内容了~~~哈哈~~~么么哒~么么哒~么么哒~~

~搬来了水泥，沙子，涂料，盆栽，桌子和一切你需要的~~~~~~可以high起来啦~~~必须的必呐呐呐~~~

8.~~然后~~~在html里~~~

按照本来有的素材，加进去大概的清楚的大一点的小盒子，把图片文字以及等等，包进小盒子里面。

~~亲爱的亲爱的，不要在乎是不是每个小盒子内部都照顾到了，编程嘛，就是这样，迭代起来~~

为了防止你的纠结，直接按照位置和123456评估吧~为了防止区分不清，前面加个盒子的前缀，直接每个都加前缀~简便又开心~

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

9.~~在css里~~怎么写css呢，就是先写一个最大的盒子，有没有边，边多粗，啥颜色；

然后里面一个一个小盒子，每个盒子的规矩都是啥样的。这种

为方便起见，写几个方便的东西给你借鉴

class：

.main-box{
width: 1000px;
height: 700px;
margin: 20px auto ;
overflow: hidden;
border-style: solid;
border-width: 1px ;
border-color: #e3e3e3 ;
}

id：

step2{
width: 880px;
height: 875px;
margin: 70px auto 0px auto ;
overflow: hidden;
}

盒子里的文字：

#putIn-personaldata-title p{

}

背景（有图有真相）：

background: url(../images/banner.png) no-repeat top center;

清浮：

.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden; }

这里要注意的是...亲爱的，如果你有点手足无措忘记某个了，

求救方法排序为：

1.借鉴已有的css（这个适合于完全不清楚某个完整知识点的...比如盒子里的文字/图片不会加...这种）

2.w3school看看（这个适合于某小点忘记的，比如p里面的某几个属性忘记了...）

3.百度一下，你就知道。...我知道作为一个程序媛你应该对自己用百度感到羞耻。。。所以研究一下goagent吧~嘿嘿~

其实最好是搞几个模板，类似的拖一下进来就行。（这个有另一篇文文或者存在电脑里。）

10.接下来就是可爱的js了喵喵喵~~~这意味着马上就完成了哈哈哈~~开心吧~？快乐吧~~？愉悦吧~~~？真心木有心理压力的呐~~~因为就是四个字儿~~~拿！来！主！义！

初级阶段的你可以~~找找效果啊~~借鉴一下下啊~~自己写点简单的js啊~~~弄进来啊~~~

然后调调位置~就好啦~~

嗯，当然，不管拿不拿来都要先链进去~~

道理同上。

具体拿来主义的细节~找另一篇文章来写吧~~~喵呜~其实事实证明还是自己写比较快~~

白白~下班~么么哒~~~明天照这个节奏~干活~

跳槽之后多处不适应，需要重新定一下页面制作步骤

1.看页面（观察页面有多少，有哪些效果，大概分时间块）

2.打开ps，切图

3.打开svn，找模板（既有页面上的，svn里的，平时可积累）

4.打开sublime和koala，按照：先写html，再写Css ; Css里要先写所有大块看IE7以及360下的兼容，然后写细节。的方法，切一个公共部分

5.实现其余页面

6 0