·天新网首页·加入收藏·设为首页
首页|笔记本|手机|数码相机|摄像机|MP3/MP4|主板|内存|显示器|办公|打印机|下载|开发|汽车|学院|业界
硬件|台式机|数码|数字家庭|投影仪|GPS/CPU|显卡|硬盘|服务器|网络|一体机|驱动|源码|游戏|考试|报价
您现在的位置:天新网 > 网络学院 > 网站建设 > HTML/CSS
div+css网页适应不同分辨率技巧
http://school.21tx.com 2008年05月09日 网页教学网

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>

上一篇: css浮动的实例
下一篇: HTML语言大全

Google
 
学院频道推荐
学院热点文章
关于我们 | 联系我们 | 广告服务 | 工作机会 | 版权声明 | 欢迎投稿 | 网站地图
Copyright © 2000-2008 , www.21tx.com , All Rights Reserved .
© 晨新科技 版权所有 Created by TXSite.net