求解怎样制作出这种样式_html/css_WEB-ITnose-html tutorial-php.cn

求解怎样制作出这种样式_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 11:55:24

asal

1036 orang telah melayarinya

这种样式怎么制作出来？自己是新手，请帮助，谢谢！

回复讨论(解决方案)

背景图片。。

恩，用两张图片显示，当鼠标移进去的时候换成绿色背景的，移出来时换回来~

我可能没描述清楚，完整的图是这样的，点击“用户注册”就会跳到激活账号这一步，然后背景换成绿色,这样怎么实现？

js 改变class
http://www.w3school.com.cn/jquery/attributes_addclass.asp
http://www.w3school.com.cn/jquery/attributes_removeclass.asp

那这个样式是不是用四张图片构成的？

css:ul{width:500px;float:left;margin-top:20px;}ul li{    margin-left:-10px;    display:inline-block;    height:26px;    line-height: 24px;    width:120px;    text-align:center;    float:right;    background-color: grey;border: 1px solid white;/*换成灰色背景图片&times;/}     #cur{background-color: blue;border: 2px solid yellow;} /&times;换成绿色背景图片*/html:<ul>    <li >        step 4    </li>    <li >        step 3    </li>    <li id="cur">        step 2    </li>    <li>        step 1    </li></ul>

Salin selepas log masuk

<!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/html; charset="utf-8″ /><title>纯css制作面包屑，兼容IE6</title><style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}/* demo */.demo{width:600px;margin:100px auto;background:#f0f0f0;position:relative;}.demo ul{height:32px;overflow:hidden;}.demo li{float:left;width:200px;text-align:center;position:relative;z-index:2;font-weight:bold;font-size:14px;line-height:32px;}.demo li em{position:absolute;right:-24px;top:-8px;width:0;height:0;line-height:0;border-width:24px 0 24px 24px;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;}.demo li i{position:absolute;right:-16px;top:0;width:0;height:0;line-height:0;border-width:16px 0 16px 16px;border-color:transparent transparent transparent #f0f0f0;border-style:dashed dashed dashed solid;}.demo li.current{background:#f60;color:#fff;z-index:1;}.demo li.current i{border-color:transparent transparent transparent #f60;}</style></head><body> <div class="demo"><ul class="clearfix"><li>面包屑一<em></em><i></i></li><li class="current">面包屑二<em></em><i></i></li><li>面包屑二<em></em><i></i></li></ul></div> </body></html>

Salin selepas log masuk