网页实际案例-从设计到代码实现全过程（二）

接上篇文章：

上篇文章以及做完了页头导航部分了，现在开始制作banner滚动大图栏。

2、滚动banner大图栏

开始结构分析：

1、这个banner是通栏图，也就是全屏；

2、banner有6张图滚动播放，要用s程序，需要考虑安放问题；

3、banner下部有6个和图片一 一对应的圆形按钮，需要做position定位。

开始写代码：

注意：

应为我以后要写的图片滚动js程序需要将第一张图片复制一份放到最后面，所以不要忘了。

保存预览F12效果：

应该是图片自上而下有序排列（因为显示器大小不一样可能显示效果不一样是正常情况）

现在给需要修饰的标签命名：

这里特别需要注意的就是<li>的命名“cunrrentLi”，因为图片滚动时，下面的按钮会相应的改变，我准备用添加类来做，所以这个类名是活动的，需要特别注意。

现在开始写css修饰，但是在写之前首先得有个思路：

1、banner图要横排过来然后将多出去的图片隐藏起来

2、<ul>标签要相对于“container”定位

按F12预览效果还是和上面一样的，应为我没有规定wrapper框的宽高和图片的大小，我想让浏览器的窗口改变图片也跟着改变大小：

下面开始写js程序：
（看到这儿初学者可能觉得有点困难，其实那是正常的，坚持坚持就好）

我要写的程序要调用js中的jquery库，所以我们要先链接一个jquery库文件（可直接在网上下载，我上传的压缩包里面也有）：

注意：jquery调用的路径一定要写对，一般小型项目建议和我一样放置。

写js程序：

注意：

1、一定要在刚写的下面写，不要写在head里面

2、js程序要用<s cript></s cript>标签包起来

3、每段代码什么作用我都给标出来了，大家可以删减自己试验。

4、写不出来js其实没事儿，写个js效果就算专业程序员如果不参考，写上十天半个月很正常的，所以一般这种效果我们做网页只需要能套用就行的（这段程序也在压缩包里面有附）

现在F12预览：

很神奇啊对不对，然后你试着用鼠标改变浏览器的窗口大小试试（第一次满屏预览时因为程序自动留了滚动条的宽度所以有一竖条的滚动位置不对，这是个bug，文章最后教你怎末解决，实在是现在看不惯，就改变一下窗口大小，它也自动好了.......）

3、小商品图栏

分析：

1、一个大框居中

2、里面四个二级框放蛋糕图片

3、鼠标滑过会出现透明色块和白色文字，需要写一个小的js效果，

开始在下面继续搭框架：

F12预览效果：

现在需要将图片左右放置，文字隐藏起来

开始回到head上写修饰：

F12预览效果：

网页页面基本上已经成型了，现在需要加上鼠标划过时图片下面色块出现，字也出现，在后面继续写js，有上面已经调过jquery文件了，所以现在不需要再链接一次：

F12预览效果：

效果已经做好了，鼠标放到图片上去试试，开心吗，哈哈

4、页脚部分

同样开始分析：

1、一个大框居中

2、里面竖排着5个内容框

框架搭出来：

预览效果：

然后回到head里面写修饰：

F12预览效果：

怎么样网页制作是不是很神奇；

---————————————————————————————————————————————————————————————————————-------——————----————————---

到这儿整个界面基本就做好了，还差一点导航的出表经过效果，现在写出来吧：

现在保存再鼠标划过导航试试：

哈哈，字变颜色了是吧

——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——　——

最后上面我们制作滚动大图的时候除了一个小bug，现在解决一下，很简单，将控制图片滚动的js  ctrl+s剪切然后粘贴到主体body的的最下面就ok了：

－－－－－－

现在整个页面就制作完成了

注意：

１、我们只做的毕竟是演示页面吗，肯定还是有几个问题的，比如：上海哪儿应该做个下拉菜单，购物车后面数字应该分开做，方面后期链接后台数据库。

２、但是对于初学者来说这种程度的页面如果能独立做出来，那么搭建一般的网站前端部分也就不成问题了

３、敲代码的时候难免有记不住，不清楚的地方，那怎么办，很简单，查文档，我给大家分享一个我自己常用的文档，附在压缩包里面了，大家可以看看。

最后，希望大家多交流交流，一起进步，加油！

－－－－－－－————————－－－－－

点个推荐撒，写篇文章挺不容易的