位置条的CSS

最新推荐文章于 2023-10-12 10:16:12 发布

淡如轻风

最新推荐文章于 2023-10-12 10:16:12 发布

阅读量520

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/wenlyli/article/details/10000951

css 专栏收录该内容

61 篇文章

订阅专栏

진행상태

상세스펙 협의
담당자 배정
일정 협의
실무 협의
완료

CSS Code

 
/* UI Object */
 
.progress{overflow:hidden;height:25px;margin:10px 0 0;background:url(http://static.naver.com/groupware/2010/bg_progress.gif);border-right:1px solid #e3e3e3;font-family:'돋움',dotum;font-size:11px;line-height:15px;letter-spacing:-1px}
 
.progress .tit{float:left;position:relative;z-index:1000;width:74px;height:20px;margin:0;padding:5px 00;background:url(http://static.naver.com/groupware/2010/bg_progress_tit.gif) no-repeat;font-size:11px;color:#fff;line-height:15px;text-align:center}
 
.progress ol{float:left;margin:0;padding:0}
 
.progress li,.progress li span{background:url(http://static.naver.com/groupware/2010/bg_progress_item.gif) no-repeat;font-size:11px;white-space:nowrap}
 
.progress li{float:left;margin:0 0 0 -13px;padding:0 0 0 13px;background-position:-287px 0}
 
.progress li span{display:inline-block;height:20px;padding:5px 28px 0 13px;background-position:100% top}
 
.progress li.on{position:relative;z-index:10;background-position:0 100%;color:#fff}
 
.progress li.on span{background:url(http://static.naver.com/groupware/2010/bg_progress_item.gif) no-repeat 100% 100%}
 
.progress li.last,.progress li.last span{background:none}
 
.progress .right{position:absolute;top:6px;right:10px;color:#444}
 
/* //UI Object */

HTML Code

 
<!-- UI Object -->
 
<div class="progress">
 
    <strong class="tit">진행상태</strong>
 
    <ol>
 
    <li class="on"><span>상세스펙 협의</span></li>
 
    <li><span>담당자 배정</span></li>
 
    <li><span>일정 협의</span></li>
 
    <li><span>실무 협의</span></li>
 
    <li><span>완료</span></li>
 
    </ol>
 
</div>
 
<!-- //UI Object -->