今天又是一个卑微落魄的小前端。一大早UI小姐姐又给我搞事情。这是我拿到的设计稿一部分。
UI小姐姐说这个横杆竖杆你自己写!
我内心想,一到周一女生就容易暴躁吗??算了算了,保持微笑,头发重要。心态平和是一个优秀开发的标准之一啊。
这点小效果就想为难我?话不多说,直接怼代码。下面的效果用到了定位和伪元素知识点。请自行补漏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
border: 1px solid #dddddd;
color: #333333;
font-size: 14px;
text-indent: 10px;
height: 30px;
margin-bottom: 40px;
}
.son {
position: relative;
width: 300px;
margin-top: 30px;
margin-left: 30px;
}
.hhh {
position: absolute;
top: 40px;
left: 152px;
}
.hhh::before {
display: block;
content: "";
position: absolute;
left: 25px;
width: 25px;
height: 1px;
background: #ccc;
top: -24px;
}
.hhh::after {
display: block;
content: "";
position: absolute;
left: 25px;
width: 25px;
height: 1px;
background: #ccc;
top: 43px;
}
.sss {
display: block;
position: absolute;
width: 20px;
height: 20px;
line-height: 18px;
background-color: #999;
left: 40px;
text-align: center;
}
.sss::before {
display: block;
content: "";
width: 1px;
height: 24px;
background-color: #ccc;
position: absolute;
left: 10px;
top: 20px;
}
.sss::after {
display: block;
content: "";
width: 1px;
height: 24px;
background-color: #ccc;
position: absolute;
left: 10px;
top: -24px;
}
</style>
</head>
<body>
<div class="son">
<div class="inputs">
<div><input type="text" placeholder="出发地" /></div>
<div><input type="text" placeholder="到达地" /></div>
</div>
<div class="hhh"><span class="sss">换</span></div>
</div>
</body>
</html>
懂的越多,省的奶茶也越多了,还能帮UI小姐姐减肥。我真是个好人。