1.配置开发环境 sublime webstorm vscode Hbuilder atom
2.建立项目文件夹 为了将与项目相关的文件放在一块，便于管理和以后的维护
包括与项目相关的一些文件
主页或是首页 index.html default.html
Css文件夹 css文件的
Base.css global.css
Images文件夹 用来放置网站中的所有的图片Js文件
音频或是视频文件
3. 样式初始化
我们的结构中的标签都有默认的样式，在各个浏览器中的显示有可能不尽不同 ，为了保证网站风格的统一或是为了便于我们的开发或是维护，需要将所有的标签 原来的样式清掉，变成统一的样式风格，以便于我们的网站布局。
4. 分析网站构成
做网站的时候也有一个规范或是通例
布局的顺序一般是从上到下，从左到右
在写页面的时候，一般考虑使用标准流的元素，其次才使用浮动或是定位。
就在标准流元素当中，宽高是最稳定的，其实才使用padding,最后或者可以使用margin.
标准流： 一般像Div,p这样的块级元素，自己独占一行，像span,a这样的行内元素或是img，input这样的行内块元素，可以一行显示多个，我们把这样的显示方式叫做标准流。Normal flow
我们网站结构中的任何标签 都可以看成是一个盒模型，都可以设置宽高，只是有的元素设置了宽高之后，不起作用。
真正开始写页面之前需要获得网页的截图，希望得到好的页面截图，我使用火狐浏览器自带的截图插件截取页面
首先需要制作页面的顶部
这个顶部需要设置一个通栏(通栏就是铺满整个屏幕，而面积不到整个页面的一半。)给通栏设置一个背景颜色。
而真正写内容的地方则为版心，版心的作用（因为我们的屏蔽设备的分辨率不一样吧，因此 显示网站的风格有可能不一样的，为了提高用户的体验，将网站的显示风格统一起来，因此需要给网站设置一个版心。）版心的概念：所谓版心也就是页面中主要内容所在的区域，即页面正中的位置。
左边的内容设置一个左浮动的div
右边的内容设置一个右浮动的div，在这个div内通过使用ul li 来实现标签的显示，给div一个右浮动，再给li一个左浮动就能做到图中标签的排列形式。再通过给li设置左右的内边距来实现标签之间的空间。两个标签之间的竖杠可通过添加一个li来实现，也可以通过给a标签设置一个右边框来实现。
在这张图中有多个下拉图形，在过去的学习中，我们常常插入图片来实现静态页面的效果，但是通过反复的实践，这个下拉标也可以通过定位的方法来实现，首先我们需要通过打字法打出一个特殊的符号◇
通过两个小的标签（i a ）来呈现它
这里需要先给top-left这个父类先设置一个相对定位position：relative
然后才能够通过给子元素s 和 i 设置绝对定位来改变这两个标签的位置，如不饿给父元素设置定位，这两个元素将以浏览器的位置进行定位，将变得非常麻烦。
这里通过给i设置overflow：hidden 将s标签内的内容显示出一部分得到静态图中所需要的下拉按钮。
这个地方的效果实现主要是通过定位，掌握了定位的使用，这个效果也将容易实现。
定位的技巧：
子元素是绝对定位的时候，父元素是一个相对定位，那么 父级元素是给子元素设置范围的作用
如果三个元素之间的嵌套的话，就不一定非得是子绝父相，子绝父绝爷相。
定位首先是先找离自己最近的父级元素进行的一个定位，如果父级元素没有定位或是相对定位的话，默认是以浏览器或是文档的左上角为准，如果父级元素有相对定位或是绝对定位的时候，以父级元素的左上角为准。
在制作顶部的同时我也给网页制作了一个网页快捷标签
如何制作网站快捷图标
<link rel="shortcut icon" href="/favicon.ico" />
如果快捷图标在项目文件夹的根目录下的话，一定不要带/
一般的大型网站都将它的快捷图标放在网站的根目录下，我们可以通过访问网站的根目录来找到网站的图标
举京东的例子来说，我们在网站输入www.jd.com/favicon 我们将得到一张图片，我们可以通过这张图片到上述的网站制作icon图标
图标的具体使用
在html中的head标签内写如上内容将得到效果
今天完成的情况
下面一部分算超额完成了，主要能够理解页面顶部的实现今天任务就算完成了，目前js方面学习较少，无法实现许多功能，暂时能够做出静态页面，希望后面学习js来实现网页的更多的功能。
原文：http://www.cnblogs.com/yaowei946983706/p/5698384.html