【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 （第十节）1. 详情页面的布局2. 从主页面到详情页面的跳转问题

<!-- 内容区 -->
<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 class='title'>文章标题</div>

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

text-align: center;

font-size: 28px;

color: #565353;

letter-spacing: 2px;

margin-top:20px;

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

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

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

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

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

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

<%
    //查询出编程代码类的相关文章
    List<Map<String,Object>>  articles2 = articleService.getArticlesByCategoryId(2, 0, 6);
    pageContext.setAttribute("articles2", articles2);
%>

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

//打开详情页
function detail(id){
    var a = document.createElement("a");
    a.href = "detail.jsp?id=" + id; 
    console.log(a);
    a.target = '_new'; //指定在新窗口打开
    a.click();//触发打开事件
}