发表于： 2019-12-18 22:29:53
1 1289
今天完成的事情：写了任务十的主题部分
明天计划的事情：继续任务
遇到的问题：css模拟点击事件花费较长时间
收获：先上箭头完成的部分图
其中模拟点击的部分
因为div等不能直接适用超链接的点击事件，需要做一个转化
<div class="tablepart2wrap" tabindex="1">
这样就可以用
:focus
来触发事件了
具体代码
<body>
<div class="header">
<div class="Customerservice">
客服热线：010-594-78634
</div>
<div class="Loginregistration">
<div class="Login">
登录
</div>
<div class="registration">
注册
</div>
</div>
</div>
<ul class="nav nav-pills nav-justified">
<li><a href="#">首页</a></li>
<li><a href="#">在线定制</a></li>
<li><a href="#">标准箱</a></li>
<li><a href="#">品质保障</a></li>
</ul>
<div class="Flowchart">
<div class="Flowchartpart1">
<div class="tophalf">
<div class="bothsides">
</div>
<div class="between">
4
</div>
<div class="bothsides">
</div>
</div>
<div class="bottomhalf">
4,确认下单
</div>
</div>
<div class="Flowchartpart1">
<div class="tophalf">
<div class="bothsides">
</div>
<div class="between">
3
</div>
<div class="bothsides">
</div>
</div>
<div class="bottomhalf">
3,上传附件
</div>
</div>
<div class="Flowchartpart1">
<div class="tophalf">
<div class="bothsides">
</div>
<div class="between">
2
</div>
<div class="bothsides">
</div>
</div>
<div class="bottomhalf">
2,选择数量
</div>
</div>
<div class="Flowchartpart1">
<div class="tophalf">
<div class="bothsides">
</div>
<div class="between">
1
</div>
<div class="bothsides">
</div>
</div>
<div class="bottomhalf">
1,定制纸箱
</div>
</div>
</div>
<div class="main">
<div class="table-caption">
请您按照以下步骤来定制您的纸箱
</div>
<div class="tablepart1">
<img src="./9/1.jpg" alt="">
选择箱型
</div>
<div class="tablepart2">
<div class="tablepart2left">
<div class="tablepart2wrap" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 对口箱
</div>
<div class="tablepart2wrap" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 飞机盒
</div>
<div class="tablepart2wrap" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 天地盖
</div>
</div>
<div class="tablepart2right">
<select class="selection">
<option value="html">查看详情</option>
<option value="css">对口箱</option>
<option value="JavaScript">飞机盒</option>
<option value="php">天地盖</option>
</select>
</div>
</div>
<div class="tablepart1">
<img src="./9/2.jpg" alt="">
确定尺寸
</div>
<div class="tablepart2 Derivation1">
<div class="tablepart2leftfather">
<div class="tablepart2left" style="margin-bottom: 20px;">
<div class="tablepart2wrap" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 对口箱
</div>
<div class="long">
长<input type="text">mm
</div>
<div class="long">
宽<input type="text">mm
</div>
<div class="long">
高<input type="text">mm
</div>
</div>
<div class="tablepart2left">
<div class="tablepart2wrap" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 对口箱
</div>
<div class="long">
长<input type="text">mm
</div>
<div class="long">
宽<input type="text">mm
</div>
<div class="long">
高<input type="text">mm
</div>
</div>
</div>
<div class="tablepart2right">
<select class="selection">
<option value="html">查看详情</option>
<option value="css">对口箱</option>
<option value="JavaScript">飞机盒</option>
<option value="php">天地盖</option>
</select>
</div>
</div>
css部分
.header{
display: flex;
justify-content: space-between;
background: #1d7ad9;
line-height: 40px;
color: white;
padding: 0 18vw;
}
.Loginregistration{
display: flex;
color: white;
border: white 1px solid;
}
.Login{
border-right: solid white 1px;
}
.Login, .registration{
padding: 0 10px;
line-height: 40px;
text-align: center;
}
.Login:hover,.registration:hover{
width: 80px;
color: black;
background: white;
}
.nav{
padding: 0 18vw 0 40vw;
margin: 30px 0 30px;
}
.nav li a{
margin-left: 30px;
box-shadow: 0px 0px 5px #888888;
width: 100px;
color: black;
}
.nav li a:hover{
background: #1d7ad9;
color: white;
}
.bothsides{
height: 5px;
background: #cccccc;
width: 62px;
}
.between{
height: 24px;
width: 24px;
border-radius: 50%;
background: #cccccc;
line-height: 24px;
text-align: center;
color: white;
}
.Flowchartpart1:hover .between,.Flowchartpart1:hover .bothsides{
background: #ff7f02;
}
.Flowchartpart1:hover .bottomhalf{
color: #ff7f02;
}
.tophalf{
display: flex;
align-items: center;
}
.Flowchart{
display: flex;
flex-direction: row-reverse;
padding-right: 18vw;
}
.bottomhalf{
text-align: center;
color: #ccc;
margin-top: 25px;
}
.main{
padding: 0 18vw;
}
.table-caption{
line-height: 20px;
font-size: 20px;
margin: 16px 0;
border-left: 3px solid #1d7ad9;
padding-left: 5px;
}
.tablepart1{
height: 45px;
background-color: #f4f4f4;
display: flex;
align-items: center;
color: #1d7ad9;
}
.tablepart1 img{
padding: 0 10px;
}
.Matryoshka1{
height: 4px;
width: 4px;
border-radius: 50%;
background: white;
margin: 0 auto;
}
.Matryoshka{
padding-top: 6px;
height: 18px;
width: 18px;
border-radius: 50%;
border: solid #ccc 1px;
margin-right: 10px;
}
.tablepart2wrap{
display: flex;
margin-right: 60px;
outline: none
}
.tablepart2wrap:focus .Matryoshka{
background: #1d7ad9;
}
.tablepart2wrap-2:focus .Matryoshka{
background: #1d7ad9;
}
明天继续
返回列表
评论