静态网页的制作（美食美刻）
以下所有内容均是通过所看教程记录的笔记。
静态网页制作步骤：
1. 创建一个完整网络目录结构
一个文件夹：管理当前网站中所有的文件
index.html/default.html（文件）：当前网站的入口文件
css（文件夹）：管理当前网站中所有的css文件
js（文件夹）：管理当前网页中所有的js文件
images（文件夹）：管理当前网站中所有的图片
2. 准备一张PSD（用于转换成html页面的设计图）
3. 确定一种开发方式
a) 从上到下的方式（适合新手）
b) 先确定结构再在结构中填充内容（比较适合老司机）
4. css初始化
（必须写在代码中的一部分）**（清除浏览器中标签的一些默认样式）-> 点击可参照新浪网源码
（用common.css来存放css初始化代码)
a) 去掉标签的默认margin和padding
b) 去掉图片的边框
c) 去掉ul前面的小点
d) 去掉input标签默认的padding-top,padding-bottom,border
e) 去掉a标签的下划线
f) 给body设置一个统一的字体格式和背景颜色
body{
font:normal normal 12px "宋体";
color:#4c4c4c;
background-color:white;
}
g} 左右浮动，清除浮动
.fl{float:left;}
.fr{float:right;}
.clearfix:after{content:"";height:0;line-height:0;visibility:hidden;clear:both;}
.clearfix{zoom:1;}5. 开始网站代码的书写
完成网站所有页面统一的头部和尾部：
temple.html temple.css（sublime 根据 查看->布局->列数 可以操作多页面）
通栏 版型（多个部分可能具有相似的版型，所以设置一个即可）
统一的头部
对于logo的处理
/*疑问：为什么不把美食美课这四个字删了？？？*/
/*答：对搜索是有帮助的。让页面中的美食美刻关键字更加突出*/
<h1>
<a href="#" >美食美刻</a>
</h1>
.logo .l_left h1 a{
display:inline-block;
width:221px;
height:97px;
background:url(../images/logo.png);
text-indent:-9999em;
} 
对于页面头部的输入框、按钮
外边框：outline:none;
<div class="l_center f1">
<input class="txt f1" type="text" placeholde="请输入菜谱、食材、菜单">
<input class="btn f1" type="button" value="搜索">
</div>
.logo .l_center{padding:1px;border-radius:5px;/*设置圆角*/}
.logo .l_center .txt{outline:none;}
.logo .l_center .btn{border-radius:0px 5px 5px 0px;}/*左上、右上、右下、左下*/
注册登录(qq和微博的小图是通过ps处理在同一个图片里的）
<div class="l_right fr">
<ul>
<li><b></b><a href="#">QQ注册</a></li>
<li><b class="sina"></b><a href="#">微博登录</a></li>
<li><a href="#">注册</a></li>
<li><input type="button" value="登录></li>
</ul>
</div>
.logo .l_right{margin-top:35px;}
.logo .l_right li{
float:left;
height:30px;
line-height:30px;
margin-left:20px;
}
.log .l_right a{color:#fff;}
.logo .l_right input{
width:56px;
height:30px;
font-size:14px;
}
.logo .l_right li b{
display:inline-block;
width:24px;
height:20px;
background:url(../images/sprite.png);
vertical-align:middle;
}
.logo .l_right .sina{
background-position:0 -27px;
}统一的尾部
小边框（含凹陷矩形）
子绝父相
<div class="foot">
<div class="f_border">
<div>
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
</div>
<div class="center">
<div class="f_left">测试文本</div>
<div class="f_right">测试文本</div>
</div>
</div>
</div>
.foot{height:273px;padding:10px;background-color:#2F2F2F;}
.foot .f_border{
height:273px;
border:1px soild #FFD283;
position:relative;
}
/*子绝父相！！！*/
.foot .f_border b{
position:absolute;
width:17px;
height:17px;
background:url(../images/circle.png);
/*circle.png是用ps画的一个小圆*/
}
.foot .f_border .b1{top:-1px;left:-1px;background-position:right bottom;}
.foot .f_border .b2{top:-1px;right:-1px;bakckground-position:left bottom;}
.foot .f_border .b3{bottom:-1px;right:-1px;background-position:left top;}
.foot .f_border .b4{bottom:-1px;left:-1px;backgournd-position:right top;} 
底部右侧列表
<div class="center">
<div class="f_left f1">
<ul>
<li>xxxxx<span class="fz14"><span class="cRed">xxx</span></span>
<li>xxxxx<span class="fz14"><span class="cRed">xxx</span></span>
<li>xxxxx<span class="fz14"><span class="cRed">xxx</span></span>
<li>xxxxx<span class="fz14"><span class="cRed">xxx</span></span>
</ul>
</div>
</div>
.fz14{font-size:14px;}
.cRed{color:#FF3232;}
.foot .f_left{margin-top:55px;color:#CCC;}
.foot .f_left li{height:33px;line-height:33px;}
底部右侧列表（上面的四个图片都是经过ps处理的）
<div class="f_right fr">
<ul>
<li>
<a href="#">
<s></s>
<span>点击进入<br/>爱美食微博官网</span>
</a>
</li>
..........
<ul>
</div>
.foot .f_right{margin-top:30px;}
.foot .f_right li{
float:left;
width:105px;
height:100px;
background-color:blue;
/*高度剩余法*/
margin-left:20px;
}
.foot .f_right li a{
display:inline-block;
color:#666666;
text-align:center;
}
.foot .f_right li s{
margin-bottom:10px;
display:inline-block;
width:105px;
height:105px
background:url(../image/sprite.png) no-repeat -327px 0px;
}2）网页主体部分的书写（新建一个html和css文件）
登录页面主体
<div class="main center">
<div class="m_left f1">
<img src="images/cookie.png" alt="">
</div>
<div class="m_right fr">
<h2>美食美刻</h2>
<div class="uName_pwd">
<input class="txt" type="text" placeholder="">
<input class="btn" type="password">
</div>
/*h2标签是一个块级元素，input标签行内块级元素，这两个在规范里不能同级!!!*/
<div class="remember">
<span class="fl">
<input type="checkbox">自动登录</span>
<a class="fr" href="#">忘记密码?</a>
</div>
<div>
<input type="button" class="loginBtn" value="登 录“>
">其它方式
- ">
- ">#">QQ登录 <li class="fl l_t_c"><a href="#">微博登录</a></li> <li class="fr"><a href="#">邮箱注册</a></li> </ul> </div> </div> .main{height:800px;} .main .m_left{margin-top:130px;} .main .m_right{ width:450px; height:620px; background-color:#fff; margin-top:85px; padding:0 16px; } .main .m_right h2{ font:normal 400 30px "微软雅黑"; height:100px; line-height:100px; padding-left:25px; } .main .m_right .uName_pwd input{ width:398px; height:100px; border:1px soild #D8D8D8; font-size:24px; background:url(../images/sprite.png) no-repeat; padding-left:50px; } .main .m_right .uName_pwd input .txt{background-position:10px -480px;} .main .m_right .uName_pwd input btn{margin-top:34px;background-position:10px -538px;} .main .m_right .remember{height:100px;font:normal normal 24px/100px "微软雅黑";} .main .m_right .remember input{width:24px; height:24px;vertical-align:middle;} .main .m_right .loginBtn{ width:450px; height:60px; background:#E60012； font-size:24px; color:#FFF; } .main .m_right .other{font:normal normal 20px "微软雅黑";} .main .m_right .login_type li{ font-size:14px; height:20px; background:url(../images/sprite.png) no-repeat; line-height:20px; padding-left:20px; } .main .m_right .login_type a{color:#666;} .main .login_type .l_t_c{margin-left:120px;}
（图标后面不能有内容！！！）
3）首页页面（新建一个html文件，将统一的头部和尾部放进文件中）
首页导航栏
<div class="nav">
<div class="center nav_c">
<ul>
<li><a class="cRed" href="#">首页</a></li>
......
</ul>
</div>
</div>
.cRed{border-bottom:1px soild red;}/*字体下方线（底部边框）*/
.nav{height:77px;}
.nav .nav_c{height:77px;}
.nav .nav_c li{float:left;height:77px;font:noraml noraml 18px/77px "微软雅黑";margin-right:25px;}/*高度剩余法*/
.nav .nav_c li a{color:#666;}
.nav .nav_c li a:hover{color:red;}首页banner
.h2Title{height:76px;font:normal 700 24px/76px "微软雅黑";text-align:center;}
<div class="banner">
<h2 class="h2Title">今日早餐推荐：……</h2>
<ul class="clearfix">
<li>
<div>
/*行内元素包裹块级元素是不符合规范的（虽然不报错）*/
<a href="#">
`<img src="images/caomei.png" alt="">
</a>
<div class="des">
<p class="p1">美味面包片</p>
<p class="p2">草莓面包片，营养双管齐下</p>
/*子绝父相*/
</div>
</div>
</li>
.......................
</ul>
/*行内元素和块级元素不能同级*/
<div class="arrow">
<a href="#" class="a_left">
<span class="word"><span class="fz14">夜宵</span><br/>22:30-01:30</span>
<span class="img"></span>
</a>
<a href="#" class="a_right"></a>
</div>
</div>
/* .xxx .xxx .xxx（一般不超过三个） */
.p1{height:36px;font:normal 700 18px/36px "微软雅黑";padding-left:10px;}
.p2{font-family:"微软雅黑";padding-left:10px;}
.banner{position:relative;}
.banner ul{width:1320px; margin:0 auto;}
.banner ul li{float:left;width:330px;background-color:red;}
.banner ul li img{vertical-align:middle;position:relative;}
.banner .des{width:330px;height:63px;background-color:rgb(255,255,255,.6);position:absolute;bottom:0px;left:0px;}
.banner .arrow a{display:inline-block;wdith:145px;height:77px;position:absolute;top:160px;bakground:url(../images/sprite.png)no-repeat;}
.banner .arrow .a_left{left:180px;background-position:0 -64px;}
.banner .arrow .a_right{right:180px;background-position:0 -164px;}
.banner .a_left .word{display:inline-block;height:48px;line-height:24px;margin:15px 15px 0 25px;text-align:right;}
.banner .a_left .img{vertical-align:middle;display:inline-block;width:16px;height:48px;background:url(../images/sprite.png) no-repea 0 -264px;margin-top:15px;}首页搜索区域
<div class="search">
<div class="s_center">
<input class="txt fl" type="text" value="请输入菜谱、食材">
<input class="btn fl" type="butto" value="搜索">
/*input是行内块级元素，会将两个之间的间隙解析为空格，解决方法有两种，都设置左浮动，或者去掉两者之间的空格*/
</div>
</div>
.search{height:100px;background-color:;overflow:hidden;/*解决margin塌陷现象*/}
.search .s_center{width:728px;height:77px;margin:0 atuo;margin-top:12px;background-color:;margin:0 auto;margin-top:12px;}
.search .s_center .txt{width:510px;height:77px;outlie:none;font:normal normal 18px "微软雅黑";padding-left:45px;}
.search .s_center .btn{widht:173px;height:77px;background-color:red;border:none;outine:none;font:normal normal 18px "微软雅黑";}首页菜单部分
<div class="arrow-pos">/*只是需要这个div提供一个父元素，用来保证箭头的子绝父相*/
<div class="menu center">
<h2 class="h2Title">5月，立夏需养心<a href="#" class="more"更多菜单 </a></h2>
<ul class="img clearfix">
<li>
<div>
<a href="#">
<img src="images/fruit.png" alt="">
</a>
</div>/*没有意义的div，使得a和div不放在同一级*/
<div class="word">
<p class="p1">四月水果当季尝</p>
<p class="p2">你舍得错过当季这些甜美的果实吗？</p>
/*之前的p1,p2都写好的固定样式。*/
</div>
</li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="arrow">
<a href="#" class="a1"></a>
<a href="#" class="a2"></a>
</div>
.more{position:absolute;top:0;right:0;color:;font-size:12px;}
.menu{onverflow:hidden;/*超出父容器的部分直接切掉*/}
.menu .img{wdith:1010px;}
.menu .img li{width:334px;float:left;}
.menu .img li a{}
.menu .img img{vertical-align:middle;/*解决下面多出一像素的问题*/}
.menu .img .word{width:334px;height:57px;backgroun-color:;}
.arrow_pos{width:1200px;magin:0 auto;position:relative;}
.arrow_pos .arrow a{display:inline-block;/*不然a标签直接设置宽高是没有意义的*/width:30px;height:98px;position:absolute;top:145px;background:url();}
.arrow_pos .arrow a1{left:30px;background-position:0 -320px;}
.arrow_pos .arrow a2{right:30px;background-position:-30px -320px;}
<div class="food center">
<h2 class="h2Title">5月，健脾去湿热<a class="more" href="#">更多食材 </a></h2>
<ul class="f_nav clearfix">/*没有高度的情况*/
<li class="bgRed>
" href="#">水果
</li>
.....
<ul>
<ul class="f_img clearfi">
<li>
<a href="#">
<img src="" alt="">
</a>
<span>xxx</span>
/*子绝父相*/
</li>
....
</ul>
</div>
.white{color:white !important;}
.bgRed{background-color:red;}
.food{overflow:hidden;}
.food .f_nav{background-color:#fff;}
.food .f_nav li{float:left;height:42px;width:103px;font:normal 700 22px/42px "微软雅黑";text-align:center;}
.food .f_nav li a{color:;}
.food .f_img{width:1010px;}
.food .f_img li{width:167px;height:167px;float:left;text-align:center;position:relative;}
.food .f_img li img{vertical-align:middle;/*图片上下对齐*/}
.food .f_img li span{position:absolute;bottom:0;left:0;height:60px;width:167px;backgroud-color:rbga(255,255,255,.6);line-height:60px;font:normal 700 18px/60px "微软雅黑";}多多练习，熟能生巧。