html 背景图自适应实例(css 利用position:absolute)
来源:互联网 发布:文本挖掘软件 编辑:程序博客网 时间:2024/06/06 00:48
之前因为这个背景放大缩小问题困扰几天,随后找了很多方资料才解决...
这次把他记录下来,事出仓促就直接放自己的代码了,效果图如下。
代码:
<%@ 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>
简单的一个界面,但也涉及到许多常用而又容易忘记的内容
阅读全文
0 0
- html 背景图自适应实例(css 利用position:absolute)
- html背景图 全屏 自适应 css
- css position: absolute relative
- CSS样式:position: absolute
- CSS背景图自适应
- html背景图自适应
- css position: absolute、relative详解
- css中position relative absolute
- CSS position: absolute, relative详解
- css position: absolute、relative详解
- css中position:absolute|relative
- css position: relative,absolute详解
- css position- absolute、relative详解
- css position: absolute、relative详解
- 【CSS】关于position:absolute布局
- css position: absolute、relative详解
- css position absolute一些认识
- CSS中position:relative/absolute
- Json 串中的转义字符解析
- Linux(一)--rht-vmctl命令/Linux中的帮助使用/Linux中如何执行命令/Linux系统结构/利用通配符批量管理文件
- Java 导出excel表 POI
- java 实现邮件发送
- IOSIAP二次验证
- html 背景图自适应实例(css 利用position:absolute)
- mysql Host 'XXX' is not allowed to connect to this MySQL server 解决方案
- 从苹果的第一篇机器学习博客中得到的启发
- cxselect联动下拉菜单 所需数据格式封住
- 微信支付开发教程
- Nginx安装教程
- OC -基础(三) 学习中。。。
- 最长连续序列-LintCode
- Java内存回收机制