用css写一个简单的步骤进度条

html代码:

<h4>南京游玩</h4>
<ul class="step-list">
<li>
<span class="step">第一天</span>
<div class="content">中山陵</div>
</li>
<li>
<span class="step">第二天</span>
<div class="content">夫子庙</div>
</li>
<li>
<span class="step">第三天</span>
<div class="content">总统府</div>
</li>
<li>
<span class="step">第四天</span>
<div class="content">牛首山</div>
</li>
<li class="latest">
<span class="step">第五天</span>
<div class="content">图书馆(哈哈)</div>
</li>
</ul>

css代码:

<style>
.step-list{
margin:;
padding:;
margin-left:12px;
margin-top:-9px;
padding-left:10px;
list-style:none;
font-size:12px
}
.step-list li{
height:60px;
border-left:1px solid #d9d9d9
}
.step-list li:before{
content:'';
border:5px solid #f3f3f3;
background-color:green;
display:inline-block;
width:10px;
height:10px;
border-radius:50%;
margin-left:-10px;
margin-right:10px
}
.step-list .step{
font-weight:;
margin-right:8px;
font-family:Arial
}
.step-list .content{
display:inline-block;
width:653px;
vertical-align:text-top;
line-height:1.3em
} .step-list .latest{
border:none;
}
.step-list .latest:before{
background-color:#fe4300;
border-color:#f8e9e4
}
</style>

步骤进度条 css的更多相关文章

  1. iOS 自定义步骤进度条

    新项目要做入驻功能,其中包括一个入住流程,类似登录或者注册流程如下图. 之前想着用自己绘图来做,可是又懒不想多写代码,所以就想着能不能用进度条来做. 1.用进度条做的首先要解决的是进度条的高度问题,可 ...

  2. CSS 步骤进度条

    ;;; } .wizard li {;; text-align: center; line-height: 30px; height: 30px; background-color: #C3C3C3; ...

  3. WPF自定义控件第一 - 进度条控件

    本文主要针对WPF新手,高手可以直接忽略,更希望高手们能给出一些更好的实现思路. 前期一个小任务需要实现一个类似含步骤进度条的控件.虽然对于XAML的了解还不是足够深入,还是摸索着做了一个.这篇文章介 ...

  4. CSS3动画进度条

    CSS3动画进度条   CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...

  5. jquery 实现拖动文件上传加进度条

    通过对文件的拖动实现文件的上传,主要用到的是HTML5的ondrop事件,上传内容通道FormData传输: //进度条 <div class="parent-dlg" &g ...

  6. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  7. CSS实现进度条和订单进度条

    最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...

  8. div+css进度条

    效果图: 进度条代码: <style type="text/css"> 红色:background-color:f05153:border:1px solid #f05 ...

  9. 纯CSS实现圆形进度条

    CSS的优点在于的可以随意组合HTML元素来实现许多中效果,这儿我将使用CSS来实现一个运行进度条,效果如下: 思路是用两个div来作为进度条外观,表示进度的div和外面div宽度和高度保持一致,并是 ...

随机推荐

  1. DCIntrospect -iOS界面调试

    原文:http://www.cnblogs.com/kw-ios/p/3523525.html 有时,设计稿上的UI很漂亮,布局也整齐,但自己用代码写出来的就不行,不是这里高一点,就是那是低一点,使用 ...

  2. C# Interface的使用方法探讨

    接口是把公共实例(非静态)的方法和属性结合起来,以封装特定功能的一个集合,一旦定义了接口,就可以在类中使用实现接口中的所有成员,接口可以看作创建者和使用者之间的契约,一旦实现了接口,就不要轻易变动(如 ...

  3. SQL中循环和条件语句

    .if语句使用示例: declare @a int begin print @a end else begin print 'no' end .while语句使用示例: declare @i int ...

  4. CentOS7 安装中文帮助手册

    1.首先确定系统安装中文字体否 locale 2.rpm安装中文帮助手册 挂在光盘 将man-pages-zh-CN-1.5.2-4.el7.noarch.rpm拷贝到本机 rpm -ivh man- ...

  5. java垃圾回收机制

    1 .垃圾回收机制(GC)垃圾回收就是回收内存中不再使用对象:(1)垃圾回收的步骤:1)查找内存中不再使用的对象:2)释放这些对象所占用的内存:(2)查找内存中不再使用的对象方法:1)引用计数法如果一 ...

  6. 牛顿方法(Newton's Method)

    在讲义<线性回归.梯度下降>和<逻辑回归>中我们提到可以用梯度下降或梯度上升的方式求解θ.在本文中将讲解另一种求解θ的方法:牛顿方法(Newton's method). 牛顿方 ...

  7. Python 创建本地服务器环境生成二维码

    一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...

  8. 解决Linux不能上网ping:unknown host的问题

    修改配置文件:/etc/sysconfig/network-scripts/ifcfg-eth0 vim /etc/sysconfig/network-scripts/ifcfg-eth0 在里面添加 ...

  9. Java源码之 java.util.concurrent 学习笔记01

    准备花点时间看看 java.util.concurrent这个包的源代码,来提高自己对Java的认识,努力~~~ 参阅了@梧留柒的博客!边看源码,边通过前辈的博客学习! 包下的代码结构分类: 1.ja ...

  10. MongoDB做为一项windows服务启动

    MongoDB做为一项windows服务启动 Windows版本安装 MongoDB的官方下载站是http://www.mongodb.org/downloads,可以去上面下载最新的对应版本,有32 ...