美食每刻网站制作

网站制作步骤：

1、创建一个完整的目录结构

• meishimeike（文件夹）：当前网站的入口文件夹
• index.html/default.html(文件)：当前网站的入口文件
• css（文件夹）：管理当前网站中所有的css文件
• js（文件夹）：管理当前网站中所有的js文件
• images（文件夹）：管理当前网站中所有的图片

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

3、确定一种开发方式

• 从上到下的方式：（比较适合新手）
• 先确定结构再在结构中填充内容：（比较适合老司机）

4、css初始化（清楚浏览器标签的默认样式如：body中的margin、不同浏览器出现的问题等）

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

• 去掉图片的边框：

img{

    border: none;

}

• 去掉ul前面的小点

ul,ol{

    list-style:none;

}

• 去掉input标签默认的padding-top，padding-bottom

input{

    padding-top:0;

    padding-bottom:0;

    font-family:"SimSun","宋体";

}

• 去掉a标签的下划线

a{
     text-decoration: none;
}

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

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

• 左右浮动、清楚浮动

.fl{
     float: left;
}
.fr{
     float: right;
}
/*清楚浮动代码*/
.clearfix:after {
     content: "";
     height: 0;
     line-height: 0;
     display: block;
     visibility: hidden;
     clear: both;
}
.clearfix{
     zoom: 1;
}

5、开始网站代码的书写

• 先完成所有页面统一的头部和尾部
• temple.html