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

Capricornus薇

Capricornus薇

2016-02-19 23:29

下面图老师小编跟大家分享div+css网页适应不同分辨率技巧,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

在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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

去掉下滑条的情况下,使两列各占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偷钱流符文搭配推荐

DIV+CSS网页布局心得

Web开发
DIV+CSS网页布局心得

DIV+CSS网页布局入门

Web开发
DIV+CSS网页布局入门

lolAD刺客新符文搭配推荐

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

残花渐落的唯美好看的QQ分组每ー种期待都是幻灭

残花渐落的唯美好看的QQ分组每ー种期待都是幻灭

CSS样式表教程:screen媒体类型的作用

CSS样式表教程:screen媒体类型的作用
下拉加载更多内容 ↓