用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. JavaBean的用法

    JavaBean是一个可重复使用的软件组件,是用Java语言编写的.遵循一定标准的类. JavaBean是Java Web的重要组件,它封装了数据和操作的功能类,供JSP和Servlet调用,完成数据 ...

  2. Python 2/3 安装与运行环境设置

    Python 2/3 安装与运行环境设置: 1.Python 软件源:https://www.python.org/    下载Win版本 https://www.python.org/downloa ...

  3. KRPano资源分析工具使用说明(KRPano XML/JS解密 切片图批量下载 球面图还原 加密混淆JS还原美化)

    软件交流群:571171251(软件免费版本在群内提供) krpano技术交流群:551278936(软件免费版本在群内提供) 最新博客地址:blog.turenlong.com 限时下载地址:htt ...

  4. Unity3D 解决用Unity导出的Android工程在6.0及以上设备会弹出一串权限对话框的问题

    解决用Unity导出的Android工程在6.0及以上设备会弹出一串权限对话框的问题 <meta-data android:name="unityplayer.SkipPermissi ...

  5. Windows Server 2012 R2桌面化详细设置图解

    一.任务栏左下角启动服务器管理器,然后进行设置. 1.登录不显示服务器管理器 2.本地服务器,看到右边的IE增强的安全配置,如图所示,关闭两项内容.这样就关闭了IE增强安全提示框. 3.“工具”菜单, ...

  6. rem、px、em之间的区别以及网页响应式设计写法

    个人收藏用,转载自:http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激 ...

  7. HTML入门教程 这里可以免费学习啦

    本文目标 30分钟内让你明白HTML是什么,并对它有一些基本的了解.一旦入门后,你可以从网上找到更多更详细的资料来继续学习. 什么是HTML HTML是英文Hyper Text Mark-up Lan ...

  8. resharper 改为VS自带的F12功能(转到定义)

    1:如何设置vs默认的快捷键方式: 2:重新设置resharper的F12及其其它选项设置:   3.如果还需要使用快捷键 Alt+ENTER  1.帮你实现某个接口或抽象基类的方法 2.提供你处理当 ...

  9. 手机开发中的AP与BP的概念

    转自:http://blog.csdn.net/macong01/article/details/15504611 手机的AP和BP: AP:ApplicationProcessor,即应用芯片 BP ...

  10. 多Linux系统如何复用/home目录

    Brief: 1./home单独分区:2.不同系统/home建立不同的用户名:3.不同系统/home对其他用户授权 Linux下/home文件夹可以通用吗?例如我机器上同时装了两个Linux系统,可以 ...