现在导航已经出来了，但是不会跟随页面移动并且长的挺难看的，所以给他慢慢调好样式添加入css中：
#daohang {Z-INDEX: 11;background-color: #000;height: 300px;width: 120px;position: fixed;top:200px;right: 30px;text-align: center;}
#daohang a{color:#fff;font-family: \黑体\18px;font-weight: bold;text-decoration: none;line-height: 40px;vertical-align: middle;}
然后开始制作头部，将logo和搜索框制作出来，将需要的图片命名好之后放入images文件夹，在wrap中添加代码：
在css.css中定义好中间各class样式将页面的表现与psd中的展示一致。并且在a标签的href中添加链接javascript:void(0);实现鼠标指针指上去时候变成手型并且不会进行任何跳转。此链接在后期制作后台的时候会替换掉。不然会影响到网站的seo，搜索引擎的权重会因为这个降低。
然后是关于菜单的制作。菜单样式在ps中有规定颜色，并且选中的菜单会有不一样的效果，此处可以用切图，但是会导致占用很多资源导致使用起来的用户体验降低。尽量要使用文字来解决这个问题。想起来画面蛮复杂的，实际上菜单的前台其实很简单，使用ul、li标签直接制作出来就可以了：
菜单可以出效果的主要原因是定义样式，在css.css中加入样式：
.nav_menu {position: relative;height: 44px;line-height: 44px;font-size: 16px;background-color:#700702;}
.nav_menu ul li {float: left;margin:0 0.5%;} .nav_menu ul li a {display: inline-block;padding: 0 17px;color: #fff;text-align: center;}
这样添加之后菜单就已经成型了，还差一个选择的效果，给它定义一个class=”selected”。并且在css中加入：
.nav_menu ul li a:hover, .nav_menu ul li a.selected {background-color:#8C0903;text-decoration: none;}
这样子菜单的样式就已经完成了，hover定义将鼠标指上去时，而平时高亮显示出来的菜单，只需要给它加上一个selected的样式就可以了。
接下来需要给购买咨询添加一个弹出电话号码的提示框的事件，在购买咨询中加入：onclick=\请拨打电话028-********');\如下样式：
href=\
onclick=\
请
拨
打
电
话
028-********');\购买咨询
轮播的头图可以去网上找jQuery插件修改起来比较方便，找到合适的轮播插件下载下来后，将自己的图片替换上去，并且自己修改一些参数，比如速度，轮播的动画方式。前台使用规定格式的代码不要出错，不然插件也会出问题，还有就是记得要引用jQuery。
接下来是抢购栏目了，因为之前ps中制作到这个栏目都是用的图片，所以在做网页的时候也非常方便，做好div用img标签把图片放进去就好了：
对于class：mid定义的是居中，下面会引用好几次，所以作为class写入外部css中，psd中可以看出这个页面的背景是填充满页面的，所以需要定义外面包含的大块#content：
#content{background:#fdd42e;}
商品展示页面需要将标题制作成图片居中：
将图片放好之后就要慢慢的去制作商品的模板了，由于商品价格和标题以及介绍都是后台要能改动的，所以不能使用图片直接来放在页面上。先制作出一个商品的展示块：
href=\title=\宝得根庄园红葡萄酒2010(名庄预售)\宝得根庄园红葡萄酒2010(名庄预售)
立省：￥1612
抢购
后面还需要制作很多个这样的商品展示块，所以不能使用id来选择。中间所有的样式全部用class选择。其中的各种需要细心慢慢去调整，必要时可以更改定位方式position属性，relative属性是相对定位，相对于之前的容器。float属性使用时要注意方法不要影响到之后的样式。css样式中这样写：
.jiu{width:230px;height:240px;background:#f63;float:left;margin-right:5px;margin-bottom:5px;}
.jiu_one{width:230px;height:190px;background:#fff;} .jiu_two{width:230px;height:50px;background:#F63;} .font_hide {position: relative;left: 0px;top:
-72px;width:130px;height:43px;overflow:hidden;background:#fff;}
然后可以将这一块商品展示复制8次，变成页面上的样子，并且根据文案修改成不一样的文字、价格查看效果：
图 4-16 网站制作2
紧接着会发现当介绍的文案过长时div装不下那么多字只显示出来一半，需要做一个隐藏显示操作来将所有的文案显示出来，之前定义的font_hide样式现在就有用了，可以通过jQuery选择器选中所有具有font_hide样式的块为他绑定事件。所以在my.js中加入： $(\$(\
并在css中写入：
.font_hide a{text-decoration:none;color:#111;font-weight: bold;} 特别注意.font_hide中要加入两条属性，一个是透明度，一个是层次： opacity:0.7; z-index:10;
当鼠标移动上去的时候，这个div的高度变成了170像素，鼠标移开之后又恢复原样。并且这个介绍文字会有一个透明度70%。
下面来查看效果：
图 4-17 网站制作3
图 4-18 网站制作4
然后制作第二第三个商品展示栏目的时候，可以整体复制第一个商品展示栏目改掉id为content_one和content_two。然后将设计好的标题替换掉之前的图片，配色方案选择好。不要看起来特别奇怪，将背景颜色改变后可以进行进一步的商品管理设计。想要在第三个商品展示栏加上如图4-19效果的模块：
图 4-19 网站制作5
这其实也非常简单，只需要在content_two中，所有的div class=”jiu”之上加入两个div。这也是div与css技术非常方便的一点，可以像制作表格一样随意插入在某div上面。
.link .link_left, .link .link_right{font-size: 13px;}.link .link_left{float: left;}.link .link_left span{color: #FD9909;}.link .link_right{margin-left: 65px;}.link .link_right a{display: inline-block;color: #444;margin-right: 15px;vertical-align: middle;}.footer{min-width:1024px;margin: 0 auto;padding: 30px 0px;font-size: 14px;color: #fff;line-height: 160%;background-color:#000;}
首页就制作完成啦，然后将制作好的html和css保存，开始使用各种浏览器测试。很多浏览器中带有兼容性检查的插件，不过还是要手动测试一些浏览器的兼容性。需要测试的主流浏览器有：Safari、chrome、IE、Google、opera以及新出现的Edge。
首页制作完成之后开始制作子页面，制作公司简介。先把css和jQuery引用，将页面保存在html文件夹中，引用css时，需要修改路径：href=\。把首页的头部和菜单复制过来，并且需要修改class=\的位置到公司简介位置：
