请选择 进入手机版 | 继续访问电脑版

饕餮源码网,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 148|回复: 4

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

[复制链接]

7万

主题

8万

帖子

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2008-10-17 19:23:39 | 显示全部楼层 |阅读模式
在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"> <
在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" />
<title>sdf</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>
回复

使用道具 举报

4

主题

9480

帖子

107

积分

注册会员

Rank: 2

积分
107
发表于 2022-8-10 20:30:31 | 显示全部楼层
这个源码还可以
回复 支持 反对

使用道具 举报

6

主题

9615

帖子

247

积分

中级会员

Rank: 3Rank: 3

积分
247
发表于 2022-8-26 21:33:17 | 显示全部楼层
哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

2

主题

4279

帖子

146

积分

注册会员

Rank: 2

积分
146
发表于 2023-2-11 08:42:45 | 显示全部楼层
的vgdsvsdvdsvdsvds
回复 支持 反对

使用道具 举报

0

主题

9954

帖子

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 5 天前 | 显示全部楼层
看看看咋么
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|饕餮源码网 ( 海外版 )

GMT+8, 2023-3-24 23:11 , Processed in 0.066586 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表