no-repeat: 即无论背景图片的大小, 只显示单个背景图片, 如首页的第一篇文章标题前的”NEW”图标, 代码如上所示
repeat: 指背景图片横向和纵向重复连续显示
repeat-x: 指背景图片横向重复连续显示
repeat-y 指背景图片纵向重复连续显示
两边拉伸的话可以，中间背景做一个渐变，两边使用单色平铺
这个很简单，用js才能实现，css样式我就不说了，左侧是a链接，右侧是div，关键是js，在每个点击里添加onclick事件，事件触发opens函数，函数通过参数判断要打开哪个div，其余的再隐藏，给个例子你，很简单的东西，我随便写的，没有测试过，你自己研究研究：
lta href=quot#quotonclick=quotopens(1)quotgt1lt/agt
lta href=quot#quotonclick=quotopens(2)quotgt1lt/agt
lta href=quot#quotonclick=quotopens(3)quotgt1lt/agt
ltdiv id=quotdis1quotgt111lt/divgt
ltdiv id=quotdis2quotstyle=quotdisplay:nonequotgt222lt/divgt
ltdiv id=quotdis3quotstyle=quotdisplay:nonequotgt333lt/divgt
ltscriptgt
function opens(obj){
for(var i = 1ilt=3i++){
if(i == obj){document.getElementById(quotdisquot+i).style.display=quotblockquot
}else
document.getElementById(quotdisquot+i).style.display=quotnonequot
}
}
lt/scriptgt
<!doctype html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0,user-scalable=0">
<title>Div</title>
<style>
.main_div{
height:600px
padding-left:30px
border:1px solid #858585
background:#0000ff
}
.div1{
float:left
width:30px
margin-left:-30px
height:100%
background:#f7ed12
}
.div2{
float:left
width:50%
height:100%
background:#00a1e9
float:left
}
.div3{
width:50%
height:100%
background:#858585
float:right
}
</style>
</head>
<body>
<div class="main_div">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
