序
前一段時(shí)間有很多朋友來(lái)問(wèn)我各種問(wèn)題合瓢，比如java怎么學(xué)坦胶，c，c++晴楔，c#顿苇，java，還有php等等税弃，到底學(xué)哪個(gè)好岖圈，哪個(gè)好就業(yè)？其中不乏剛畢業(yè)找不到工作的學(xué)生钙皮，我對(duì)此也是很有感觸蜂科，回想當(dāng)初那最最艱難的日子，我的確很了解這種焦急的心態(tài)短条。其實(shí)我個(gè)人感覺(jué)导匣，編程語(yǔ)言都大同小異，無(wú)非是語(yǔ)法變一變茸时，當(dāng)然贡定，如果你為了快速上手，我還是優(yōu)先推薦java可都。
最近琢磨著要寫點(diǎn)東西缓待，把基本的Java Web開(kāi)發(fā)流程完整地走一遍，最后決定渠牲，干脆就寫一個(gè)小小的項(xiàng)目實(shí)戰(zhàn)吧旋炒。這個(gè)小項(xiàng)目作為一個(gè)JavaWeb的入門例子，從前臺(tái)頁(yè)面到項(xiàng)目發(fā)布签杈，把整個(gè)流程走通瘫镇。所謂麻雀雖小，五臟俱全。難度不是很高铣除，正好可以作為入門使用谚咬。
接下來(lái)就是做什么的問(wèn)題了，首先不能太簡(jiǎn)單尚粘，那樣的話就沒(méi)意思了择卦。也不能太復(fù)雜，因?yàn)槲业拇_也沒(méi)那么多時(shí)間郎嫁，思前想后互捌，我打算寫一個(gè)小型的文章發(fā)布系統(tǒng)。
老實(shí)說(shuō)行剂，我也不知道最終會(huì)做成什么樣子，但是基本的CRUD肯定少不了的钳降。前臺(tái)頁(yè)面的話厚宰，我會(huì)盡可能做得好看一點(diǎn)，畢竟我也不是專門做前端的遂填。
至于知識(shí)點(diǎn)铲觉，當(dāng)然是盡可能豐富，把我用過(guò)的吓坚，并且理解的東西撵幽，一步一步地集成進(jìn)去。
嗯礁击，這個(gè)系列一旦開(kāi)始盐杂，以后基本上就圍繞著這個(gè)小項(xiàng)目寫文了。我的意思是哆窿，其他文章都不更了链烈，在這個(gè)小項(xiàng)目寫完之前，我會(huì)把其他的文章都放下挚躯，全心全意地編寫這個(gè)系列强衡。
終于開(kāi)始了，想想還有點(diǎn)小激動(dòng)呢码荔。
1. 項(xiàng)目的大致規(guī)劃
開(kāi)發(fā)工具還是用eclipse漩勤，數(shù)據(jù)庫(kù)采用mysql。MVC框架的話缩搅，我就不用框架了越败，純粹用JSP來(lái)寫，實(shí)際開(kāi)發(fā)肯定不會(huì)這么做硼瓣，不過(guò)眉尸，這畢竟還是有意義的。當(dāng)然，你也可以把它換成框架版的噪猾。為什么用JSP霉祸？因?yàn)镴SP比較簡(jiǎn)單，作為一個(gè)入門級(jí)的web項(xiàng)目袱蜡，而且我是一邊開(kāi)發(fā)一邊寫文丝蹭，我就懶得用MVC框架了。
為什么我要一邊開(kāi)發(fā)一邊寫坪蚁，因?yàn)槲矣X(jué)得奔穿，如果全部開(kāi)發(fā)好了，再讓我從頭開(kāi)始敏晤，把開(kāi)發(fā)流程寫出來(lái)贱田，那是很龐大的工作量，也不現(xiàn)實(shí)嘴脾。而且男摧，一邊開(kāi)發(fā)一邊寫還有個(gè)好處，那就是可以幫助讀者看到整個(gè)項(xiàng)目的開(kāi)發(fā)流程译打。
而且耗拓，包括我自己也不知道最終會(huì)寫成什么樣子，也可能本文結(jié)束后就GG了奏司。
不過(guò)不管怎么說(shuō)乔询，這樣都會(huì)保留一點(diǎn)點(diǎn)新鮮感和樂(lè)趣。
如果你是初學(xué)者韵洋，并且希望完整地看一個(gè)小項(xiàng)目是如何做出來(lái)的竿刁，那么，這個(gè)系列也許會(huì)適合你搪缨。
可能寫10篇文章就結(jié)束们妥，也可能30篇，看情況了勉吻。
好了监婶，正式開(kāi)始吧。
2. 項(xiàng)目搭建
2.1 新建項(xiàng)目
新建一個(gè) Dynamic Web Project齿桃，名字叫Article
點(diǎn)擊Finish
將項(xiàng)目的編碼改為 utf-8
2.2 新建web.xml
這是web項(xiàng)目的規(guī)范惑惶，一個(gè)web.xml文件可以對(duì)你的web項(xiàng)目進(jìn)行基本的配置。
2.3 編寫web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<!-- 歡迎頁(yè)面 -->
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
2.4 編寫index.jsp
在WebContent目錄下新建一個(gè)index.jsp
代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
恭喜短纵，web項(xiàng)目已經(jīng)搭建完成带污。
</body>
</html>
這就是我們項(xiàng)目的首頁(yè)。
2.5 用 tomcat 發(fā)布項(xiàng)目
我這邊用的是tomcat7.0
運(yùn)行香到。
啟動(dòng)完畢后鱼冀，打開(kāi)瀏覽器报破，在地址欄輸入
http://localhost:8080/Article/
(我這邊的tomcat端口號(hào)為8080)
然后可以清楚得看到，網(wǎng)頁(yè)上出現(xiàn)了這么一行字：
恭喜千绪，web項(xiàng)目已經(jīng)搭建完成充易。
這就說(shuō)明，web項(xiàng)目已經(jīng)搭建成功了荸型！
3. 首頁(yè)制作
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首頁(yè)</title>
<style>
</style>
</head>
<body>
<div class="header">
</div>
</body>
</html>
3.1 標(biāo)題欄
我們?cè)赽ody區(qū)域畫一個(gè)div盹靴，作為首頁(yè)的標(biāo)題欄。它的樣式先全部在本頁(yè)面寫瑞妇，也就是style塊里面稿静。
div是塊級(jí)元素，所以辕狰，雖然我們沒(méi)有給它設(shè)定寬度改备，它也默認(rèn)就是父容器的寬度。所以蔓倍，我們只需要給它一個(gè)高度就OK啦悬钳。
*{
padding: 0 ;
margin: 0 ;
}
.header {
height: 60px ;
background: #458fce ;
}
效果：
3.2 畫一個(gè)LOGO
接下來(lái)，繪制 logo柬脸，由于樓主的 PS水平比較渣，所以這個(gè)部分就用文字替代吧毙驯。當(dāng)然倒堕，如果你是PS大神的話，也可以隨便給我做一個(gè)logo爆价，在下一節(jié)中我就放上去垦巴。
求 logo ...
<div class="header">
<div class='logo'>原創(chuàng)文字</div>
</div>
css:
*{
padding: 0 ;
margin: 0 ;
font-family: "微軟雅黑" ;
}
.header {
height: 72px ;
background: #458fce ;
}
.header .logo {
color: #fff ;
line-height: 72px ;
font-size: 30px ;
margin-left: 20px ;
display:inline-block ;
font-weight:500 ;
}
3.3 導(dǎo)航欄
我隨便想了幾個(gè)導(dǎo)航按鈕（其實(shí)就是 ul li）：
- 首頁(yè)
- 原創(chuàng)故事
- 熱門專題
- 欣賞美文
- 贊助
<div class="header">
<div class='logo'>原創(chuàng)文字</div>
<ul>
<li>首頁(yè)</li>
<li>原創(chuàng)故事</li>
<li>熱門專題</li>
<li>欣賞美文</li>
<li>贊助</li>
</ul>
</div>
同時(shí)，我們把 li 的小圓點(diǎn)去掉：
ul li {
list-style: none ;
}
這個(gè)效果顯然不是我們想要的铭段，我們給logo加一個(gè)浮動(dòng)骤宣。
然后，給每一個(gè) li 添加一個(gè)左浮動(dòng)：
.header ul li {
float: left ;
}
接著序愚，我們把位置和顏色做一些調(diào)整：
<div class="header">
<div class='logo'>原創(chuàng)文字</div>
<ul>
<li class='first'>首頁(yè)</li>
<li>原創(chuàng)故事</li>
<li>熱門專題</li>
<li>欣賞美文</li>
<li>贊助</li>
</ul>
</div>
css樣式
.header ul li.first {
margin-left: 30px ;
}
.header ul li {
float: left ;
color: #fff ;
display: inline-block ;
width: 112px ;
height: 72px ;
text-align: center ;
line-height:72px ;
cursor: pointer ;
}
cursor: pointer 的意思就是說(shuō)憔披，當(dāng)我鼠標(biāo)劃上去的時(shí)候，讓鼠標(biāo)變成一個(gè)小手的模樣爸吮。
因?yàn)閷?shí)際使用的時(shí)候芬膝，我們點(diǎn)擊導(dǎo)航按鈕就自動(dòng)跳轉(zhuǎn)頁(yè)面，所以形娇，一般來(lái)說(shuō)锰霜，每一個(gè)導(dǎo)航按鈕都應(yīng)該是一個(gè)a標(biāo)簽。
我們將代碼改一下：
<div class="header">
<div class='logo'>原創(chuàng)文字</div>
<ul>
<li class='first'><a href="javascript:void(0)">首頁(yè)</a></li>
<li><a href="javascript:void(0)">原創(chuàng)故事</a></li>
<li><a href="javascript:void(0)">熱門專題</li>
<li><a href="javascript:void(0)">欣賞美文</li>
<li><a href="javascript:void(0)">贊助</a></li>
</ul>
</div>
因?yàn)槟J(rèn)的a標(biāo)簽會(huì)有下劃線桐早，字體顏色是藍(lán)色癣缅，為了美觀厨剪，我們修改一下a標(biāo)簽的樣式：
a {
color: #fff ;
text-decoration: none ;
}
3.5 給導(dǎo)航按鈕添加hover事件
.header ul li :hover {
background:#74b0e2 ;
}
效果：
奇怪了，li 的區(qū)域沒(méi)有變色友存，而當(dāng)我鼠標(biāo)劃到文字上的時(shí)候祷膳，會(huì)有一個(gè)小范圍的變色，這是咋回事呢爬立？
難道hover失效了钾唬？
當(dāng)樓主寫到這里的時(shí)候，我也確實(shí)納悶了一會(huì)侠驯。抡秆。。
結(jié)果一查吟策，發(fā)現(xiàn)：
我擦儒士，這里多了一個(gè)空格啊，有木有檩坚！
好吧着撩，要細(xì)心一點(diǎn)。匾委。
那么拖叙，我們?nèi)サ艨崭瘢驼Ａ恕?/p>
.header ul li:hover {
background:#74b0e2 ;
}
這樣就好看多了吧赂乐。
時(shí)間差不多了薯鳍，今天就到這里。至于更新頻率的話挨措，不一定挖滤，不過(guò)周更是肯定會(huì)有的。
這個(gè)系列也是我的一次嘗試浅役，希望大家喜歡斩松。
您的支持是我寫作的最大動(dòng)力：
免責(zé)聲明： 博客中所有的圖片素材均來(lái)自百度搜索，僅供學(xué)習(xí)交流觉既，如有問(wèn)題請(qǐng)聯(lián)系我惧盹，侵立刪，謝謝瞪讼。
