点击Finish
将项目的编码改为 utf-8
新建web.xml
这是web项目的规范，一个web.xml文件可以对你的web项目进行基本的配置。
编写web.xml
编写index.jsp
在WebContent目录下新建一个index.jsp
代码：
这便是我们项目的首页。
用 tomcat 发布项目
运行。
启动完毕后，打开浏览器，在地址栏输入
http://localhost:8080/Article/
(我这边的tomcat端口号为8080)
然后可以清楚得看到，网页上涌现了这么一行字：
恭喜，web项目已经搭建完成。
这就解释，web项目已经搭建成功了！
首页制作
标题栏
我们在body区域画一个div，作为首页的标题栏。它的样式先全部在本页面写，也便是style块里面。
div是块级元素，以是，虽然我们没有给它设定宽度，它也默认便是父容器的宽度。以是，我们只须要给它一个高度就OK啦。
效果：
画一个LOGO
接下来，绘制 logo，由于楼主的 PS水平比较渣，以是这个部分就用笔墨替代吧。当然，如果你是PS大神的话，也可以随便给我做一个logo，不才一节中我就放上去。
求 logo ...
<div class=\"大众header\"大众> <div class='163ba37616450c5a logo'>原创笔墨</div></div>
css:
效果：
导航栏
我随便想了几个导航按钮（实在便是 ul li）：
首页原创故事热门专题欣赏美文资助<div class=\公众header\"大众> <div class='a37616450c5a4059 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='16450c5a4059618d logo'>原创笔墨</div> <ul> <li class='0c5a4059618d6f09 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='4059618d6f09c734 logo'>原创笔墨</div> <ul> <li class='618d6f09c734d1a9 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 ;}
给导航按钮添加hover事宜
.header ul li :hover { background:#74b0e2 ;}
奇怪了，li 的区域没有变色，而当我鼠标划到笔墨上的时候，会有一个小范围的变色，这是咋回事呢？
难道hover失落效了？
当楼主写到这里的时候，我也确实纳闷了一会。。。
结果一查，创造：
我擦，这里多了一个空格啊，有木有！
好吧，要细心一点。。
那么，我们去掉空格，就正常了。
.header ul li:hover { background:#74b0e2 ;}
这样就好看多了吧。
这一节只是画了一个页面而已，其他也没啥。
写在结尾
最近小编在忙于辅导大学生的毕业设计，文章草草发布，如有问题和建议可以不才方留言，大家一起学习共同磋商。
