说明
本教程是，原文章发布系统教程的精编重制版，会包含每一节的源码，以及修正之前的一些错误。因为之前的教程只做到了评论模块，很多地方还不完美，因此重制版会修复之前的一些谬误和阐述不清的地方，而且，后期我会考虑完成该项目的后台管理。希望本教程提供的内容，可以成为JavaWeb初学者一套较为完整的练手项目。
昨天给这个系列开了一个头，那么，今天继续吧。
3.4 登陆和注册按钮
导航栏已经做好了，那么一般来说，在标题栏的最右边就是登陆和注册按钮。我们可以设计一个div，然后向右浮动。当然，这个div也是在header里面的。
css样式：
.header .login { float: right ; color: #fff ; line-height: 72px ; margin-right: 20px ;} 这样就做好了。
我们顺便给首页的第一个导航按钮设置一个默认背景色（也就是选中后的状态，表示页面一打开就是在首页）：
.header ul li.first { margin-left: 30px ; background:#74b0e2 ;} 
3.6 网页banner制作
3.6.1 什么是banner？
banner 可以是网站页面的横幅广告，也可以是游行活动时用的旗帜，还可以是报纸杂志上的大标题。Banner 主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。
上面是网络的解释，我个人感觉所谓的banner就是一些希望重点展示的信息，可以采用轮播图的形式，也可以是一些横幅和广告。
我们先把空间给它腾出来。在header下面再画一个大div：
加在这里，不要搞错了。
配上css，为了看出效果，默认是灰色。
.banner { height: 380px ; overflow: hidden ; background: #ccc;} 标题栏下面的的灰色区域就是我们打算放置banner的地方。
3.6.2 轮播图
我们就采用最基本的轮播图方式吧，为了把轮播图的制作讲清楚，我们单独开一个页面来说明。
你可以在项目的WebContent目录创建一个lunbo.html
将下面的基础代码填入。
加上banner区域
css：
* { padding: 0; margin: 0;}ul li {list-style: none;}.banner { height: 380px; background: #ccc; margin-top: 20px; position: relative;}.banner .content { width: 1060px; height: 450px; margin: 20px auto; position: relative;} 要写在这里：
接着，启动服务器，在浏览器地址栏输入：
效果
我准备了五张图片，全部来自百度搜索。这些图片需要专门找一个地方放起来，可以专门创建一个img文件夹，用来存放图片。
准备五张图片，分别为1.jpg、2.jpg 。。。
接下来，写banner里面的html代码，因为图片放在img文件夹中，所以要使用相对路径。代码如下：
因为是图片列表，所以我们习惯性的使用 ul li 来实现，当然，你使用div也可以，效果上都是差不多的，但是那样会令代码看起来不够清晰。
如果我看别人的网页，发现p标签，我的第一反应，这应该是段落。当我发现 ul li ，那么我就知道这是一个列表。
如果你全部用div，就达不到这个效果了。
目前的效果：
我们给每一张图片加一个高度和宽度。
.banner ul li img { width: 1024px ; height: 380px ;} 
3.6.3 css样式优化
这样子的话，所有的图片都会独占一行，所以，我们给每一张图片加一个浮动。
你有没有发现，float，margin这些css样式用得特别频繁呢？
是的，其实我们的css样式表中，充斥着很多这样的重复代码，那么有没有什么办法可以改善这种情况呢？
答案肯定是有的，就是说，我能不能设置一种通用的class，比如float : left，我干脆专门写一个class类，谁想要左浮动，只要加上我这个class就行了。
说干就干：
.fl {float: left;}.fr {float: right;} fl 是 float : left 的简称。
fr 是 float : right的简称。
同时，为了容纳这么多图片在同一行展现，我们还需要给ul加一个非常大的宽度：
.banner .content ul{ width: 10000px;} 给它10000px吧，肯定够了，毕竟只有5张图片。
下一个问题，宽度有点太宽了，我们不需要把所有图片都显示出来。
我们给banner加上一个 overflow: hidden;
顺便把背景色去掉。
.banner { height: 380px; margin-top: 20px; position: relative; overflow: hidden;} 
overflow: hidden;代表溢出隐藏。
3.6.4 左右按钮
至于左右按钮，之前的项目中正好有这个素材，我就直接拿过来了。
接下来，我们在content区域中，ul下面添加两个按钮，用来控制上一张和下一张。我这边就直接上代码了：
放在这里：
css
.btn_left,.btn_right{ display: inline-block; width: 21px; height: 150px; background: url(img/banner_tb.png) no-repeat; position: absolute; left: -38px; top: 90px;}.btn_right{ display: inline-block; width: 21px; height: 150px; background: url(img/banner_tb.png) no-repeat; background-position: -29px 0; position: absolute; left: 1041px; top: 90px;} 效果：
我们发现，两个按钮的css样式有很多重复的地方，那么，我们稍微优化一下吧：
.btn_left ,.btn_right{ display: inline-block; width: 21px; height: 150px; background: url(img/banner_tb.png) no-repeat; position: absolute; left: -38px; top: 90px;}.btn_right{ background-position: -29px 0; position: absolute; left: 1041px; top: 90px;} 结果是一样一样的。
3.6.5 按钮显隐的控制
接下来，做一个当鼠标滑入content区域，就显示按钮，否则按钮隐藏的效果。
首先，将两个按钮的透明度设为0，也就是隐藏。
opacity: 0;
下一步，设置content的hover事件。当鼠标划入的时候，就把按钮的透明度改为1。
.banner .content:hover .btn_left{ opacity: 1;}.banner .content:hover .btn_right{ opacity: 1;} 这样可能显得有些突兀，我们可以利用过渡样式 transition，让透明度的变化有一个过渡的效果，时间由自己设定，我这边设置了0.6秒。过渡样式的意思就是当元素的css属性值发生变化，会有一个过渡的效果，而不是一下子变过去的。
transition: all ease 0.6s;
这句话的意思就是说，所有的css属性如果发生变化，我们就平和地（ease），用0.6秒的时间来变过去。
这个案例，我打算做一个无缝轮播，到目前为止，还有个小问题。
从图中可以看到，左边是没有图片的，于是，我们需要手动地将图片列表往左移动单张图片的宽度，也就是1024px。
.banner .content ul{ width: 10000px; margin-left: -1024px;} 效果：
图片只剩下一张了，那是因为我们没有给每一个li添加浮动，所以其他图片已经换行了，又因为我们设置了overflow:hidden，所以看不到其他图片。解决方法就是给li添加一个浮动：
顺便给两个按钮加上 cursor: pointer 这个属性。
这样一来，鼠标划上去就会显示一个小手的图案。 3.6.5 如何实现下一张？
终于到js逻辑控制了，马上迎来的问题就是，怎么实现下一张呢？
我们知道，打从一开始，所有的图片就已经全部被加载好了，我们要移动图片，说穿了，就是改变 ul 的margin-left就ok了。
那么，如果我们要看下一张图片，是不是只要把 ul 的margin-left 减去一张图片的宽度就可以了呢？
因为要使用动画效果，所以我们引入jQuery。
接下来，在页面的底部添加script标签块，我们所有的JS代码都需要写在这里。
首先，获取左右按钮，包装成jQuery对象：
var leftBtn = $('.btn_left').eq(0); //左按钮var rightBtn = $('.btn_right').eq(0);//右按钮 给右边的按钮添加一个点击事件：
rightBtn.on('click',function(){ alert();}); 我建议初学的话，不要急着往下写，先在点击事件里面alert一下，看看到此为止的代码是否正确？如果alert不出来，那说明代码已经有错误了。
经检测，是没问题的，很好，我们继续往下写。
我们把 ul 也包装成jQuery对象：
var ul = $('.banner .content ul').eq(0); 然后，编写点击事件。
因为我们已经将ul向左移动了1024px，所以，这次我们给它一个2048px；
rightBtn.on('click',function(){ ul.animate({marginLeft : -2048},1000);}); 
好的，这样一来，当你点击右箭头的时候，就可以看到图片会向左移动一张。
本章源码：
源地址：