仿绝地求生官网 jsp+css
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%String path=request.getContextPath();
%>
<html>
<head>
<link href="<%=path%>/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="heading">
<div class="heading_img">
<img src="<%=path%>/tubiao.png">
</div>
<div class="heading_bar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻公告</a></li>
<li><a href="#">游戏特色</a></li>
<li><a href="#">社区APP</a></li>
</ul>
</div>
</div>
<div class="zhuti">hahha</div>
<div class="footing">
<div class="footing_img1">
<img src="<%=path%>/02.png">
</div>
<div class="footing_img2">
<img src="<%=path%>/03.png">
</div>
<div class="footing_bar">
<ul class="ul2">
<li class="li2"><a href="#">腾讯互动娱乐</a></li>
<li class="li2"><a href="#">|</a></li>
<li class="li2"><a href="#">服务条款</a></li>
<li class="li2"><a href="#">|</a></li>
<li class="li2"><a href="#">广告服务</a></li>
<li class="li2"><a href="#">|</a></li>
<li class="li2"><a href="#">腾讯游戏招聘</a></li>
<li class="li2"><a href="#">|</a></li>
<li class="li2"><a href="#">腾讯游戏客服</a></li>
<li class="li2"><a href="#">|</a></li>
<li class="li2"><a href="#">游戏地图</a></li>
<li class="li2"><a href="#">|</a></li>
<li class="li2"><a href="#">游戏活动</a></li>
<li class="li2"><a href="#">|</a></li>
<li class="li2"><a href="#">商务合作</a></li>
<li class="li2"><a href="#">|</a></li>
<li class="li2"><a href="#">网站导航</a></li>
</ul>
</div>
</div>
</body>
</html>
body{
margin:0px 0px;
}
.heading{
width:100%;
height:140px;
background:black;
margin:0px auto;
}
.heading_img{
margin-left:200px;
margin-top:25px;
display:inline;
float:left;
}
ul{
margin-left:80px;
margin-top:50px;
font-size:15px;
float:left;
list-style-type:none;
}
li{
padding-left:20px;
display:inline;
}
a:link,a:visited{
font-weight:bold;
color:white;
text-align:center;
padding:5px;
text-decoration:none;
}
a:hover,a:active{
color:FF9900;
}
.zhuti{
width:100%;
height:700px;
background:white;
margin:0px 0px;
}
.footing{
width:100%;
height:170px;
background:black;
margin:0px 0px;
}
.footing_img1{
margin-left:170px;
margin-top:35px;
display:inline;
float:left;
}
.footing_img2{
margin-left:20px;
margin-top:35px;
display:inline;
float:left;
}
.ul2{
margin-left:10px;
margin-top:70px;
font-size:5px;
float:left;
list-style-type:none;
}
.li2{
padding-left:1px;
display:inline;
}
