之前因为这个背景放大缩小问题困扰几天,随后找了很多方资料才解决...
这次把他记录下来,事出仓促就直接放自己的代码了,效果图如下。
代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>慧锐通智能科技股份有限公司</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src=${pageContext.request.contextPath}/js/jquery.js></script>
<metaname=”viewport”content=”width=device-width, initial-scale=1″ />
<!--
这里使用的是jsp 但此处java的使用仅有路径的引用. 根据自己的url地址改
-->
</head>
<style type="text/css">
/* 很重要,以解决html 中很多默认值问题,便于统一 一般情况下有一大堆初始化的 */
*{margin:0;padding:0;}
.main{
/* 使用绝对定位,给他固定宽度高度 主要作用者 position:absolute;*/
height:100%;
position:absolute;
left:0;right:0;top:0;bottom: 0;
}
.title{
width: 100%;
height: 72px;
background: #000000;
background:rgba(0,0,0,0.4);
position:absolute;
left: 0;top: 0;
}
.bottom{
margin: 0 auto;height: 100px;
width: 40%;
position:absolute;
left:30%;
bottom:0;
text-align: center;
font-size: 14px;
}
ul li{
list-style: none;
float: left;
width: 200px;
height: 72px;
font-size: 18px;
text-align: center;
line-height: 72px;
}
a{
text-decoration: none;
color: #ffffff;
}
</style>
<script type="text/javascript">
$(function(){
$("li").mouseover(function (){
$(this).css({"height":"76","background-image":"url('${pageContext.request.contextPath }/images/titlemouser.png'"});
}).mouseout(function (){
//background:rgba(0,0,0,0.5) 代表透明度,以解决div设置opacity后里面元素也跟着透明问题。
$(this).css({"background":"rgba(0,0,0,0)","height":"72"});
});
});
</script>
<body>
<div class="main" >
<!-- 背景图 -->
<img src="${pageContext.request.contextPath}/images/1920X1080.jpg" width="100%"/>
<!-- 设置一个div 进行绝对定位,利用img标签中的图片作为背景图. 接下来的div控制就由自己去设定了 -->
<div class="title">
<ul>
<li style="margin-left: 8%;"><a href="${pageContext.request.contextPath}/app_jqm/main.jsp">二维码系统</a></li>
<li><a href="http://www.wrtsz.com/">公司官网</a></li>
</ul>
</div>
<div class="bottom">
<p>版权所有 © 慧锐通智能科技股份有限公司 2001-2017 保留一切权利。</p><br/>
<p>粤ICP备14076561号-2</p>
</div>
</div>
</body>
</html>
简单的一个界面,但也涉及到许多常用而又容易忘记的内容