我知道了,你要做类似后台系统吧,宽度都能自适应屏幕,自适应分辨率的吧!
~OK,好吧!
上面回答的都没用,不带那样玩的~我经常做这个!有点小复杂,全用DIV中间内容部分IE7不行,所以得用TABLE内嵌!
<html xmlns="http://www.w3.org/1999/xhtml&quot>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>自适应</title>
<style type="text/css">
html {height:100%max-height:100%padding:0margin:0border:0background:#eef0effont-size:76%overflow:hidden}
body{height:100%max-height:100% border:0overflow:hidden background:#fff padding:0}
/*lay
--------------*/
#content{
position:absolute
overflow:hidden
z-index:3
top:106px
left:0
width:100%
bottom:28px
bottom:28px\9
background:#ddd
}
*html #content {
top:0
height:100%
max-height:100%
width:100%
overflow:hidden
position:absolute
z-index:3
border-top:106px solid #fff
border-bottom:28px solid #fff
}
#header{
position:absolute
margin:0
top:0
left:0
display:block
width:100%
height:106px
line-height:106px
background:#333
z-index:5
overflow:hidden
color:#fff
text-align:center
}
#footer{
position:absolute
margin:0
bottom:0
left:0
display:block
width:100%
height:28px
line-height:28px
text-align:center
z-index:5
overflow:hidden
color:#fff
background:#333
}
/*中间表格*/
.main_tab{
width:100%
height:100%
}
.main_tab td{
padding:0px
margin:0px
vertical-align:top
height:100%
max-height:100%
}
.main_tab td.td_left{
width:181px
background:#00CCFF
}
.main_tab td.td_close{
padding:0px
width:8px
vertical-align:middle
background:#ff0000
font-size:12px
overflow:hidden
}
</style>
</head>
<body>
<div id="header"><h1>顶部</h1></div>
<div id="content">
<table cellpadding="0" cellpadding="0" border="0" class="main_tab">
<tr>
<td class="td_left">
<div class="menu_column">
<div class="title"></div>
<div class="menu_con">
<div class="lef_nav">
左边
</div>
</div>
</div> <!--左边菜单 end-->
</td>
<td class="td_close">▶</td>
<td>
内容<br />兼容IE6、7、8,火狐,谷歌!
</td>
</tr>
</table>
</div>
<div id="footer">底部</div>
</body>
</html>
<!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/htmlcharset=gb2312" />
<title>图片滚动</title>
</head>
<body>
<style type="text/css">
<!--
#demo {
background: #FFF
overflow:hidden
border: 1px dashed #CCC
width: 500px
}
#demo img {
border: 3px solid #F2F2F2
}
#indemo {
float: left
width: 800%
}
#demo1 {
float: left
}
#demo2 {
float: left
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s1.jpg" //可换成自己的图片
border="0" /></a>
<a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s2.jpg" //可换成自己的图片
border="0" /></a>
<a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s3.jpg" //可换成自己的图片
border="0" /></a>
<a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s4.jpg" //可换成自己的图片
border="0" /></a>
<a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s5.jpg" //可换成自己的图片
border="0" /></a>
<a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s6.jpg" //可换成自己的图片
border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10
var tab=document.getElementById("demo")
var tab1=document.getElementById("demo1")
var tab2=document.getElementById("demo2")
tab2.innerHTML=tab1.innerHTML
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
tab.onmouseover=function() {clearInterval(MyMar)}
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
-->
</script>
</body>
</html>