webapp设置适应pc和手机的页面宽高以及布局层叠图片文字
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>我趣旅行网-美剧迷</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="wrapper">
<img class="bg" src="img/background.png"/>
<img class="logo" src="img/pisode_logo.png">
<p class="pisode">Pisode</p>
</div>
</body>
</html>
css:
html,body{
height:100%;
margin:0;
padding:0;
}
.wrapper{
position:relative;
margin: 0 auto;
max-width: 500px;
min-height: 100%;
text-align: center;
width: 100%;
}
.bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
height: 100%;
}
.logo{
width:100%;
}
.pisode{
font-size:14px;
}
效果图:
访问链接:http://2.chuang8.sinaapp.com
webapp设置适应pc和手机的页面宽高以及布局层叠图片文字的更多相关文章
- javascript 常用获取页面宽高信息 API
在页面的构建中 常常会需要获取页面的一些宽高信息,例如实现 惰性加载图片 需要获取页面的可见区域高度 和 已滚动区域的高度,以判断图片所在位置是否可见来决定加载图片的时间, 花点时间整理了一下,获取页 ...
- jquery获取元素各种宽高及页面宽高总结
window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/mar ...
- jquery获取元素各种宽高及页面宽高
如何使用jquery来获取网页里各种高度? 示例如下: $(document).ready(function(){ var divWidth = $("#div").width( ...
- js动态添加iframe,自适应页面宽高
function showIframe(url,w,h){ //添加iframe var if_w = w; var if_h = h; $("<iframe width='" ...
- jQuery 获取页面宽高
无滚动条的情况下(页面宽高比可视区域小):$(document)和$(window)的width.height方法获取的值都是一样的,都是可视区域的宽高即$(document).width()==$( ...
- 页面中iframe中嵌入一个跨域的页面,让这个页面按照嵌入的页面宽高大小显示的方式;iframe嵌套的页面不可以编辑的问题解决方案
<html> <head> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; ...
- jq弹窗(获取页面宽高,滚轮高度,始终居中)
jq写一个弹窗,效果如上图所示, 点击按钮弹窗弹出,右上角关闭. 弹窗始终显示在页面中间,无论放大缩小窗口,滚轮滚动. 代码如下: html: <br><br><br&g ...
- 屏幕的遮挡层,js得到屏幕宽高、页面宽高 (window.screen.availHeight)等--
window.screen.availWidth 返回当前屏幕宽度(空白空间) ------当手机有输入法的时候,要注意................window.screen.availHeigh ...
- js得到屏幕宽高、页面宽高 (window.screen.availHeight)等--笔记
window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width ...
随机推荐
- Mysql高并发优化
一.数据库结构的设计 1.数据行的长度不要超过8020字节,如果超过这个长度的话在物理页中这条数据会占用两行从而造成存储碎片,降低查询效率. 2.能够用数字类型的字段尽量选择数字类型而不用字符串类型的 ...
- 背水一战 Windows 10 (1) - C# 6.0 新特性
[源码下载] 背水一战 Windows 10 (1) - C# 6.0 新特性 作者:webabcd 介绍背水一战 Windows 10 之 C# 6.0 新特性 介绍 C# 6.0 的新特性 示例1 ...
- 使用Eclipse为Android定义style
1.首先,在values目录下,新建一个styles.xml文件: 2.进入styles.xml文件,点击Resources: 3.点击Add按钮,在弹出的对话框中选择在顶层创建新元素,在选择Styl ...
- 基于TCP和多线程实现无线鼠标键盘-Socket(1)
把手机作为移动鼠标.键盘使用非常方便,本文将实现这一功能.该应用分为两部分:Windows服务端和Android客户端. 本文源代码的下载地址:http://download.csdn.net/det ...
- Java就业指导
想要成为合格的Java程序员或工程师到底需要具备哪些专业技能,面试者在面试之前到底需要准备哪些东西呢?本文陈列的这些内容既可以作为个人简历中的内容,也可以作为面试的时候跟面试官聊的东西,你可以把这些内 ...
- 【FOL】第二周
一直在忙其他事情,停了好久了.终于又可以开始做点东西了. 这周主要工作: 1.整理客户端代码,加入网络模块:fol.client.net. 2.写了个简单的版本服务端程序. 3.初步完成了自动更新功能 ...
- 【原创】SQLServer将数据导出为SQL脚本的方法
最近很多同学问到一个问题,如何将MSSQLServer的数据库以及里面的数据导出为SQL脚本,主要问的是MSSQLServer2000和2005,因为2008的管理器已经有了这个功能,2000和200 ...
- jQuery Portamento 滑动定位
版本: jQuery v1.3.2+ jQuery Portamento v1.1.1 注意事项: 在不支持position:fixed的浏览器里效果不是很好(例如 IE6.iOS4),可以在参数中设 ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- Web 前沿——HTML5 Form Data 对象的使用
XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...