序
最近揣摩着要写点东西，把根柢的Java Web开发流程完整地走一遍，终究抉择，干脆就写一个小小的项目实战吧。这个小项目作为一个JavaWeb的入门比方，从前台页面到项目发布，把整个流程走通。所谓麻雀虽小，五脏俱全。难度不是很高，正好能够作为入门运用。
接下来便是做什么的问题了，首要不能太简略，那样的话就没意思了。也不能太杂乱，由于我的确也没那么多时刻，左思右想，我计划写一个小型的文章发布体系。
老实说，我也不知道终究会做成什么姿态，但是根柢的CRUD必定少不了的。前台页面的话，我会尽或许做得好看一点，终究我也不是专门做前端的。
至于知识点，当然是尽或许丰富，把我用过的，而且了解的东西，一步一步地集成进去。
嗯，这个系列一旦开始，往后根柢上就围绕着这个小项目写文了。我的意思是，其他文章都不更了，在这个小项目写完之前，我会把其他的文章都放下，全神贯注地编写这个系列。
总算开始了，想想还有点小激动呢。
1. 项目的大致规划
开发工具仍是用eclipse，数据库选用mysql。MVC结构的话，我就不用结构了，朴实用JSP来写，实践开发必定不会这么做，不过，这终究仍是有意义的。当然，你也能够把它换成结构版的。为什么用JSP？由于JSP比较简略，作为一个入门级的web项目，而且我是一边开发一边写文，我就懒得用MVC结构了
为什么我要一边开发一边写，由于我觉得，假定悉数开发好了，再让我从头开始，把开发流程写出来，那是很巨大的工作量，也不现实。而且，一边开发一边写还有个利益，那便是能够帮助读者看到整个项目的开发流程。
而且，包含我自己也不知道终究会写成什么姿态，也或许本文结束后就GG了。
不过不管怎样说，这样都会保存一点点新鲜感和爱好。
假定你是初学者，而且希望完整地看一个小项目是怎样做出来的，那么，这个系列或许会合适你。
或许写10篇文章就结束，也或许30篇，看情况了。
好了，正式开始吧。
2. 项目建立
2.1 新建项目
新建一个 Dynamic Web Project，名字叫Article
点击Finish
将项目的编码改为 utf-8
2.2 新建web.xml
这是web项目的标准，一个web.xml文件能够对你的web项目进行根柢的装备。
2.3 编写web.xml
<welcome-file-list> <welcome-file>index.jspwelcome-file> welcome-file-list> web-app>
2.4 编写index.jsp
在WebContent目录下新建一个index.jsp
代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title heretitle> head> <body> 祝贺，web项目现已建立结束。 body> html>
这便是咱们项目的主页。
2.5 用 tomcat 发布项目
我这边用的是tomcat7.0
运转。
发动结束后，翻开浏览器，在地址栏输入
http://localhost:8080/Article/
(我这边的tomcat端口号为8080)
然后能够清楚得看到，网页上出现了这么一行字：
祝贺，web项目现已建立结束。
这就阐明，web项目现已建立成功了！
3. 主页制作
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>主页title> <style> style> head> <body> <div class="header"> div> body> html>
3.1 标题栏
咱们在body区域画一个div，作为主页的标题栏。它的样式先悉数在本页面写，也便是style块里面。
div是块级元素，所以，虽然咱们没有给它设定宽度，它也默许便是父容器的宽度。所以，咱们只需要给它一个高度就OK啦。
*{ padding: 0 ; margin: 0 ;
} .header { height: 60px ; background: #458fce ;
}作用：
3.2 画一个LOGO
接下来，制作 logo，由于楼主的 PS水平比较渣，所以这个部分就用文字代替吧。当然，假定你是PS大神的话，也能够随意给我做一个logo，鄙人一节中我就放上去。
求 logo ...
<div class="header"> <div class='logo'>原创文字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 导航栏
我随意想了几个导航按钮（其实便是 ul li）：
主页
原创故事
抢手专题
赏识美文
资助
<div class="header"> <div class='logo'>原创文字div> <ul> <li>主页li> <li>原创故事li> <li>抢手专题li> <li>赏识美文li> <li>资助li> ul> div>
一同，咱们把 li 的小圆点去掉：
ul li { list-style: none ;
}
这个作用明显不是咱们想要的，咱们给logo加一个起浮。
然后，给每一个 li 添加一个左起浮：
.header ul li { float: left ;
}
接着，咱们把方位和色彩做一些调整：
<div class="header"> <div class='logo'>原创文字div> <ul> <li class='first'>主页li> <li>原创故事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 的意思便是说，当我鼠标划上去的时分，让鼠标变成一个小手的容貌。
由于实践运用的时分，咱们点击导航按钮就自动跳转页面，所以，一般来说，每一个导航按钮都应该是一个a标签。
咱们将代码改一下：
<div class="header"> <div class='logo'>原创文字div> <ul> <li class='first'><a href="javascript:void(0)">主页a>li> <li><a href="javascript:void(0)">原创故事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>
由于默许的a标签会有下划线，字体色彩是蓝色，为了美丽，咱们批改一下a标签的样式：
a { color: #fff ; text-decoration: none ;
}3.5 给导航按钮添加hover事情
.header ul li :hover { background:#74b0e2 ;
}作用：
奇怪了，li 的区域没有变色，而当我鼠标划到文字上的时分，会有一个小范围的变色，这是咋回事呢？
难道hover失效了？
当楼主写到这儿的时分，我也的确疑问了一会。。。
成果一查，发现：
我擦，这儿多了一个空格啊，有木有！
好吧，要仔细一点。。
那么，咱们去掉空格，就正常了。
.header ul li:hover { background:#74b0e2 ;
}共同学习，写下你的评论
评论加载中...
作者其他优质文章
