【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

时间:2022-08-18 07:44:40

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

说明

本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一些谬误和阐述不清的地方,而且,后期我会考虑完成该项目的后台管理。希望本教程提供的内容,可以成为JavaWeb初学者一套较为完整的练手项目。

昨天给这个系列开了一个头,那么,今天继续吧。

3.4 登陆和注册按钮

导航栏已经做好了,那么一般来说,在标题栏的最右边就是登陆和注册按钮。我们可以设计一个div,然后向右浮动。当然,这个div也是在header里面的。

<div class='login'>
<span><a href="javascript:void(0)">登陆</a></span>
<span>|</span>
<span><a href="javascript:void(0)">注册</a></span>
</div>

css样式:

.header .login {
float: right ;
color: #fff ;
line-height: 72px ;
margin-right: 20px ;
}

这样就做好了。

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

我们顺便给首页的第一个导航按钮设置一个默认背景色(也就是选中后的状态,表示页面一打开就是在首页):

.header ul li.first {
margin-left: 30px ;
background:#74b0e2 ;
}

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

3.6 网页banner制作
3.6.1 什么是banner?

banner 可以是网站页面的横幅广告,也可以是游行活动时用的旗帜,还可以是报纸杂志上的大标题。Banner 主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心。

上面是网络的解释,我个人感觉所谓的banner就是一些希望重点展示的信息,可以采用轮播图的形式,也可以是一些横幅和广告。

我们先把空间给它腾出来。在header下面再画一个大div:

<div class="banner">

</div>

加在这里,不要搞错了。

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

配上css,为了看出效果,默认是灰色。

.banner {
height: 380px ;
overflow: hidden ;
background: #ccc;
}

标题栏下面的的灰色区域就是我们打算放置banner的地方。

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

3.6.2 轮播图

我们就采用最基本的轮播图方式吧,为了把轮播图的制作讲清楚,我们单独开一个页面来说明。

你可以在项目的WebContent目录创建一个lunbo.html

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

将下面的基础代码填入。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul li {list-style: none;}
</style>
</head>
<body> </body>
</html>

加上banner区域

<div class='banner'>
<div class='content'> </div>
</div>

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

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;
}

要写在这里:

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

接着,启动服务器,在浏览器地址栏输入:

http://localhost:8088/Article1.1/lunbo.html

效果

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

我准备了五张图片,全部来自百度搜索。这些图片需要专门找一个地方放起来,可以专门创建一个img文件夹,用来存放图片。

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

准备五张图片,分别为1.jpg、2.jpg 。。。

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

接下来,写banner里面的html代码,因为图片放在img文件夹中,所以要使用相对路径。代码如下:

<div class='banner'>
<div class='content'>
<ul>
<li>
<a href="javascript:void(0)">
<img src="img/1.jpg "/>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/2.jpg "/>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/3.jpg "/>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/4.jpg "/>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/5.jpg "/>
</a>
</li> </ul>
</div>
</div>

因为是图片列表,所以我们习惯性的使用 ul li 来实现,当然,你使用div也可以,效果上都是差不多的,但是那样会令代码看起来不够清晰。

如果我看别人的网页,发现p标签,我的第一反应,这应该是段落。当我发现 ul li ,那么我就知道这是一个列表。

如果你全部用div,就达不到这个效果了。

目前的效果:

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

我们给每一张图片加一个高度和宽度。

.banner ul li img {
width: 1024px ;
height: 380px ;
}

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

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的简称。

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

同时,为了容纳这么多图片在同一行展现,我们还需要给ul加一个非常大的宽度:

.banner .content ul{
width: 10000px;
}

给它10000px吧,肯定够了,毕竟只有5张图片。

下一个问题,宽度有点太宽了,我们不需要把所有图片都显示出来。

我们给banner加上一个 overflow: hidden;

顺便把背景色去掉。

.banner {
height: 380px;
margin-top: 20px;
position: relative;
overflow: hidden;
}

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

overflow: hidden;代表溢出隐藏。

3.6.4 左右按钮

至于左右按钮,之前的项目中正好有这个素材,我就直接拿过来了。

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

接下来,我们在content区域中,ul下面添加两个按钮,用来控制上一张和下一张。我这边就直接上代码了:

<i class='btn_left'></i>
<i class='btn_right'></i>

放在这里:

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;
}

效果:

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

我们发现,两个按钮的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;

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

下一步,设置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;

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

这句话的意思就是说,所有的css属性如果发生变化,我们就平和地(ease),用0.6秒的时间来变过去。

这个案例,我打算做一个无缝轮播,到目前为止,还有个小问题。

从图中可以看到,左边是没有图片的,于是,我们需要手动地将图片列表往左移动单张图片的宽度,也就是1024px。

.banner .content ul{
width: 10000px;
margin-left: -1024px;
}

效果:

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

图片只剩下一张了,那是因为我们没有给每一个li添加浮动,所以其他图片已经换行了,又因为我们设置了overflow:hidden,所以看不到其他图片。解决方法就是给li添加一个浮动:

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

顺便给两个按钮加上 cursor: pointer 这个属性。

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

这样一来,鼠标划上去就会显示一个小手的图案。

3.6.5 如何实现下一张?

终于到js逻辑控制了,马上迎来的问题就是,怎么实现下一张呢?

我们知道,打从一开始,所有的图片就已经全部被加载好了,我们要移动图片,说穿了,就是改变 ul 的margin-left就ok了。

那么,如果我们要看下一张图片,是不是只要把 ul 的margin-left 减去一张图片的宽度就可以了呢?

因为要使用动画效果,所以我们引入jQuery。

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

接下来,在页面的底部添加script标签块,我们所有的JS代码都需要写在这里。

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

首先,获取左右按钮,包装成jQuery对象:

var leftBtn = $('.btn_left').eq(0); //左按钮
var rightBtn = $('.btn_right').eq(0);//右按钮

给右边的按钮添加一个点击事件:

rightBtn.on('click',function(){
alert();
});

我建议初学的话,不要急着往下写,先在点击事件里面alert一下,看看到此为止的代码是否正确?如果alert不出来,那说明代码已经有错误了。

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

经检测,是没问题的,很好,我们继续往下写。

我们把 ul 也包装成jQuery对象:

var ul = $('.banner .content ul').eq(0);

然后,编写点击事件。

因为我们已经将ul向左移动了1024px,所以,这次我们给它一个2048px;

rightBtn.on('click',function(){
ul.animate({marginLeft : -2048},1000);
});

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

好的,这样一来,当你点击右箭头的时候,就可以看到图片会向左移动一张。

本章源码:

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

源地址:【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)