本節(jié)主要講解詳情頁的頁面布局和css樣式，以及從主頁面到詳情頁面的跳轉(zhuǎn)問題。
1. 詳情頁面的布局
頁面布局的話，我還是習(xí)慣先把靜態(tài)頁面做出來，確保沒問題了，然后再跟后臺對接。
在實際的開發(fā)過程中，靜態(tài)頁面一般是美工或者前端工程師負責(zé)，后臺工程師主要關(guān)心如何把Java層的數(shù)據(jù)貼到靜態(tài)頁面。（雖然我經(jīng)歷的幾個公司都是自己一個人全包了。。。）
之前我已經(jīng)把我個人繪制靜態(tài)頁面的過程，還有自己的思路寫出來了，所以從本節(jié)開始，我不會再寫得那么詳細，而是根據(jù)頁面效果來簡明扼要地介紹一下。
我繪制頁面的一般流程，就是先在腦子里形成一個大概的模樣，就是搞清楚到底要畫一個怎樣的頁面？甚至還可以弄個草圖，然后根據(jù)草圖來逐步寫html和css代碼。
首先是搭骨架，骨架就是html代碼。
搭好了骨架，才是添加css代碼的時候。
我個人繪制頁面，都是遵循這樣一個流程。
好了，先看看效果：
頁面布局簡圖：
第一部分，是文章的展示區(qū)域。
html骨架
<!-- 內(nèi)容區(qū) -->
<div class='article'>
<div class='title'>文章標(biāo)題</div>
<div class='category'><span class='light-font'>分類：</span><span class='info'>編程代碼類</span></div>
<div class='publicDate'><span class='light-font'>發(fā)布時間：</span><span class='info'>2016-10-27</span></div>
<hr/>
<div class='content'>
<p>初學(xué)javascript的人，都會接觸到一個東西叫做閉包，聽起來感覺很高大上的。網(wǎng)上也有各種五花八門的解釋，其實我個人感覺，沒必要用太理論化的觀念來看待閉包。
<p>事實上，你每天都在用閉包，只是你不知道罷了。
<p>比如：
var cheese = '奶酪';
var test = function(){
alert(cheese);
}
OK，你已經(jīng)寫了一個閉包。
<p>函數(shù)也是一個數(shù)據(jù)類型</p>
<p>變量 cheese 是在全局作用域中的一個變量，當(dāng)你創(chuàng)建了一個 test 函數(shù)，那么，test 和 cheese 就共享一個全局作用域。</p>
<p>你要額外明白的一點是，在js中，函數(shù)和變量本質(zhì)上是一個東西。函數(shù)也是一個數(shù)據(jù)類型。</p>
<p>從上面的定義中也能看出來這一點。你要是不相信的話，我們來看一下咯。</p>
<p>alert(cheese);</p>
<p>alert(test);</p>
<p>Paste_Image.png</p>
<p>Paste_Image.png</p>
<p>讓我們再來看看 test 和 cheese各是什么類型：</p>
</div>
</div>
文章內(nèi)容都是一些測試數(shù)據(jù)。
展示一篇文章，包含這篇文章的標(biāo)題，分類和發(fā)布時間，當(dāng)然還有作者信息。
首先是文章標(biāo)題，它就是一個div，沒什么大不了的。不要把它想得太復(fù)雜了。
<div class='title'>文章標(biāo)題</div>
標(biāo)題的css：
.article .title {
text-align: center;
font-size: 28px;
color: #565353;
letter-spacing: 2px;
margin-top:20px;
}
文字居中：
text-align: center;
這句話能讓這個div里面的文字居中顯示，所以你才能看到這個居中效果：
標(biāo)題的字體肯定不能太小了，所以我先給它一個28px。
font-size: 28px;
我覺得字體太黑了不好看，就把顏色稍微調(diào)淡了一些。
color: #565353;
接著是字間距，我們不希望每個字都緊湊得擠在一起，所以讓字與字之間稍微空開一點。
letter-spacing: 2px;
這表示空開2個px。
letter-spacing真的可以做到，有圖為證。
向上的間距也要調(diào)大一點，不然緊緊貼著標(biāo)題欄肯定不好看。
margin-top:20px;
就20個px吧。
這樣就差不多了。
接下來是這一塊。
可以看到，兩邊的顏色是不一樣的。很顯然，我肯定是給他們分別加了樣式。
<div class='category'><span class='light-font'>分類：</span><span class='info'>編程代碼類</span></div>
<div class='publicDate'><span class='light-font'>發(fā)布時間：</span><span class='info'>2016-10-27</span></div>
結(jié)構(gòu)如圖：
為了分別控制左右兩邊的字體樣式，我在外層div中嵌套了兩個span，給他們分別加上不同的樣式。
對應(yīng)的css樣式
.article .light-font{
font-size:14px;
color:#666;
}
.article .info{
font-size:14px;
color:#3c3a3a;
}
文章區(qū)域，我主要給里面的 P 標(biāo)簽加了樣式：
.article .content p{
text-indent:2em;
margin-bottom:20px;
font-family: 微軟雅黑;
}
接下來演示一下層級關(guān)系：
文章中的每一個段落，對應(yīng)一個P標(biāo)簽，我給這些P標(biāo)簽加上特定的樣式，包括首行縮進，底外邊距，還有字體。
先這么簡單弄一下吧，有個樣子就行了。
至于作者信息的展示區(qū)，也是比較簡單的，我就放了一個頭像和作者名稱。
html
<div class='right mt32'>
<div class='author'>
<img src='${basePath}/static/img/1.jpg' class='header_pic' width='90' height='90'></img>
作者：張三
</div>
</div>
可見，頭像和作者名稱都是放在一個div里面的，這個div有一個叫做 right 的css屬性。
頭像部分我用了一個相對定位
最后是評論區(qū)：
剩下的具體評論是一個個p標(biāo)簽，就不一一細說了。
評論區(qū)html代碼：
<!-- 評論區(qū) -->
<div class='commentBox'>
<textarea class="comment_input" id="commenttxt" placeholder="請輸入評論信息(600)..." maxlength="600"></textarea>
<input type="button" value="保存評論" class="button">
</div>
<div class='clearfix'></div>
<br/><hr/>
<div class='mb64' class="comment_list">
<div class="comment_infor clearfix">
<div style='border-bottom:1px solid #ccc' class="comment_word">
<p style='border-bottom:20px solid #fff'>${comment.username}dwedewffrg 說：</p>
<p class='mb32'>內(nèi)容不錯，感謝分享！</p>
</div>
</div>
</div>
2. 從主頁面到詳情頁面的跳轉(zhuǎn)問題
我們的首頁會展示出不同分類的文章列表，每一篇文章都有一個封面，我們通過點擊封面進入文章的詳情頁。
這個時候，我們先來看看，當(dāng)初是怎么把數(shù)據(jù)庫里面的文章展示在首頁的？
原來，我們在index.jsp中，寫過如下代碼：
<% ArticleService articleService = new ArticleService(); %>
然后調(diào)用了 articleService 的 getArticlesByCategoryId 方法。
<%
//查詢出編程代碼類的相關(guān)文章
List<Map<String,Object>> articles2 = articleService.getArticlesByCategoryId(2, 0, 6);
pageContext.setAttribute("articles2", articles2);
%>
默認查出來前六條數(shù)據(jù)。
如果沒看明白的話，可以去回顧之前的章節(jié)，這里就不再贅述了。
好的，繼續(xù)。
articles2 是一個list，拿到這個list之后，我們立即把它放在了pageContext里面，這樣的話，我們在當(dāng)前頁面就能夠訪問到這個list了。
像這樣：
<div class='category'>
<div class='title'>編程代碼類</div>
<ul class='items'>
<c:forEach items="${articles2}" var="item">
<li class='item' onclick="detail('${item.id}');">
<div class='item-banner'>
<div class='item-header'>${item.header}</div>
<div class='item-name' title = "${item.name}">${item.name}</div>
<div class='item-author'>@${item.author} 著</div>
</div>
<div class='item-description'>${item.description}</div>
</li>
</c:forEach>
<div style='clear:both'></div>
</ul>
</div>
我們要通過這個封面打開詳情頁，是不是需要一個點擊事件呢？
因為我這邊使用了onclick屬性，所以我單獨寫了一個 detail 方法：
//打開詳情頁
function detail(id){
var a = document.createElement("a");
a.href = "detail.jsp?id=" + id;
console.log(a);
a.target = '_new'; //指定在新窗口打開
a.click();//觸發(fā)打開事件
}
在detail方法里，我直接創(chuàng)造了一個a標(biāo)簽，目標(biāo)地址指向了detail.jsp，并且使用get方式傳遞了一個參數(shù)，也就是文章的id。最后，手動觸發(fā)了點擊事件。
因為需要在detail.jsp中，從后臺查出文章的具體內(nèi)容，我們必然通過id去查。所以，我們需要給詳情頁傳遞一個id。
我們這一章先不管怎么去后臺查，先確保能把文章id傳遞到詳情頁再說。
當(dāng)我們點擊文章列表中的某一條數(shù)據(jù)，進入詳情頁的時候，會發(fā)現(xiàn)url地址欄就帶了id。
比如：
http://localhost:8080/Article/detail.jsp?id=ddc0136f-7bf5-41ed-ba6f-462d370afbe4
點擊不同的文章，后面跟的id是不同的。這樣就說明id的傳遞已經(jīng)沒問題了。
好的，這一章先到這里，下一節(jié)開始寫詳情頁的業(yè)務(wù)代碼。
您的支持是我寫作的最大動力：
