Find out how to create this style_html/css_WEB-ITnose-HTML Tutorial-php.cn

Find out how to create this style_html/css_WEB-ITnose

WBOY

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

Original

1034 people have browsed it

How to make this style? I am a newbie, please help, thank you!

Reply to discussion (solution)

Background image. .

Well, display it with two pictures. When the mouse is moved in, it changes to a green background, and when it is moved out, it changes back~

I may not have described it clearly, but the complete picture is like this , clicking "User Registration" will jump to the step of activating the account, and then the background will change to green. How to achieve this?

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

Is this style composed of four pictures?

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>

Copy after login

<!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>

Copy after login