本節主要講解詳情頁的頁面佈局和css樣式，以及從主頁面到詳情頁面的跳轉問題。

1. 詳情頁面的佈局

頁面佈局的話，我還是習慣先把靜態頁面做出來，確保沒問題了，然後再跟後臺對接。

在實際的開發過程中，靜態頁面一般是美工或者前端工程師負責，後臺工程師主要關心如何把Java層的資料貼到靜態頁面。（雖然我經歷的幾個公司都是自己一個人全包了。。。）

之前我已經把我個人繪製靜態頁面的過程，還有自己的思路寫出來了，所以從本節開始，我不會再寫得那麼詳細，而是根據頁面效果來簡明扼要地介紹一下。

我繪製頁面的一般流程，就是先在腦子裡形成一個大概的模樣，就是搞清楚到底要畫一個怎樣的頁面？甚至還可以弄個草圖，然後根據草圖來逐步寫html和css程式碼。

首先是搭骨架，骨架就是html程式碼。

搭好了骨架，才是新增css程式碼的時候。

我個人繪製頁面，都是遵循這樣一個流程。

好了，先看看效果：

頁面佈局簡圖：

第一部分，是文章的展示區域。

html骨架

<!-- 內容區 -->
<div class='article'>
    <div class='title'>文章標題</div>
    <div class='category'><span class='light-font'>分類：</span><span class='info'>
 
程式設計程式碼類</span></div>
    <div class='publicDate'><span class='light-font'>釋出時間：</span><span class='info'>2016-10-27</span></div>
    <hr/>
    <div class='content'>
        <p>初學javascript的人，都會接觸到一個東西叫做閉包，聽起來感覺很高大上的。網上也有各種五花八門的解釋，其實我個人感覺，沒必要用太理論化的觀念來看待閉包。

        <p
 
>事實上，你每天都在用閉包，只是你不知道罷了。
        
        <p>比如：
        
        var cheese = '乳酪';
        
        var test = function(){
            alert(cheese);
        }
        OK，你已經寫了一個閉包。
        
        <p>函式也是一個數據型別</p>
        <p>變數 cheese 是在全域性作用域中的一個變數，當你建立了一個 test 函式，那麼，test 和 cheese 就共享一個全域性作用域。</p>
        
        <p>你要額外明白的一點是，在js中，函式和變數本質上是一個東西。函式也是一個數據型別。</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>

文章內容都是一些測試資料。

展示一篇文章，包含這篇文章的標題，分類和釋出時間，當然還有作者資訊。

首先是文章標題，它就是一個div，沒什麼大不了的。不要把它想得太複雜了。

<div class='title'>文章標題</div>

標題的css：

.article .title {
    text-align: center;
    font-size: 28px;
    color: #565353;
    letter-spacing: 2px;
    margin-top:20px;
}

文字居中：

text-align: center;

這句話能讓這個div裡面的文字居中顯示，所以你才能看到這個居中效果：

標題的字型肯定不能太小了，所以我先給它一個28px。

font-size: 28px;

我覺得字型太黑了不好看，就把顏色稍微調淡了一些。

color: #565353;

接著是字間距，我們不希望每個字都緊湊得擠在一起，所以讓字與字之間稍微空開一點。

letter-spacing: px;

這表示空開2個px。

letter-spacing真的可以做到，有圖為證。

向上的間距也要調大一點，不然緊緊貼著標題欄肯定不好看。

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'>釋出時間：</span><span class='info'>2016-10-27</span></div>

結構如圖：

為了分別控制左右兩邊的字型樣式，我在外層div中嵌套了兩個span，給他們分別加上不同的樣式。

對應的css樣式

.article .light-font{
    font-size:14px;
    color:#666;
}

.article .info{
    font-size:14px;
    color:#3c3a3a;
}

文章區域，我主要給裡面的 P 標籤加了樣式：

.article .content p{
    text-indent:2em;
    margin-bottom:20px;
    font-family: 微軟雅黑;
}

文章中的每一個段落，對應一個P標籤，我給這些P標籤加上特定的樣式，包括首行縮排，底外邊距，還有字型。

先這麼簡單弄一下吧，有個樣子就行了。

至於作者資訊的展示區，也是比較簡單的，我就放了一個頭像和作者名稱。

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屬性。

最後是評論區：

剩下的具體評論是一個個p標籤，就不一一細說了。

評論區html程式碼：

<!-- 評論區 -->
<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'>內容不錯，感謝分享！</p>
         </div>
    </div>
</div>

2. 從主頁面到詳情頁面的跳轉問題

我們的首頁會展示出不同分類的文章列表，每一篇文章都有一個封面，我們通過點選封面進入文章的詳情頁。

這個時候，我們先來看看，當初是怎麼把資料庫裡面的文章展示在首頁的？

原來，我們在index.jsp中，寫過如下程式碼：

<% ArticleService articleService = new ArticleService(); %>

然後呼叫了 articleService 的 getArticlesByCategoryId 方法。

<%
    //查詢出程式設計程式碼類的相關文章
    List<Map<String,Object>>  articles2 = articleService.getArticlesByCategoryId(2, 0, 6);
    pageContext.setAttribute("articles2", articles2);
%>

預設查出來前六條資料。

如果沒看明白的話，可以去回顧之前的章節，這裡就不再贅述了。

好的，繼續。

articles2 是一個list，拿到這個list之後，我們立即把它放在了pageContext裡面，這樣的話，我們在當前頁面就能夠訪問到這個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();//觸發開啟事件
}

在detail方法裡，我直接創造了一個a標籤，目標地址指向了detail.jsp，並且使用get方式傳遞了一個引數，也就是文章的id。最後，手動觸發了點選事件。

因為需要在detail.jsp中，從後臺查出文章的具體內容，我們必然通過id去查。所以，我們需要給詳情頁傳遞一個id。

我們這一章先不管怎麼去後臺查，先確保能把文章id傳遞到詳情頁再說。

當我們點選文章列表中的某一條資料，進入詳情頁的時候，會發現url位址列就帶了id。

點選不同的文章，後面跟的id是不同的。這樣就說明id的傳遞已經沒問題了。

好的，這一章先到這裡，下一節開始寫詳情頁的業務程式碼。

 http://download.csdn.net/download/jg15617651654/9828338  原碼下載地址