《
浅谈CSS网页设计经验分享 负margin》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023435R013.htm
款式如下：
浅谈CSS网页设计经验分享:负margin
Tag：分享 经验 网页设计
默认状态为灰色，不带圆圈，已实现状况为红色，当前进行中显示为黄色，并且圆圈在两个字旁边，最后一个状态“胜利”假如为灰色，线条要小于文字，但其它局部要连贯。原型代码如下，为了JS构造当然越简略越好：
ul { margin: 36px auto; height: 30px; }
ul li { float: left; width: 164px; margin-right: -6px; padding-top: 15px,
浅谈CSS的position属性; text-align: right; background: url(“xxxx.gif&rdquo,
浅谈CSS样式表错误排查方法;) no-repeat right XXpx; color: #666; }
ul li,
浅谈CSS样式优化心得技巧.status_finished { background-position: right XXpx; }
ul li.status_current { background-position: right XXpx; font-weight: bold; color: #000; }
让人纠结的时候到了：圆圈左右线的色彩不同，如果切在一起那最后一个状态就要独自利用不右侧过剩线条的图片，即是要切两套图，计划要废弃；如果每个状态只切到圆圈部门，给右侧留点空缺出来它就会显示在两个字中间了，但紧接着的状态怎么连续到左侧？有一个方式：负margin~~~
放大后的后果图：
<ul>
< li class=“status_finished”>抉择<,
浅谈CSS3中使用多背景;/li>
< li class=“status_current”>预订</li>,
浅谈4项基本的WEB设计错误;
< li>支付</li>
< li>成功</li>
< /ul>
留神：合并图片的时候圆圈右侧要留出6px（详细值依据实际情形断定）透明缝隙，左侧线条为自适应斟酌尽可能长一点。
--> [
网站建设之]浅谈CSS网页设计教训分享:负margin
(责任编辑：网站建设)
浅谈CSS网页设计经验分享 负margin相关文章