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

WBOY
发布: 2016-06-24 11:55:24
原创
1030 人浏览过

     这种样式怎么制作出来?自己是新手,请帮助,谢谢!


回复讨论(解决方案)

背景图片。。

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

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

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>
登录后复制

<!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>
登录后复制

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板