入门级项目实战之设计文章发布系统

项目搭建

新建一个 Dynamic Web Project，名字叫Article

点击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 ...

原创文字

css:

效果：

导航栏

我随便想了几个导航按钮（其实就是 ul li）：

首页

原创故事

热门专题

欣赏美文

赞助

原创文字

首页

原创故事

热门专题

欣赏美文

赞助

同时，我们把 li 的小圆点去掉：

ul li {

list-style: none ;

}

这个效果显然不是我们想要的，我们给logo加一个左浮动，于是原本在下面的元素就会跟过来。

然后，给每一个 li 添加一个左浮动：

.header ul li {

float: left ;

}

接着，我们把位置和颜色做一些调整：

原创文字

首页

原创故事

热门专题

欣赏美文

赞助

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标签。

我们将代码改一下：

原创文字

首页原创故事

热门专题

欣赏美文赞助

因为默认的a标签会有下划线，字体颜色是蓝色，为了美观，我们修改一下a标签的样式：

a {

color: #fff ;

text-decoration: none ;

}

给导航按钮添加hover事件

.header ul li :hover {

background:#74b0e2 ;

}

奇怪了，li 的区域没有变色，而当我鼠标划到文字上的时候，会有一个小范围的变色，这是咋回事呢？

难道hover失效了？

当楼主写到这里的时候，我也确实纳闷了一会。。。

结果一查，发现：

我擦，这里多了一个空格啊，有木有！

好吧，要细心一点。。

那么，我们去掉空格，就正常了。

.header ul li:hover {

background:#74b0e2 ;

}

这样就好看多了吧。

这一节只是画了一个页面而已，其他也没啥。

写在结尾

最近小编在忙于辅导大学生的毕业设计，文章草草发布，如有问题和建议可以在下方留言，大家一起学习共同探讨