<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>transition</title>
<style>
.con{
width:100px
height:100px
background-color: yellow
border:1px solid black
transition:width 2s
-moz-transition:width 2s /* Firefox 4 */
-webkit-transition:width 2s /* Safari and Chrome */
-o-transition:width 2s /* Opera */
}
.con1{
width:100px
height:100px
background-color: yellow
border:1px solid black
font-size:12px
transition:width 2s,background 2s,height 2s,font 10s,color 2s
-moz-transition:width 2s,background 2s,height 2s,font 10s,color 2s /* Firefox 4 */
-webkit-transition:width 2s,background 2s,height 2s,font 10s,color 2s /* Safari and Chrome */
-o-transition:width 2s,background 2s,height 2s,font 10s,color 2s /* Opera */
}
.con:hover{
width:200px
}
.con1:hover{
width:200px
height:200px
font-size:18px
color:yellow
background-color: red
}
</style>
</head>
<body>
<p>这个是单纯的横向拉伸</p>
<div class="con">
</div>
<p>长宽拉伸颜色渐变</p>
<div class="con1">
<p>鼠标移上来看效果！！！</p>
</div>
</body>
</html>
用css3做的，你测试一下看看是不是你要的，然后自己修改一下，要看其他更丰富的特效去w3c上面看看学习。可能有很多低版本的浏览器不支持。。。慎用！
nav居中，给对应的层加上margin:0 auto
1行n列居中对齐可以通过把li设置成行内块模式：display: inline-block
<style>
.nav {
margin:0 auto
width:100%
border:1px solid #ccc
text-align:center
}
ul li{
list-style:none
margin-left:20px
display: inline-block
}
</style>
<div class="nav">
<ul>
<li>这部分左对齐1</li>
<li>这部分左对齐2</li>
<li>这部分左对齐3</li>
<li>这部分左对齐4</li>
</ul>
</div>
可以啊，用css3或者jq实现。
可以使用css3的奇偶选择器，如：
tr:nth-child(odd){background-color:#FFE4C4}tr:nth-child(even){background-color:#F0F0F0}
li:nth-child(odd)是设置奇数行的背景色，li:nth-child(even)是设置偶数行的。但是css3不兼容IE9以下的浏览器，如果需要考虑到兼容问题的话，可以使用jq设置，如：
$("table tr:nth-child(even)").css("background-color","#FFE4C4") //设置偶数行的背景色$("table tr:nth-child(odd)").css("background-color","#F0F0F0") //设置奇数行的背景色
