width:296px}
改栏目1，2，3的宽度(宽度自己调试)，代码如下
<!--特效代码区开始-->
<style type="text/css">
body {
font-size:12px
}
/* 当前模块的总宽度为250px，不合适的自己调整吧，另外改变相关图片的路径的话注意修改css样式代码的图片路径 */
#slidingBlock {
width:296pxborder:1px #95CF92 solidpadding:1pxover-flow:hidden
}
#slidingBlock h4 {
float:leftwidth:82pxheight:30pxline-height:25pxtext-align:centerfont-size:12pxover-flow:hidden
}
#slidingBlock h4.menuNo {
font-weight:normalcolor:#333333background:url(Skin/HLan/HuaDongA/slidingMenuQBlue2.gif) repeat-x
}
#slidingBlock h4.menuOn {
font-weight:boldcolor:#1F376Dbackground:url(Skin/HLan/HuaDongA/slidingMenuQBlue.gif) no-repeat
}
#slidingBlock DIV.slidingList_none {
display:none
}
#slidingBlock DIV.slidingList {
margin:0pxpadding:5pxheight:10px
}
#slidingBlock DIV.slidingList ul {
margin:0pxpadding:0px
}
#slidingBlock DIV.slidingList li span {
font-size:12pxfont-weight:normalcolor:#ffffffpadding-left:4pxpadding-right:8pxcolor:red
}
#slidingBlock DIV.slidingList li.one {
background:url(Skin/HLan/HuaDongA/slidingTag1.gif) no-repeat
}
#slidingBlock DIV.slidingList li.two {
background:url(Skin/HLan/HuaDongA/slidingTag2.gif) no-repeat
}
#slidingBlock DIV.slidingList li.thr {
background:url(Skin/HLan/HuaDongA/slidingTag3.gif) no-repeat
}
</style>
<div id="slidingBlock">
<script language="javascript">
function switchmodTag(modtag,modcontent,modk) {
for(i=1i <4i++) {
if (i==modk) {
document.getElementById(modtag+i).className="menuOn"document.getElementById(modcontent+i).className="slidingList"}
else {
document.getElementById(modtag+i).className="menuNo"document.getElementById(modcontent+i).className="slidingList_none"}
}
}
</script>
<h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1')this.blur()">
最近更新</h4>
<h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2')this.blur()">
近期推荐</h4>
<h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3')this.blur()">
热门点击</h4>
<div class="slidingList" id="slidingList1" style="border:1px solid redwidth:100px">
<ul>
<li class="one"><span>1</span><a href="http://www.cinzy.com">栏目1</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList2" style="margin-left:90pxwidth:100px">
<ul>
<li class="two"><span>1</span><a href="http://www.cinzy.com">栏目2</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList3" style="margin-left:180pxwidth:100px">
<ul>
<li class="thr"><span>1</span><a href="http://www.cinzy.com">栏目3</a></li>
</ul>
</div>
</div>
<!--特效代码区结束-->
就是隐藏display:none
当前显示的设置为display:block
一般使用脚本实现
比如你要隐藏的元素为<div id="info1"></div>
要显示的元素为<div id="info2"></div>
假设使用jquery控制
代码为以下两句：
$("#info1").hide()
$("#info2").show()
特殊字体一般不是说不能添加，而是考虑到用户电脑上预装的字体有限，所以局限在宋体和微软雅黑两种字体，css属性中有个font属性，例如{font-family:"迷你简菱心"},在装过这个字体的的电脑会有效果，但是再没有装过的电脑可能就是其它字体了，一般会解析为宋体，问题解决一般由两种解决方案。第一：css3下载字体，代码如下
@font-face
{
font-family:
'自己命名字体名字'
src:
url('字体路径')
src:
url('FileName.eot?#iefix')
format('embedded-opentype'),
/*其它格式*/
url('FileName.woff')
format('woff'),
url('FileName.ttf')
format('truetype'),
url('FileName.svg#FontName')
format('svg')
font-style:
normal
font-weight:
normal
/*设置默认样式*/
}
.aa{font-family:"自己命名字体名字"}
不兼容ie8及以下浏览器
第二：切png图片
