08 2020 档案
摘要：效果展示： CSS <style type="text/css"> .mui-content{ background: #fff; } .container{ display: grid; /* grid-template-columns: 50px 50px 50px; //每列宽都是50px *
阅读全文
摘要：使用场景 sticky：粘性。粘性布局。 在屏幕范围内时，元素不受定位影响（即top、left等设置无效）； 当元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。 说明：元素并没有脱离文档流。 1.示例一： <div class="contain
阅读全文
摘要：效果展示： 父级元素:只需要设置justify-content和align-items属性为center即可 <div class="box"> <p class="boxItem"></p> </div> .box{ width: 200px; height: 200px; border: sol
阅读全文
摘要：一、flex布局最后一行列表左对齐的N种方法 效果展示： 如果每一行列数是固定的 如果每一行列数是固定的，则下面两种方法可以实现最后一行左对齐。 方法一： 也就是我们不使用justify-content:space-between声明在模拟两端对齐效果。中间的gap间隙我们使用margin进行控制。
阅读全文
摘要：1.组件封装 2.页面复用 <template> <div> <!-- HTML引用组件 --> <Protograph></Protograph> </div> </template> <script> // JS引用文件（路径根据实际情况而定） import Protograph from ".
阅读全文
摘要：效果展示： HTML: <div class="banner"> <div class="star1"></div> <div class="star2"></div> <div class="star3"></div> <div class="star4"></div> <div class="s
阅读全文
摘要：效果展示： 话不多说，直接上代码 <p><img class="demo" src="../../img/pageimg/qyyw_icon1.png"></p> @keyframes bouncing{ 0% {transform: rotate(0deg)} 100%{transform: ro
阅读全文
摘要：1px：阴影水平偏移值（可取正负值）；2px：阴影垂直偏移值（可取正负值）；3px：阴影模糊值； rgba(0,0,0,0.2)中： 第一个0：R 第二个0：B 第三个0：G 第四个0.2表示透明度为20%。
阅读全文
摘要：百度云网链接: https://pan.baidu.com/s/1d6bmOf8Z6_UShJDgnWb4hw 提取码: adej
阅读全文
摘要：效果展示： 1.头部引入css：mui.picker和mui.poppicker 两个css文件 2.HTML： <div id='showUserPicker' class="search-item"> <span class="search-area">区</span> <span id='us
阅读全文
摘要：1.效果展示： <div id="segmentedControl" class="mui-segmented-control"> <a id="btn1" class="mui-control-item mui-active">全部</a> <a id="btn2" class="mui-cont
阅读全文
摘要：效果展示： 1.双页面 banShiZhiNan.html（主页面） banShiZhiNan_sub.html（子页面） banShiZhiNan.html HTML <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mu
阅读全文
摘要：1.页面跳转一 <div class="btn_box" id="SMS">登录</div> //跳转到短信验证 document.getElementById('SMS').addEventListener('tap', function() { mui.openWindow({ url: 'sm
阅读全文
摘要：效果展示： 1.图标为icon字体 HTML <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" class="mui-tab-item mui-active" href="suoYouWenTi.html"> <span class="mui-
阅读全文
