【精編重製版】JavaWeb 入門級項目實戰 -- 文章發佈系統 （第二節）
說明
本教程是，原文章發佈系統教程的精編重製版，會包含每一節的源碼，以及修正以前的一些錯誤。由於以前的教程只作到了評論模塊，不少地方還不完美，所以重製版會修復以前的一些謬誤和闡述不清的地方，並且，後期我會考慮完成該項目的後臺管理。但願本教程提供的內容，能夠成爲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 ;
}
3.6 網頁banner製做
3.6.1 什麼是banner？
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);
});
好的，這樣一來，當你點擊右箭頭的時候，就能夠看到圖片會向左移動一張。
本章源碼：
- 1. 【精編重製版】JavaWeb 入門級項目實戰 -- 文章發佈系統 （第一節）
- 2. 【手把手】JavaWeb 入門級項目實戰 - 文章發佈系統 （第一節）
- 3. 【手把手】JavaWeb 入門級項目實戰 -- 文章發佈系統 （第七節）
- 4. 遊戲開發入門系列（目錄）第二章第一節
- 5. 《Vue.js從入門到項目實戰》第一章 1.2-1.3小節
- 6. 《Vue.js從入門到項目實戰》第一章 1.1小節
- 7. Vue項目實戰入門
- 8. Node.js實戰項目--簡單的項目發佈系統
- 9. python入門到實戰--第二章
- 10. Python入門實戰系列文章
- 更多相關文章...
- • Eclipse 編譯項目 - Eclipse 教程
- • Maven 項目文檔 - Maven教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Java Agent入門實戰（二）-Instrumentation源碼概述
-
每一个你不满意的现在，都有一个你没有努力的曾经。