发表于： 2019-11-17 20:38:08
1 904
今天完成的事情：尝试写了一下流程图
明天计划的事情： 继续后续的任务
遇到的问题：图画处理老是不对劲，调整花费较长时间
收获：先上画的相关图
暂时先画了个测试的试下，具体代码部分
<div class="web-width">
<div class="for-liucheng">
<div class="liulist"></div>
<div class="liulists" style="float:left;overflow:hidden">
<table>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
</div>
<div class="liulist"></div>
<div class="liulist"></div>
<div class="liutextbox">
<div id="A" class="liutext" onclick="openH(this);"><em>1</em><br /><strong>填写账户名</strong></div>
<div id="B" class="liutexts" >
<div id="B1" class="liutext_2" onclick="openH(this);"><em>1</em><br /><strong>第一步</strong></div>
<div id="B2" class="liutext_2" onclick="openH(this);"><em>2</em><br /><strong>第二步</strong></div>
<div id="B3" class="liutext_2" onclick="openH(this);"><em>2</em><br /><strong>第二步</strong></div>
<div id="B4" class="liutext_2" onclick="openH(this);"><em>2</em><br /><strong>第二步</strong></div>
</div>
<div id="C" class="liutext" onclick="openH(this);"><em>3</em><br /><strong>设置新密码</strong></div>
<div id="D" class="liutext" onclick="openH(this);"><em>4</em><br /><strong>完成</strong></div>
</div>
</div><!--for-liucheng/-->
</div><!--web-width/-->
css部分
@charset "UTF-8";
/**单列宽度 单行高度 列数 行数*/
body {
font-size: 12px;
color: #000000;
font-family: "Microsoft Yahei";
overflow-x: hidden;
background: #ffffff; }
/**单列宽度 单行高度 列数 行数*/
.web-width {
width: 1200px;
margin: 20px auto; }
.for-liucheng {
width: 1200px;
margin: 0 0 0 0;
height: 160px;
padding: 0 0 0 0;
position: relative; }
.liulist {
float: left;
width: 300px;
height: 10px;
background: #CCCCCC;
margin-top: 60px; }
.liulists {
float: left;
width: 300px;
height: 100%; }
.liutextbox {
position: absolute;
width: 100%;
height: 160px; }
.liutext {
float: left;
width: 300px;
text-align: center;
margin-top: 53px; }
.liutexts {
float: left;
width: 300px;
height: 100%;
text-align: center;
margin-top: -7px; }
.liutext_2 {
display: inline-block;
float: left;
width: 100%;
height: 42px;
text-align: center;
padding-bottom: 0px; }
em {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 24px;
background: #BDBDBD;
text-align: center;
font-size: 14px;
line-height: 24px;
font-style: normal;
font-weight: bold;
color: #fff; }
strong {
display: inline-block;
height: 16px;
line-height: 16px;
font-weight: 400; }
.for-cur em {
background: #77b852;
border: 3px solid #ffffff;
margin-top: -3px; }
.for-ed em {
border: 3px solid #F0F0F0;
margin-top: -3px; }
.for-cur strong {
color: #77b852; }
.liutext:hover {
cursor: pointer; }
.liutextbox strong:hover {
text-decoration: underline; }
.liulists table, table tr th, table tr td {
border: 10px solid #CCCCCC; }
.liulists td {
height: 30px; }
.liulists table {
width: 100%;
text-align: center;
border-collapse: collapse; }
设计图很好但画出来感觉很丑，明天再继续调整接着做后续任务
返回列表
评论