http://hi.baidu.com/nmbh0306
完全可以,我们在自己的项目目录下新建my-wenhui.css文件,加入原生css代码:
.btn
{
-webkit-border-radius:
20px
-moz-border-radius:
20px
border-radius:
20px}
将my-wenhui.css文件引用放到
bootstrap
.css文件后面,我们定义的btn样式就会覆盖原有的样式(注:这里的‘覆盖’指的是增量叠加式的覆盖)。
<link
rel="stylesheet"
href="boostrap.css">
<link
rel="stylesheet"
href="my-wenhui.css">
不改#slidingBlock {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>
<!--特效代码区结束-->