从哪里开始

        当然，从最基础的开始。这里最重要的莫过于学会怎样切割页面，所谓切割，即能通过div标签的嵌套方式进行页面分割，配合少量的css样式，勾勒出想要的，但并不美观的页面。若能至此，那么就基本pass了。总结起来，即熟悉常用的标签在界面上产生的效果。

       对于小白，在学习阶段，难免会碰到例如导航栏是怎么切割出来的，毫无头绪，怎么办呢？

       打开浏览器，任意搜索一网页，通过浏览器自带的调试工具（F12进入调试）开始调试。具体如图1浏览器调试操作图所示。

图1浏览器调试操作图

       简单来说，即通过此类工具快速定位到所需查看的模块，然后参照他人的做法，仿制自己的页面。在前端学习过程中，个人认为，大量的仿制为重要的且必不可少的学习过程。

当页面切割不成为时，相关css样式的使用当然也应跟进，尽量让自己的页面美观。

 从哪里转折

       话说，当对一个页面有足够的的了解后，这里的足够即指的是当看到一个网页，我们能比较快速的判断其是通过什么手段切割并制作其中的各个模块，并通过实践证明自己的想法切实可行。那么，我们可以开始第二阶段的学习了，即转折。

       现在，我们已会切割页面了，一个网页拿到后，对于其中的每个页面模块，我能判断其使用了哪些标签。那么问题来了，我的界面还是那么让人糟心，怎么办呢？

这里，我们就要学习一些前端的工具。如果说每一个网页的制作都需要我们前端工程师一行一行的把代码敲出来，那绝对够呛！

       我们一定听说过bootstrap，jquery等等啥的，虽然不知道它有什么用，或者知道但是不会用。所以，在这里就得学会，怎么使用这些已开发好的前端资源。如果我说图2导航栏图是我花了一两分钟时间做出来的，可信吗？

图2导航栏图

   绝对可信，因为仅仅是引用了bootstrap和jquery资源，并从教程上拖拽了一块导航栏（附件中附有该demo，以及所需的资源包，源码有注释）。

   值得一提的是，这里我们需要做的，并不是跟着教程学习，而是找一个属于自己的idea（若无，那么依然可以仿制，只不过这次徐得保持功能及美观，但不必全然相保持一致，理由就是同样的功能实现，在界面上却可以有不同的展示方式），使用这些工具，去拖拽，想要什么，从教程上找到相应的模块，拿到后通过不断的修改实践并应用，自然而然就会掌握。

     值得注意的是，万不可被教材教程牵着走，前端知识庞大，当然是用什么即学什么。

 炫酷前端

      如果说以上这些我们都会了，那么一个普通的网页开发任务，绝对难不倒我们。所以，为什么该有这部分呢？

理由很简单，为了高效。能完成一个前端项目，同时也要注意整个项目周期。因此，前端并不能占有很长的项目周期时间，具体的后台功能实现以及调试依然为主体，且此过程难免会出现需求的变更而导致需要不断的修改界面。

       因此，为了高效，我们当然得收集资源，即网站模板，各种插件，以及注意平时遇到的各种新颖实现的积累。

      有了这些，那么我们即可通过修改模板的方式，快速获取所需的前端的功能模块。后续不过通过不断的修改调整，让其更符合项目需求（附件附有一份后台前端源码模板）。

注：

1.bootstrap资源下载位置：http://v3.bootcss.com/

对于开发过程下载编译且压缩后的版本即可

2.jquery资源下载位置：http://jquery.com/

同理开发过程仅需下载编译后的版本即可

另文章所提的demo等资源在csdn资源上可所搜到，博主已上传