社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
上一节为大家分析了一下日期时间选择器的基本组成结构;
这一节主要讲解样式实现.
示意图:
大家可以根据需要自行调整.
接下来按照前面介绍的组件结构写几个div.
<div class="最外层">
<div class="中间横线"></div>
<div class="滑动列表1">
<ul>
<li></li>
</ul>
</div>
<div class="滑动列表2">
<ul>
<li></li>
</ul>
</div>
</div>
先指定最外层div样式:
.wrap {
width: 100%;
height: 200px;
background: #fff;
position: relative;
text-align: center
}
用chrome预览一下:
发现有边距,把边距去掉;
* {
margin: 0;
padding: 0;
}
再实现中间横线部分的样式:
.wrap .line {
height: 40px;
border-top: 1px solid #D6DDE7;
border-bottom: 1px solid #D6DDE7;
width: 100%;
position: absolute;
top: 40%
}
实现中间选中部分的样式后就可以大致看出一点模样了;
接下来实现滑动列表的样式:
.wrap .item {
margin: 0;
padding: 0 3%;
display: inline-block;
vertical-align: top;
text-align: center;
overflow: hidden;
height: 200px;
}
.wrap .item ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
min-height: 120px;
width: 80px;
overflow: hidden;
}
.wrap .item ul li {
height: 40px;
line-height: 40px;
color: #898c90;
font-size: 15px
}
.wrap .item ul li.selected {
color: #292a2b;
font-size: 17px
}
现在整个控件就有模有样了,看图.
字体不好看,换一个.
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
color: #000;
font-size: 14px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
overflow-y: auto
}
好了,控件的样式实现就完成了.
大家可以根据需要再自行调整.
现在我们的控件还不能滑动,只有一个基本的样式,但是也可以装个逼哒,下一节为大家讲解如何让控件滑动起来;敬请期待.
修改增加item高度200px.
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!