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

Inhaltsverzeichnis

回复讨论(解决方案)

Heim

Web-Frontend

HTML-Tutorial

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

Jun 24, 2016 am 11:55 AM

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

回复讨论(解决方案)

背景图片。。

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

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

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn