css样式设置排行榜效果

html-css024

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>

全国排名前十的CSS培训中心在哪里？

北大青鸟以完善的标准化管理为依托，通过院校合作和授权合作两大经营模式，实现了体系的规模化发展，得到了社会各界广泛的认可；以永不妥协的教育品质，致力于让广大学子成为受人尊重的专业人才，并成为全球专业的职业教育产品提供商和服务商；以匠心和探索精神，为社会培养和输送大量高质量的技术技能型人才，为改善就业领域人才供给的结构性矛盾做出应有贡献。

北大青鸟研发适应互联网时代需求的职业教育产品，目前推出BCSP软件开发专业、BCNT网络运维专业、BCUI全链路UI设计、BCVE视频特效专业等课程。课程研发团队均由学术界权威学者、互联网IT领域技术专家、教育行业研究者共同组成，确保了课程内容的岗位适用性、技术性、先进性。

北大青鸟以“支持每一位学员成为受人尊重的专业人才”为使命，始终践行“职业教育就是就业教育”的教育本质，坚持帮助学员成功就业，永远是硬道理；始终保持回归职业教育的本真，即坚守“教育为本，师爱为魂”的教育理念，以及“内育职业素养，外塑专业技能”的青鸟校训。

北大青鸟始终以岗位需求为本，立足于行业岗位技能，以永不妥协的教育品质，为学员提供优质、全面的教学资源，为企业输送符合岗位要求的亟需人才，让学员学有所成、企业用有所用。

你好，在吗，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，希望可以帮到你