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

时间 2019-11-09

标签精编重制版 javaweb 入门项目实战文章发布系统第二栏目 Java 繁體版

原文原文链接

说明

本教程是，原文章发布系统教程的精编重制版，会包含每一节的源码，以及修正以前的一些错误。由于以前的教程只作到了评论模块，不少地方还不完美，所以重制版会修复以前的一些谬误和阐述不清的地方，并且，后期我会考虑完成该项目的后台管理。但愿本教程提供的内容，能够成为JavaWeb初学者一套较为完整的练手项目。javascript

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

3.4 登录和注册按钮

导航栏已经作好了，那么通常来讲，在标题栏的最右边就是登录和注册按钮。咱们能够设计一个div，而后向右浮动。固然，这个div也是在header里面的。html

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

css样式：java

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

这样就作好了。jquery

咱们顺便给首页的第一个导航按钮设置一个默认背景色（也就是选中后的状态，表示页面一打开就是在首页）：浏览器

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

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

上面是网络的解释，我我的感受所谓的banner就是一些但愿重点展现的信息，能够采用轮播图的形式，也能够是一些横幅和广告。网络

咱们先把空间给它腾出来。在header下面再画一个大div：优化

<div class="banner">

</div>

加在这里，不要搞错了。
动画

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

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

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

3.6.2 轮播图

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

你能够在项目的WebContent目录建立一个lunbo.html

将下面的基础代码填入。

<!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>

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

要写在这里：

接着，启动服务器，在浏览器地址栏输入：
http://localhost:8088/Article1.1/lunbo.html

效果

我准备了五张图片，所有来自百度搜索。这些图片须要专门找一个地方放起来，能够专门建立一个img文件夹，用来存放图片。

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

接下来，写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，就达不到这个效果了。

目前的效果：

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

.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下面添加两个按钮，用来控制上一张和下一张。我这边就直接上代码了：

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

效果：

咱们发现，两个按钮的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 src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

接下来，在页面的底部添加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);
});

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

本章源码：

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

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

说明

3.4 登录和注册按钮

3.6 网页banner制做

3.6.1 什么是banner？

3.6.2 轮播图

3.6.3 css样式优化

3.6.4 左右按钮

3.6.5 按钮显隐的控制

3.6.5 如何实现下一张？

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

说明

3.4 登录和注册按钮

3.6 网页banner制做

3.6.1 什么是banner？

3.6.2 轮播图

3.6.3 css样式优化

3.6.4 左右按钮

3.6.5 按钮显隐的控制

3.6.5 如何实现下一张？

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