51Testing软件测试论坛

标题: JavaWeb 入门级项目实战 [打印本页]

作者: NewDreamTester 时间: 2018-2-2 15:13
标题: JavaWeb 入门级项目实战
本帖最后由 NewDreamTester 于 2018-2-2 15:23 编辑

1 新建项目
新建一个 Dynamic Web Project，名字叫Article
[attach]110555[/attach]
点击Finish
[attach]110569[/attach]
将项目的编码改为 utf-8
[attach]110556[/attach]
2 新建web.xml
[attach]110557[/attach]
这是web项目的规范，一个web.xml文件可以对你的web项目进行基本的配置。
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">


<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
4 编写index.jsp
在WebContent目录下新建一个index.jsp
[attach]110558[/attach]
代码：
<%@ 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项目已经搭建完成。</body></html>
这就是我们项目的首页。
5 用 tomcat 发布项目

我这边用的是tomcat7.0
[attach]110559[/attach]
运行。
启动完毕后，打开浏览器，在地址栏输入
http://localhost:8080/Article/
(我这边的tomcat端口号为8080)

然后可以清楚得看到，网页上出现了这么一行字：
恭喜，web项目已经搭建完成。
这就说明，web项目已经搭建成功了！

6 首页制作
<%@ 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>首页</title><style>
</style></head><body>
<div class="header">

</div></body></html>

7 标题栏
我们在body区域画一个div，作为首页的标题栏。它的样式先全部在本页面写，也就是style块里面。
div是块级元素，所以，虽然我们没有给它设定宽度，它也默认就是父容器的宽度。所以，我们只需要给它一个高度就OK啦。
*{
padding: 0 ;
margin: 0 ;
}
.header {
height: 60px ;
background: #458fce ;
}
效果：
[attach]110560[/attach]
8 画一个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 ;
}
[attach]110561[/attach]

9 导航栏
我随便想了几个导航按钮（其实就是 ul li）：
1.首页
2.原创故事
3.热门专题
4.欣赏美文
5.
赞助
6.
<div class="header"><div class='logo'>原创文字</div><ul>
<li>首页</li>
<li>原创故事</li>
<li>热门专题</li>
<li>欣赏美文</li>
<li>赞助</li></ul></div>
7.
同时，我们把 li 的小圆点去掉：
ul li { list-style: none ; }
[attach]110562[/attach]
这个效果显然不是我们想要的，我们给logo加一个浮动。
[attach]110563[/attach]
然后，给每一个 li 添加一个左浮动：
.header ul li { float: left ; }
[attach]110564[/attach]
接着，我们把位置和颜色做一些调整：
<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 ; }
[attach]110565[/attach]
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 ; }

10 给导航按钮添加hover事件
.header ul li :hover { background:#74b0e2 ; }
效果：
[attach]110566[/attach]
奇怪了，li 的区域没有变色，而当我鼠标划到文字上的时候，会有一个小范围的变色，这是咋回事呢？
难道hover失效了？
当楼主写到这里的时候，我也确实纳闷了一会。。。
结果一查，发现：
[attach]110567[/attach]
我擦，这里多了一个空格啊，有木有！
好吧，要细心一点。。
那么，我们去掉空格，就正常了。
.header ul li:hover { background:#74b0e2 ; }
[attach]110568[/attach]
这样就好看多了吧。

欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)