刷题app题型界面前端设计备份
界面如下：
代码如下：
<view class="lable_list bg-white margin-top"> <view class="lable_item"> <view style="display: flex;align-items: center;"> <image mode="aspectFill" src="https://cdn.biguotk.com/img/2024082215002766c6e20b64b95.png" style="width: 39px;height: 39px;flex-shrink: 0;margin-right: 11px;"> <view style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(https://cdn.biguotk.com/img/2024082215035666c6e2dc1dbd0.png);"> </view> <span></span> </image> <view> <view style="font-weight: 500;color: #666666;line-height: 22px;display: flex;align-items: center;"> <view>免费题库</view> <view style="display: none;"> 解锁章节 直击原题</view> </view> <view style="font-size: 13px;color: #999999;line-height: 17px;">共1604道题 进度：0.0%</view> </view> </view> <view class="item_right" style="flex-shrink: 0;"> <image mode="widthFix" src="https://file.biguotk.com/img/2024082115215866c595962efc3.png" style="width: 6px; height: 10px;" role=""> <view style="background-size: 100% 100%; background-repeat: no-repeat; background-image: url(https://file.biguotk.com/img/2024082115215866c595962efc3.png;);"> </view><span></span> </image> </view> </view> <view class="lable_item"> <view style="display: flex;align-items: center;"> <image mode="aspectFill" src="https://cdn.biguotk.com/img/2024082215033066c6e2c218943.png" style="width: 39px;height: 39px;flex-shrink: 0;margin-right: 11px;"> <view style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(https://cdn.biguotk.com/img/2024082215035666c6e2dc1dbd0.png);"> </view> <span></span> </image> <view> <view style="font-weight: 500;color: #666666;line-height: 22px;display: flex;align-items: center;"> <view>VIP题库</view> <view style="background: rgba(213, 62, 67, 0.1);border-radius: 2px;line-height: 15px;font-size: 8px;color: #D53E43;padding: 0 4px;margin-left: 5px;"> 解锁章节 直击原题</view> </view> <view style="font-size: 13px;color: #999999;line-height: 17px;">共1604道题 进度：0.0%</view> </view> </view> <view class="item_right" style="flex-shrink: 0;"><text><span style="display:none;">马上开通</span><span>马上开通</span></text></view> </view> <view class="lable_item"> <view style="display: flex;align-items: center;"> <image mode="aspectFill" src="https://cdn.biguotk.com/img/2024082215035666c6e2dc1dbd0.png" style="width: 39px;height: 39px;flex-shrink: 0;margin-right: 11px;"> <view style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(https://cdn.biguotk.com/img/2024082215035666c6e2dc1dbd0.png);"> </view> <span></span> </image> <view> <view style="font-weight: 500;color: #666666;line-height: 22px;display: flex;align-items: center;"> <view>章节训练</view> <view style="display: none;"> 解锁章节 直击原题</view> </view> <view style="font-size: 13px;color: #999999;line-height: 17px;">共1604道题 进度：0.0%</view> </view> </view> <view class="item_right" style="flex-shrink: 0;"> <image mode="widthFix" src="https://file.biguotk.com/img/2024082115215866c595962efc3.png" style="width: 6px; height: 10px;" role=""> <view style="background-size: 100% 100%; background-repeat: no-repeat; background-image: url(https://file.biguotk.com/img/2024082115215866c595962efc3.png;);"> </view><span></span> </image> </view> </view> <view class="lable_item"> <view style="display: flex;align-items: center;"> <image mode="aspectFill" src="https://cdn.biguotk.com/img/2024082215012566c6e2452b111.png" style="width: 39px;height: 39px;flex-shrink: 0;margin-right: 11px;"> <view style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(https://cdn.biguotk.com/img/2024082215035666c6e2dc1dbd0.png);"> </view> <span></span> </image> <view> <view style="font-weight: 500;color: #666666;line-height: 22px;display: flex;align-items: center;"> <view>历年真题</view> <view style="display: none;"> 解锁章节 直击原题</view> </view> <view style="font-size: 13px;color: #999999;line-height: 17px;">共1604道题 进度：0.0%</view> </view> </view> <view class="item_right" style="flex-shrink: 0;"> <image mode="widthFix" src="https://file.biguotk.com/img/2024082115215866c595962efc3.png" style="width: 6px; height: 10px;" role=""> <view style="background-size: 100% 100%; background-repeat: no-repeat; background-image: url(https://file.biguotk.com/img/2024082115215866c595962efc3.png;);"> </view><span></span> </image> </view> </view> <view class="lable_item"> <view style="display: flex;align-items: center;"> <image mode="aspectFill" src="https://cdn.biguotk.com/img/2024082215064466c6e3843df31.png" style="width: 39px;height: 39px;flex-shrink: 0;margin-right: 11px;"> <view style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(https://cdn.biguotk.com/img/2024082215035666c6e2dc1dbd0.png);"> </view> <span></span> </image> <view> <view style="font-weight: 500;color: #666666;line-height: 22px;display: flex;align-items: center;"> <view>高频考点</view> <view style="display: none;"> 解锁章节 直击原题</view> </view> <view style="font-size: 13px;color: #999999;line-height: 17px;">共1604道题 进度：0.0%</view> </view> </view> <view class="item_right" style="flex-shrink: 0;"> <image mode="widthFix" src="https://file.biguotk.com/img/2024082115215866c595962efc3.png" style="width: 6px; height: 10px;" role=""> <view style="background-size: 100% 100%; background-repeat: no-repeat; background-image: url(https://file.biguotk.com/img/2024082115215866c595962efc3.png;);"> </view><span></span> </image> </view> </view> </view>
css代码如下：
.lable_list {
border-radius: 1rpx;
box-sizing: border-box;
margin: auto;
padding: 0 50rpx;
width: 100%;
}
.lable_item {
-webkit-align-items: center;
align-items: center;
border-bottom: 1rpx solid #ebebeb;
box-sizing: border-box;
display: -webkit-flex;
display: flex;
font-size: 30rpx;
-webkit-justify-content: space-between;
justify-content: space-between;
padding: 40rpx 0;
}
.item_right {
color: #d53e43;
font-size: 28rpx;
font-weight: 500;
}“刷题app题型界面前端设计备份” 的相关文章
javascript停止定时器, js删除定时器
window.setInterval(method,time)方法本身会返回一个资源句柄,使用clearInterval(Intervalid)方法即可清除定时器<script> var num=0; //每隔1秒再控制台输...
阻止表单提交刷新页面
<form action="save.php" method="post" target="nm_iframe"> &nbs...
使用js让手机震动,js实现手机震动
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> ...
ajax上传文件,formdata上传文件,ajax上传file文件,原生ajax上传文件,ajax上传图片,ajax上传文件formdata
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同...
js cookie操作,js获取cookie值的方法,js 设置cookie
维护老项目中客户提到一个页面中有6个表单以上，导致每次保存一个其他的数据全部丢失，自己比较懒没有全部更换为ajax.用户每次输入完成或者选择完成记录cookie,每次提交后加载页面完成初始化cookie即可。以下代码取自w3school比较完善，之前在其他博客使用的经常出现bug，这个比较推荐使用：...
js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>录制</title> <script ...