700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html仿支付宝个人中心 HTML仿支付宝/微信账单交互效果

html仿支付宝个人中心 HTML仿支付宝/微信账单交互效果

时间:2020-03-10 05:26:18

相关推荐

html仿支付宝个人中心 HTML仿支付宝/微信账单交互效果

这几天做账单列表,看见支付宝的账单的体验很舒服,于是自己想仿一个出来。但是过程中遇到了问题当时思前想后想用js来判断容器的位置,让容器之间相互产生交互。无奈自己太年轻了。

导致很多兼容不断在修复,于是乎,到思否提问,答主也特别的干脆:

于是我把代码改了一下,无需使用js既可实现。

支付宝账单图我就不截取了,附上成品。

就这种丝滑般的感觉。

标题那边就是显示日期

html代码

标题

这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表

标题2

这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2**加粗文字**

css 代码body{

background: #eee;

}

.content{

padding: 10px;

}

.content .list{

background: #fff;

/*margin-bottom: 10px;*/

position: relative;

}

.content .list h2{

text-align: center;

padding: 10px 0;

position: sticky;

top: 0;

background: #f5f5f5;

width: 100%;

/*width: calc(100% - 20px);*/

}

.content .list ul{

padding-top: 40px;

}

.content .list li{

height: 20px;

line-height: 20px;

padding:10px;

border-bottom: 1px solid #f5f5f5;

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。