网页开发基础流程

制作步骤：

  1，创建一个完整的网站目录结构：

      网站（文件夹）：管理当前网站中所有文件

      index.html/default.html（文件）：入口文件

      css       （文件夹）：管理所有css文件

      js         （文件夹）：管理所有js文件

      images（文件夹）：管理网站所有图片

  2，准备PSD（用于转换为html页面的设计图）

  3，确定一种开发方式：

    a）从上到下的方式：（比较适合新手）

    b）先确定结构再在结构中填充内容（老司机）

  4，css初始化（清除浏览器中标签的一些默认样式，可参考新浪首页index.css）

                         http://necolas.github.io/normalize.css/    一个国外的初始化包推荐

@charset "UTF-8";

    a）去掉标签的默认margin和padding

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{
    margin:0;
    padding:0;

}

* {
   /*  box-sizing: border-box; */
    /* C3盒模型，宽高固定 */
}

 

    b）去掉图片的边框,改变对齐方式

img {
    border: 0;
    vertical-align: top;
}

    c）去掉ul前面的小点

ul{
    list-style:none;
}

    d）去掉input标签默认的padding-top，padding-bottom，border

input{
    padding-top:0;
    padding-bottom:0;
    border:0;
}

    e）去掉a标签的下划线

a{
    text-decoration: none;
}

    f）给body设置一个统一的字体样式和背景颜色以及宽度（视情况）

body {
    font-family: "Microsoft YaHei",Arial,"Hiragino Sans GB",Sans-Serif;
    font-size: 12px;
    color: #9a9a9a;
    background: #fff;
    width: 100%;
    margin: 0 auto;
    /* PC开发 */
    min-width: 1200px;
    max-width: 1920px;
    /* 移动web开发 */
    max-width: 700px;
}

    g)左右浮动，清除浮动

.fl{
	float: left;
}
.fr{
	float: right;
}
.clearfix:after{
	content: "";
	height: 0;
	display: block;
	visibility: hidden;
	clear: both;
}
.clearfix{
	*zoom:1;
}

  5，开始网站代码的书写

    1）完成网站所有页面统一的头部和尾部

        temple.html---------->temple.css