当前位置: 网站建设 > 网页设计 > 建站经验 >

浅谈CSS网页设计经验分享 负margin

时间:2013-03-02 04:06来源:未知 作者:admin 点击:

标签:浅谈CSS网页设计经验分享 负margin 浅谈(48)分享(42)网页设计(881)CSS(655)款式(6)Margin(12)经验(30)如下(8)
款式如下: 浅谈CSS网页设计经验分享:负margin Tag:分享 经验 网页设计 默认状态为灰色,不带圆圈,已实现状况为红色,当前进行中显示为黄色,并且圆圈在两个字旁边,最后一个状态胜利假如为灰色,线条要小于文字,但其它局部要连贯。原型代码如下,为了JS构造当然越简略越好: ul { margin: 36px auto; height: 30px; } ul li { float: left; width: 164px; margin-right: -6px; padding-top: 15px, 浅
浅谈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相关文章
上一篇:浅谈CSS的position属性 下一篇:浅谈Google取消PR对个人站长的影响
回到顶部