<style>
body{
padding: 0px
margin: 0px
font: 70% verdana, geneva, arial, helvetica, sans-serif
color: #000
text-align: center
}
#outer{
padding: 0px
margin: 0px
width: 800px
text-align: center
}
#focus{
border: #ccc 2px solid
margin: 0px
padding: 0px
padding-top: 15px
background: url(/images/tile.gif) #eee repeat-y left top
width:694px
position: relative
height: 180px
}
#description{
width:550px
height:150px
overflow:hidden
margin-right:15px
float:left
}
.dis{
float:left
width:40px
text-align: center
padding-top:50px
cursor:pointer
}
#description ul, #description li {
float:left
display: inline
margin: 0
padding: 0
height:150px
}
.view_pic a:active,
.view_pic a:visited,
.view_pic a:link {
display: inline
margin: 0
padding: 0
padding-left: 5
padding-right: 5
text-decoration: none
}
.view_pic a:hover {
color: #ffffff
display: inline
text-decoration: none
}
img {border:0px}
</STYLE>
</head>
<body>
<div id=LayerMenu style="display:none z-index: 1000filter: alpha(opacity=0)position: absoluteleft:384pxtop:69pxwidth:126pxheight:20pxborder:1px solid greenbackground:#e11padding:2pxfont-size:12px">抱歉,已经到头了!
</div>
<div id=outer>
<div id=focus>
<div class="dis">
<img id="img_l" src="back.png" alt="向左滚动" onClick="doSlide(-1)" />
</div>
<div id=description>
<div id="view_pic0" style="height:100pxwidth:1650px">
<ul id="view_pic" class=view_pic>
<li><a href="#"><img src="png-0001.png"/></a></li>
<li><a href="#"><img src="png-0002.png"/></a></li>
<li><a href="#"><img src="png-0003.png"/></a></li>
<li><a href="#"><img src="png-0004.png"/></a></li>
<li><a href="#"><img src="png-0005.png"/></a></li>
<li><a href="#"><img src="png-0006.png"/></a></li>
<li><a href="#"><img src="png-0007.png"/></a></li>
<li><a href="#"><img src="png-0008.png"/></a></li>
<li><a href="#"><img src="png-0009.png"/></a></li>
<li><a href="#"><img src="png-0010.png"/></a></li>
<li><a href="#"><img src="png-0011.png"/></a></li>
<li><a href="#"><img src="png-0012.png"/></a></li>
<li><a href="#"><img src="png-0012.png"/></a></li>
</ul>
</div>
</div>
<div class="dis">
<img id="img_r" src="next.png" alt="向右滚动" onClick="doSlide(1)" />
</div>
</div>
</div>
<script>
var ok_obj=document.getElementById("view_pic").getElementsByTagName("LI")
var ok=Math.ceil(ok_obj.length/3)-1
var ele=document.getElementById("description")
var w=ele.clientWidth
var n=20,t=50
var timers=new Array(n)
var k=0doSlide(0)
function doSlide(s){
if (k>=ok &&s>0|| k<=0 &&s<0)MenuClick()
else{
k+=s
var x=ele.scrollLeft
var d=k*w-x
for(var i=0i<ni++)(
function(){
if(timers[i]) clearTimeout(timers[i])
var j=i
// alert(x)
timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)))},(i+1)*t)
}
)()
}}
</script>
<SCRIPT language=javascript>
var intDelay=30//设置菜单显示速度，越大越慢
var intInterval=5
function MenuClick(){
LayerMenu.filters.alpha.opacity=0
LayerMenu.style.display=""
GradientShow()
}
function GradientShow()
{
LayerMenu.filters.alpha.opacity+=intInterval
if (LayerMenu.filters.alpha.opacity<100) setTimeout("GradientShow()",intDelay)
else setTimeout("GradientClose()",1500)
}
function GradientClose()
{
LayerMenu.filters.alpha.opacity-=intInterval
if (LayerMenu.filters.alpha.opacity>0) {
setTimeout("GradientClose()",intDelay)
}
else {
LayerMenu.style.display="none"
}
}
GradientClose()
</SCRIPT>
div写的话比较麻烦，需要调用JS才能让2个div高度一样，你干脆直接用table写好了，我给你大概写个示例：<div style="width:215px">
<table border="0" cellpadding="0" cellspacing="5" width="100%">
<tr>
<td style=" background-color:redcolor:#fffheight:50pxtext-align:centerposition:relative">
<div style=" position: absolutetop:0width:100% background-color:#000color:#ffftext-align:center">subnav</div>
<div style=" position: absolutebottom:0width:100%background-color:#000color:#ffftext-align:center">contact</div>
</td>
<td style=" background-color:#000color:#fffheight:400pxwidth:100pxtext-align:center">rightcol</td>
</tr>
</table>
</div>
这个我只做了IE的测试，没空做其他版本浏览器的测试，反正实现平行的div等高用table是最快捷的
其实写页面也不是说除了表格其他地方就绝对不用table布局，这种想法比较极端，任何的标签都会有其特有的功能或者说是方便之处，合理的使用才是最好的
<!DOCTYPE html><html>
<head>
<title>vn</title>
<style>
.box { width: 300px height: 300px background-color: red margin: 10px 0 }
#animation-1:target {
animation: rotate 1000ms linear both
}
#animation-2:target {
animation: translate 1000ms linear both
}
#animation-3:target {
animation: scale 1000ms linear both
}
@keyframes rotate {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) }
}
@keyframes translate {
0% { transform: translate(-100%, 0) }
100% { transform: translate(0, 0) }
}
@keyframes scale {
0% { transform: scale(2) }
100% { transform: scale(1) }
}
</style>
</head>
<body>
<p>
<a href='#animation-1'>
点击后触发动画1
</a>
</p>
<p>
<a href='#animation-2'>
点击后触发动画2
</a>
</p>
<p>
<a href='#animation-3'>
点击后触发动画3
</a>
</p>
<div class="box" id="animation-1"></div>
<div class="box" id="animation-2"></div>
<div class="box" id="animation-3"></div>
</body>
</html>
不知道你是否知道target选择器的具体意义，简单的来说如下：
// div:target 的意思是锚点在目标上的时候// 看我最上面的例子，有三个链接，只有点击过以后才会触发动画。然后看看地址的变化
// 如果你想要同时全部显示，就把:target删除
