css样式设置排行榜效果

html-css033

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,希望可以帮到你