css样式设置排行榜效果

html-css026

css样式设置排行榜效果,第1张

给你做了一个,美化的工作交给你啦,不过我看还可以,兼容性没什么问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

<!--

#zhuti{

width:280px

}

#uu{

margin:0px

padding:0px

}

.h{

width:280px

margin:0px

list-style-type: none

font-size:13px

color:#0066FF

line-height:39px

padding-left:15px

}

.xianshi{

width:280px

height:45px

border:2px #FF9900 solid

background-color:#FFF3E8

padding-top:10px

margin:0px

list-style-type: none

font-size:12px

font-weight:bold

color:#0066FF

padding-left:15px

display:none

}

-->

</style>

<script>

var num=12//确定li数量。

function a() //网页加载的时候设置li背景颜色。

{

var a=document.getElementById("uu").getElementsByTagName("li")

for(var i=0i<numi++)

{

if((i%2)==1) a[i].style.display="none"

if((i%4)==0) a[i].style.backgroundColor="#dddddd" //设置li的背景颜色。

}

}

function over(n)

{

var a=document.getElementById("uu").getElementsByTagName("li")

for(var i=0i<numi++) //一个循环让鼠标经过的li显示对应的装有详细内容的li。

{

if((i%2)==1) a[i].style.display="none"

else

a[i].style.display="block"

}

a[n].style.display="none"

a[n+1].style.display="block"

}

</script>

</head>

<body onload="a()">

<div id="zhuti">

<ul id="uu">

<li class="h" onmouseover="over(0)">知性OL-简约大方通勤必备 </li>

<li class="xianshi">知性OL-简约大方通勤必备知性OL-简约大方通勤必备<br /><font color="#CC0000">淘宝价:xx</font></li>

<li class="h" onmouseover="over(2)">淑女系-可爱小女生最爱 </li>

<li class="xianshi">淑女系-可爱小女生最爱淑女系-可爱小女生最爱<br /><font color="#CC0000">淘宝价:xx</font></li>

<li class="h" onmouseover="over(4)">时尚派-柱形手提斜挎女包 </li>

<li class="xianshi">时尚派-柱形手提斜挎女包时尚派-柱形手提斜挎女包<br /><font color="#CC0000">淘宝价:xx</font></li>

<li class="h" onmouseover="over(6)">蝴蝶结-闪金淡蓝可爱单鞋 </li>

<li class="xianshi">蝴蝶结-闪金淡蓝可爱单鞋蝴蝶结-闪金淡蓝可爱单鞋<br /><font color="#CC0000">淘宝价:xx</font></li>

<li class="h" onmouseover="over(8)">坡跟鞋-韩版甜美坡跟凉鞋 </li>

<li class="xianshi">坡跟鞋-韩版甜美坡跟凉鞋坡跟鞋-韩版甜美坡跟凉鞋<br /><font color="#CC0000">淘宝价:xx</font></li>

<li class="h" onmouseover="over(10)">高跟鞋-复古小名媛圆头鞋 </li>

<li class="xianshi">高跟鞋-复古小名媛圆头鞋高跟鞋-复古小名媛圆头鞋<br /><font color="#CC0000">淘宝价:xx</font></li>

</ul>

</div>

</body>

</html>

你好,在吗,205*240是ul的宽高,前面1,2,3,li的背景是蓝色的,后面的是灰色的就可以了,

<ul>

<li class=“blue”>1</li>

<li class=“blue”>2</li>

<li class=“blue”>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<li>10</li>

</ul>

在css样式里面

ul li{background:url(灰色图片路径)}

ul li.blue{background:url(蓝色图片路径)}

如果还有不知道的,可以加1028392399,希望可以帮到你

为这些标题所在的标签元素加上class="setbackground"属性,

css中:.setbackground{background:red} 这样就可以了。

如果本身已经有class属性,你可以去你的css文件中找到该属性名,然后修改即可!