发表于： 2019-03-09 23:51:17
1 765
今天完成：
昨天说今天要完成在任务十里尝试一下精准还原一张设计稿，然后我还在任务中看到要使用原生css+div完成表单，我想了一下，干脆用全部用原生试一下，看看用原生的情况下有什么不同，还找到了个很不错的能精准测量各种数据的软件
叫pxcook，真的蛮好用的，这里记录下，有人看到可以去试试；
然后就是今天尝试的三个用纯css和div画出来的东西，就是任务十里面的橙色进度条还有选择框的空心圆以及倒三角的下拉选择菜单：
下拉选择菜单：
<style>
body {
margin: 100px 50px;
}
.box2 {
width: 24px;
height: 28px;
background-color: blue;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 2px;
}
.box3 {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 10px solid #fff;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
</body>
空心圆：
.main-div5box1circlecircle {
width: 4px;
height: 4px;
border-radius: 4px;
background-color: #fff;
}
.main-div5box1circle {
width: 18px;
height: 18px;
margin-right: 18px;
border-radius: 18px;
background-color: #1d7ad9;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
橙色进度条：
.div-circlebox {
width: 159px;
height: 5px;
background-color: #ff7f02;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.div-circle {
width: 24px;
height: 24px;
border-radius: 24px;
background-color: #ff7f02;
text-align: center;
line-height: 24px;
font-size: 1.4rem;
color: #fff;
}
实际上开始尝试前没有找资料，就想到之前父元素高度设置太小的情况下内容溢出的情况，就想着能不能故意让她溢出，然后在中间画圆，达到设计稿的效果，然后进行了尝试，很容易就完成了，至于空心圆，就是两个圆嵌套而已。倒三角这个之前就有做过，这里就不详细说了。
关于px和rem：
刚好把泽平大佬显示器拿过来了，然后发现了一个很有意思的情况。
首先画两个长方形，然后在长方形内部放相同的两个文字，不同的是，一个长方形用rem单位，一个用px单位，在设置fontsize 62.5%的情况下，就出现了很有意思的情况，如下图所示：
发现对这两个单位的了解还不是很到位，在实际使用中，当我根据设计稿设计相应宽度的时候，发现换算比根本不是1:10，这就使得无法精准还原设计稿，这在之前没有尝试精准还原设计稿的时候是没有遇到过的，这个问题就作为明天的任务吧；
明天任务：
详细了解清楚rem和px的相关原理和使用场景，然后把任务十完成，先不做响应式布局了，另外重新用boostrap做响应式布局，顺便熟悉下boostrap的表单设置。
返回列表
评论