视频提取码：knfo

制作步骤：

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

meishimeike(文件夹)：管理当前网站中所有的文件

index.html/default.html(文件)：当前网站的入口文件

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

js(文件夹)：管理当前网站中所有的js文件

images(文件夹)：管理当前网站中所有的图片

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

3． 确定一种开发方式：

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

2) 先确定结构再在结构中填充内容（比较适合老司机）

4． css初始化（清除浏览器中标签的一些默认样式）：

1) 去掉标签的默认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}

2) 去掉图片的边框：

        img{border:0}

3) 去掉ul前面的小点

        ul,ol{list-style:none}

4) 去掉input标签默认的padding-top，padding-bottom，border

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

5) 去掉a标签的下划线

a{ text-decoration: none;}

6) 给body设置一个统一的字体样式和背景颜色

body {font: normal normal 12px "宋体";color: #4c4c4c;background-color: #fae8c8;}

7) 左右浮动，清除浮动

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

5． 开始网站代码的书写：

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

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

本文来源传智播客和黑马程序员视频库，原创整理，转载请注明出处，喜欢请分享更多人

文章来源：传智播客和黑马程序员视频库