|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
凡是和我讨论客户段效率的全是脑子有问题的,影响的全是图片和Flash,所以我一直建议一个提交按钮就不要用图片带代替了。
破洛洛文章简介:负margin是好器材.
上个月完成的项目,举个让我纠结N小时的模块,先上图:
默许形态为灰色,不带圆圈,已完成形态为白色,以后举行中显现为黄色,而且圆圈在两个字两头,最初一个形态“乐成”假如为灰色,线条要小于笔墨,但别的部分要联贯。原型代码以下,为了JS布局固然越复杂越好:
<ul>
<liclass=“status_finished”>选择</li>
<liclass=“status_current”>预订</li>
<li>付出</li>
<li>乐成</li>
</ul>让人纠结的时分到了:圆圈摆布线的色彩分歧,假如切在一同那最初一个形态就要独自使用没有右边过剩线条的图片,即是要切两套图,计划要保持;假如每一个形态只切到圆圈部分,给右边留点空缺出来它就会显现在两个字两头了,但紧接着的形态怎样持续到左边?有一个办法:负margin~~~
缩小后的最终效果:
款式以下:
ul{margin:36pxauto;height:30px;}
ulli{float:left;width:164px;margin-right:-6px;padding-top:15px;text-align:right;background:url(“xxxx.gif”)no-repeatrightXXpx;color:#666;}
ulli.status_finished{background-position:rightXXpx;}
ulli.status_current{background-position:rightXXpx;font-weight:bold;color:#000;}注重:兼并图片的时分圆圈右边要留出6px(详细值依据实践情形断定)通明清闲,左边线条为自顺应思索尽量长一点。
</p>
结构清晰,容易被搜索引擎搜索到,天生优化了seo |
|