界面如下:
代码如下:
<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; }
离线缓存的开启实例使用apache设置 1.apache配置文件搜索Addtype,我的addtype已经存在项目,如下 AddType application/x-compress .Z AddType application/x-gz...
捕捉模式从DOM最顶层一直到最后一层,冒泡正好相反,具体运行以下实例测试.<!DOCTYPE html> <html> <head> <title>捕捉和冒泡</title> <meta charset="...
<form action="save.php" method="post" target="nm_iframe"> &nbs...
https://3gimg.qq.com/lightmap/v1/marker/index.html?marker=coord:37.6767600000,112.7297800000&key=TKUBZ-D24AF-GJ4JY-JDVM2-IBYKK-KEBCU&referer=p...
<!DOCTYPE html> <html> <head> <title>捕捉和冒泡</title> <meta charset="utf-8"> </head> <bo...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...