求解怎样制作出这种样式_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:55:241044浏览
这种样式怎么制作出来？自己是新手，请帮助，谢谢！
回复讨论(解决方案)
背景图片。。
恩， 用两张图片显示， 当鼠标移进去的时候换成绿色背景的，移出来时换回来~
我可能没描述清楚，完整的图是这样的 ，点击“用户注册”就会跳到激活账号这一步，然后背景换成绿色,这样怎么实现？
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;/*换成灰色背景图片×/} #cur{background-color: blue;border: 2px solid yellow;} /×换成绿色背景图片*/html:<ul> <li > step 4 </li> <li > step 3 </li> <li id="cur"> step 2 </li> <li> step 1 </li></ul>
<!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> 声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn