div css网页适应不同分辨率技巧

wo为你变乖N

wo为你变乖N

2016-02-19 11:51

下面图老师小编要跟大家分享div css网页适应不同分辨率技巧,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

在ie6里,带默认下滑条,用div布局效果。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlesdf/title
/head
script
function $(uid){return document.getElementById(uid);}
function lod(){
var b_w=document.documentElement.clientWidth;
$('left').style.width=parseInt(b_w/2) 'px'
$('right').style.width=parseInt(b_w/2) 'px'
}
/script
body onload="lod();"
style
*{margin:0px; padding:0px;}
div{height:300px;}
#left{float:left; background-color:#FF0000;}
#right{float:left; background-color:#0000FF;}
/style
div id="left"/div
div id="right"/div
p在ie6里 带默认下滑条 用div布局效果/p
/body
/html
去掉下滑条的情况下,使两列各占50%。缺点是,内容不能超长,适合软件布局使用。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
style
*{margin:0px; padding:0px;}
div{height:300px;}
.left{width:50%; float:left; background-color:#FF0000;}
.right{width:50%; float:left; background-color:#0000FF;}
/style
/head
body scroll="no"
div class="left"/div
div class="right"/div
/body
/html
在ie6中有下滑条的情况下布局,毛病在于左右两列的宽度不是绝对相等。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
style
*{margin:0px; padding:0px;}
div{height:300px;}
.left{width:50%; float:left; background-color:#FF0000;}
.right{width:50%; float:left; background-color:#0000FF;margin-right:-20px;}
/style
/head
div class="left"/div
div class="right"/div
/body
/html
展开更多 50%)
分享

猜你喜欢

div css网页适应不同分辨率技巧

Web开发
div css网页适应不同分辨率技巧

div+css网页适应不同分辨率技巧

Web开发
div+css网页适应不同分辨率技巧

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页如何自适应不同的分辨率界面

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页如何自适应不同的分辨率界面

网页分辨率设置技巧

Web开发
网页分辨率设置技巧

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

根据分辨率不同调用不同的css文件

Web开发
根据分辨率不同调用不同的css文件

网页设计 自适应客户端分辨率的实现

Web开发
网页设计 自适应客户端分辨率的实现

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

C++ 学习之旅二 说一说C++头文件

C++ 学习之旅二 说一说C++头文件

加速PPT2010打开速度

加速PPT2010打开速度
下拉加载更多内容 ↓