要在JS中修改样式，可以这样：
var dom = document.getElementById('abc')dom.style.padding = '8px' //必须提供字符串，数字+单位，不能直接写数字
dom.style.margin = '0 auto'
dom.style.backgroundColor = '#0F0' //CSS属性中的background-color之类有连字符的，去掉连字符，采用驼峰式，首字母小写，后面所有单词首字母大写
//浏览器特有属性：
dom.style.webkitAppearance = 'button' //对应-webkit-appearance属性
a 的样式一般会有一个全局的来控制。我一般在reset样式里写：
a{color:#555text-decoration:noneoutline:none}
a:hover{text-decoration:underline}
然后后面需要a的时候在单独写他的样式
需要注意的是后面千万不要在写 a{。。。}这样的样式，因为这样写会影响整个网站，要想局部的效果那就 .xx a{...}这样的写法。
比如你的效果图代码：
<style>.nav{overflow:hiddenbackground-color:#eeeborder-bottom:1px solid #ddd}
.nav li{float:leftline-height:35px}
.nav li a{padding:0 10pxdisplay:blockfloat:left}
.nav li a:hover{background:#dddcolor:#0f0}
</style>
<ul class="nav">
<li><a href="#">设为首页</a></li>
<li><a href="#">设为首页</a></li>
<li><a href="#">设为首页</a></li>
<li><a href="#">设为首页</a></li>
</ul>
onmouseover="classname='active hover'当鼠标经过这里时吧,把这个td标签的class属性改为class=“active hover”
当鼠标滑出这里是把CLASS属性又改回来。
