摘要: 效果展示: HTML <div class="mui-input-row"> <span class="mui-left mui-checkbox radio-box"> <label>张元</label> <input name="checkbox" value="Item 1" type="ch 阅读全文
posted @ 2020-09-11 13:50 琼菇凉 阅读(1527) 评论(0) 推荐(0) 编辑
摘要: 效果展示: CSS <style type="text/css"> .mui-content{ background: #fff; } .container{ display: grid; /* grid-template-columns: 50px 50px 50px; //每列宽都是50px * 阅读全文
posted @ 2020-08-31 17:29 琼菇凉 阅读(243) 评论(0) 推荐(0) 编辑
摘要: 使用场景 sticky:粘性。粘性布局。 在屏幕范围内时,元素不受定位影响(即top、left等设置无效); 当元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。 说明:元素并没有脱离文档流。 1.示例一: <div class="contain 阅读全文
posted @ 2020-08-28 17:41 琼菇凉 阅读(402) 评论(0) 推荐(0) 编辑
摘要: 效果展示: 父级元素:只需要设置justify-content和align-items属性为center即可 <div class="box"> <p class="boxItem"></p> </div> .box{ width: 200px; height: 200px; border: sol 阅读全文
posted @ 2020-08-28 16:20 琼菇凉 阅读(1736) 评论(0) 推荐(0) 编辑
摘要: 一、flex布局最后一行列表左对齐的N种方法 效果展示: 如果每一行列数是固定的 如果每一行列数是固定的,则下面两种方法可以实现最后一行左对齐。 方法一: 也就是我们不使用justify-content:space-between声明在模拟两端对齐效果。中间的gap间隙我们使用margin进行控制。 阅读全文
posted @ 2020-08-28 16:08 琼菇凉 阅读(9194) 评论(0) 推荐(1) 编辑
摘要: 1.组件封装 2.页面复用 <template> <div> <!-- HTML引用组件 --> <Protograph></Protograph> </div> </template> <script> // JS引用文件(路径根据实际情况而定) import Protograph from ". 阅读全文
posted @ 2020-08-27 10:22 琼菇凉 阅读(967) 评论(0) 推荐(1) 编辑
摘要: 效果展示: HTML: <div class="banner"> <div class="star1"></div> <div class="star2"></div> <div class="star3"></div> <div class="star4"></div> <div class="s 阅读全文
posted @ 2020-08-26 18:03 琼菇凉 阅读(307) 评论(0) 推荐(0) 编辑
摘要: 效果展示: 话不多说,直接上代码 <p><img class="demo" src="../../img/pageimg/qyyw_icon1.png"></p> @keyframes bouncing{ 0% {transform: rotate(0deg)} 100%{transform: ro 阅读全文
posted @ 2020-08-26 17:55 琼菇凉 阅读(178) 评论(0) 推荐(0) 编辑
摘要: 1px:阴影水平偏移值(可取正负值);2px:阴影垂直偏移值(可取正负值);3px:阴影模糊值; rgba(0,0,0,0.2)中: 第一个0:R 第二个0:B 第三个0:G 第四个0.2表示透明度为20%。 阅读全文
posted @ 2020-08-25 15:30 琼菇凉 阅读(2542) 评论(0) 推荐(0) 编辑
摘要: 百度云网链接: https://pan.baidu.com/s/1d6bmOf8Z6_UShJDgnWb4hw 提取码: adej 阅读全文
posted @ 2020-08-24 17:21 琼菇凉 阅读(235) 评论(0) 推荐(0) 编辑