项目搭建
新建一个 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 ;
}
这样就好看多了吧。
这一节只是画了一个页面而已,其他也没啥。
写在结尾
最近小编在忙于辅导大学生的毕业设计,文章草草发布,如有问题和建议可以在下方留言,大家一起学习共同探讨
领取专属 10元无门槛券
私享最新 技术干货