一般活动页面之类简单的背景图内容布局方式
2016-08-18 15:23
274 查看
css:
.bg { width: 100%;height:auto; }
.content{width:100%;min-height:100px;}
html:
<div id="img_bg"><img class="bg" src="/zhannew/statics/images/cdz/red-input-bg.png" ></div>
<div class="content"></div>
js:
addLoadEvent(layoutFix);
function layoutFix(){
var img_height = $('.bg').height();
$('.content').height(img_height);
$('.content').css('margin-top','-'+img_height+'px');
}
function addLoadEvent(func) {
var old_onload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else{
old_onload();
func();
}
}
.bg { width: 100%;height:auto; }
.content{width:100%;min-height:100px;}
html:
<div id="img_bg"><img class="bg" src="/zhannew/statics/images/cdz/red-input-bg.png" ></div>
<div class="content"></div>
js:
addLoadEvent(layoutFix);
function layoutFix(){
var img_height = $('.bg').height();
$('.content').height(img_height);
$('.content').css('margin-top','-'+img_height+'px');
}
function addLoadEvent(func) {
var old_onload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else{
old_onload();
func();
}
}
相关文章推荐
- 03-一个简单的注册页面---使用线性布局方式编写
- 一个简单的页面,设置背景图平铺、table布局居中、响应式布局及响应式布局中em尺寸单位使用
- 简单活动页面布局
- Android简单实现仿支付宝新年红包活动页面的动态布局效果
- 一个简单的页面,设置背景图平铺、table布局居中、响应式布局及响应式布局中em尺寸单位使用
- 常见的几种页面内容布局方式
- Div css页面布局简单实现
- 一种移动端布局方式随内容往下走的底部
- 活动被回收的处理、活动的启动模式、一键退出所有活动、UI控件、四种布局方式、自定义控件
- 精通CSS+DIV网页样式与布局--页面背景
- python网络爬虫学习(一)通过GET和POST方式获取页面内容
- css页面左中右分栏布局两种方式示例代码
- xaml初学(内容控件、页面布局)
- css div布局的简单页面
- PHP - 简单获取页面内容
- 在对小程序开发时我们会进行页面的布局。这里我们简单的介绍下flex布局的使用
- 最简单完全退出应用方式(活动依次出栈)
- javascript打印页面内容简单的方法
- 一个简单的用javascript实现的页面内容过滤显示小程序源码
- ASP.NET : 重写页面输出内容的2种方式