css代码前的#是什么意思？比如#header* #mod_bgmusic

html-css017

css代码前的#是什么意思？比如#header* #mod_bgmusic,第1张

CSS样式的调用方法有两种：一种就是直接用class="样式名"，这种调用方式在写CSS样式是以点的方式开头的.fontsiz。。另外一种就是利用ID，<div id="header">...</div>，这种调用方式在写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>

<!--特效代码区结束-->