在实际的开拓过程中，静态页面一样平常是美工或者前端工程师卖力，后台工程师紧张关心如何把Java层的数据贴到静态页面。（虽然我经历的几个公司都是自己一个人全包了。。。）
之前我已经把我个人绘制静态页面的过程，还有自己的思路写出来了，以是从本节开始，我不会再写得那么详细，而是根据页面效果来简明扼要地先容一下。
我绘制页面的一样平常流程，便是先在脑筋里形成一个大概的样子容貌，便是搞清楚到底要画一个若何的页面？乃至还可以弄个草图，然后根据草图来逐步写html和css代码。
首先是搭骨架，骨架便是html代码。
搭好了骨架，才是添加css代码的时候。
我个人绘制页面，都是遵照这样一个流程。
好了，先看看效果：
页面布局简图：
第一部分，是文章的展示区域。
html骨架
<!-- 内容区 --><div class='da609b4e046e9c91 article'> <div class='9b4e046e9c916968 title'>文章标题</div> <div class='046e9c91696840a6 category'><span class='9c91696840a642c3 light-font'>分类：</span><span class='696840a642c3ec2b info'>编程代码类</span></div> <div class='40a642c3ec2b2a3f publicDate'><span class='42c3ec2b2a3f42ab light-font'>发布韶光：</span><span class='ec2b2a3f42ab8b5a info'>2016-10-27</span></div> <hr/> <div class='2a3f42ab8b5a0599 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='42ab8b5a05994d97 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: 2px;
这表示空开2个px。
letter-spacing真的可以做到，有图为证。
向上的间距也要调大一点，不然牢牢贴着标题栏肯定不好看。
margin-top:20px;
就20个px吧。
这样就差不多了。
接下来是这一块。
可以看到，两边的颜色是不一样的。很显然，我肯定是给他们分别加了样式。
<div class='8b5a05994d979b43 category'><span class='05994d979b43af85 light-font'>分类：</span><span class='4d979b43af8587c0 info'>编程代码类</span></div><div class='9b43af8587c00b0c publicDate'><span class='cb7ada609b4e046e light-font'>发布韶光：</span><span class='da609b4e046e9c91 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='9b4e046e9c916968 right mt32'> <div class='046e9c91696840a6 author'> <img src='${basePath}/static/img/1.jpg' class='9c91696840a642c3 header_pic' width='90' height='90'></img> 作者：张三 </div></div>
可见，头像和作者名称都是放在一个div里面的，这个div有一个叫做 right 的css属性。
头像部分我用了一个相对定位
末了是评论区：
剩下的详细评论是一个个p标签，就不一一细说了。
评论区html代码：
<!-- 评论区 --><div class='696840a642c3ec2b commentBox'> <textarea class=\"大众comment_input\"大众 id=\"大众commenttxt\"大众 placeholder=\公众请输入评论信息(600)...\公众 maxlength=\公众600\公众></textarea> <input type=\公众button\公众 value=\公众保存评论\公众 class=\公众button\"大众></div><div class='40a642c3ec2b2a3f clearfix'></div><br/><hr/><div class='42c3ec2b2a3f42ab 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='ec2b2a3f42ab8b5a 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='2a3f42ab8b5a0599 category'> <div class='42ab8b5a05994d97 title'>编程代码类</div> <ul class='8b5a05994d979b43 items'> <c:forEach items=\"大众${articles2}\"大众 var=\"大众item\"大众> <li class='05994d979b43af85 item' onclick=\"大众detail('${item.id}');\公众> <div class='4d979b43af8587c0 item-banner'> <div class='9b43af8587c00b0c item-header'>${item.header}</div> <div class='cb7ada609b4e046e item-name' title = \"大众${item.name}\"大众>${item.name}</div> <div class='da609b4e046e9c91 item-author'>@${item.author} 著</div> </div> <div class='9b4e046e9c916968 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。
比如：
http://localhost:8080/Article/detail.jsp?id=ddc0136f-7bf5-41ed-ba6f-462d370afbe4
点击不同的文章，后面跟的id是不同的。这样就解释id的通报已经没问题了。
好的，这一章先到这里，下一节开始写详情页的业务代码。
