zoukankan      html  css  js  c++  java
  • 又一个新的css流程图示例

    1
    验证方式
    2
    验证账号
    3
    重置密码
    4
    完成


    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>css流程图</title>
    		<style>
    			.flow { 100%;margin: 30px auto;height: 50px;padding: 20px 0 0 0;position: relative;}
    			.flowList {float: left;height: 1px;border:2px solid #f2faff;background: #f2faff;}
    			.flowListBox { 536px;margin: 0 auto;}
    			.flowListBox .flowList {float: left;text-align: right;position: relative;  128px;}
    			.flowListBox .flowList em {margin-top: -20px;display: inline-block; 32px;height: 32px;-moz-border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%;text-align: center; line-height: 32px;font-style: normal;vertical-align: middle;color: #666;border:3px solid #f2faff;background: white;
    			}
    			.flowListBox .flowList strong {display: inline-block;height: 40px;line-height: 40px;font-weight: 400;position:absolute;left:28%}
    			.flowListBox .flowList strong.last {left:40%}
    			.flowListBox .for-cur strong {color:  #8dafe4;}
    			.flowListBox .for-cur{border: 2px solid #8dafe4; background-color: #8dafe4;}
    			.flowListBox em{position: absolute; left: 35%;}
    			.flowListBox .for-cur em{ 32px;height: 32px;font-size: 12px;line-height: 32px;border:3px solid #8dafe4;color:  #8dafe4;}
    		</style>
    	</head>
    	<body>
    		<div class="flow">
    			<div class="flowListBox">
    				<div class="flowList for-cur">
    					<em>1</em><br>
    					<strong>验证方式</strong>
    				</div>
    				<div class="flowList for-cur">
    					<em>2</em><br>
    					<strong>验证账号</strong>
    				</div>
    				<div class="flowList">
    					<em>3</em><br>
    					<strong>重置密码</strong>
    				</div>
    				<div class="flowList">
    					<em>4</em><br>
    					<strong class="last">完成</strong>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    

      



  • 相关阅读:
    1091. Shortest Path in Binary Matrix (M)
    1342. Number of Steps to Reduce a Number to Zero (E)
    0242. Valid Anagram (E)
    京准为您提供选卫星时钟(NTP时钟服务器)技巧
    时统设备(NTP授时服务器)产品概述与介绍
    NTP母钟(NTP网络子钟)为医院提高办公效率
    基于NTP/SNTP的网络授时服务系统方案
    NTP子钟(GPS母钟)功能与调试安装配置
    GPS时间统一系统(时统设备)介绍与应用
    GPS子母钟系统(电子时钟系统)让医院信息化更有意义
  • 原文地址:https://www.cnblogs.com/sonicwater/p/8340704.html
Copyright © 2011-2022 走看看