scss的使用方法
摘要：引用scss文件——看上一篇的less使用，里面的Koala，一样的原理！！！ 方法一： scss: /**定义变量 */$width:404px;$color:green;$font-size:20px;.scss1{ width: $width; height: $width/2; backgr
阅读全文
posted @
2022-03-24 16:18
最帅爸爸
阅读(518)
推荐(0) 编辑
less的使用方法
摘要：一 、如何引路入less文件 1）使用官方插件 less.min.js 步骤一：插件下载地址：https://github.com/less/less.js 步骤二：下好插件后找到js文件路径，如下图： 步骤三：将less.min.js/less.js复制到项目js文件路径下 步骤四：创建一个les
阅读全文
posted @
2022-03-24 13:36
最帅爸爸
阅读(1580)
推荐(1) 编辑
value中放vue的参数
摘要：<input type="text" v-model="userInfo.name"/>
阅读全文
posted @
2022-03-21 08:32
最帅爸爸
阅读(48)
推荐(0) 编辑
媒介查询兼容各种端口的响应式范围取值（移动端、PC端、ipad、移动端侧屏）
摘要：！！！（chrome作者亲测）！！！数据仅供参考 /*ipad*/@media screen and (min-width:760px) and (max-width:1000px) /*移动端*/@media screen and (max-width:420px)/*PC端*/@media sc
阅读全文
posted @
2022-03-16 09:05
最帅爸爸
阅读(82)
推荐(0) 编辑
css3_媒介查询
摘要：！！！做媒介查询页面大小时，一定要加： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 1）当打印的时候，执行.noprint<style media="print"> .noprint{ display:
阅读全文
posted @
2022-03-15 11:52
最帅爸爸
阅读(94)
推荐(0) 编辑
flex布局
摘要：flex布局样式.div1{ display: flex;}.div2{ flex: auto; text-align: center; height: 50px; line-height: 50px; margin-left: 10px; background-color: lightblue;}
阅读全文
posted @
2022-03-11 13:43
最帅爸爸
阅读(32)
推荐(0) 编辑
页面布局总结
摘要：负边距与浮动布局 #div1{ height: 200px; background-color: lightblue; float: left; width: 100%;}#div2{ float: left; width: 200px; height: 100px; background-colo
阅读全文
posted @
2022-03-10 11:53
最帅爸爸
阅读(62)
推荐(1) 编辑
垂直居中的方法
摘要：垂直居中方法一： .div1{ height: 100px; background-color: #0dcaf0; text-align: center; color: yellow; font: 50px/100px "microsoft yahei";}html: <div class="div
阅读全文
posted @
2022-03-09 10:11
最帅爸爸
阅读(313)
推荐(0) 编辑
js动态获取当前时间（年、月、日、上午/下午、时、分、秒）
摘要：//获取动态时间function mytime() { var mydate = new Date(); var year = mydate.getFullYear(); var month = mydate.getMonth() + 1; var day = mydate.getDate(); v
阅读全文
posted @
2022-03-08 08:38
最帅爸爸
阅读(1497)
推荐(0) 编辑
css 悬停图片改变图片的样式
摘要：<style> #div{ text-align: center; } .img{ width: 200px; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); transition: 1s clip-path; } .img:hover{ cli
阅读全文
posted @
2022-03-07 15:15
最帅爸爸
阅读(91)
推荐(0) 编辑
原生js的懒人轮播图
摘要：<style> body{ margin: 0; padding: 0px;}#carousel{ margin: auto; /* 居中 */ width: 600px; /* 设置宽度 */ position: relative; /* 相对定位 */ overflow: hidden; /*
阅读全文
posted @
2022-03-07 15:09
最帅爸爸
阅读(254)
推荐(1) 编辑
css三角形文本框
摘要：<style type="text/css"> .triangle{/* 三角形图片位置 */ background-image: url(img/traintop.png); width: 20px; height: 20px; background-position: center; posit
阅读全文
posted @
2022-03-07 15:03
最帅爸爸
阅读(55)
推荐(0) 编辑
鼠标悬停过度事件：Transition
摘要：CSS代码：<style> div{width:100px;height:100px;background:blue;transition: 0.5s;//0.5秒完成}div:hover{width:600px;}</style>HTML代码：<body> <div></div><p>请把鼠标指针
阅读全文
posted @
2022-03-07 14:53
最帅爸爸
阅读(81)
推荐(0) 编辑
板娘设置
摘要：<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script> <style> canvas#live2dcanvas { border: 0 !important; }</s
阅读全文
posted @
2022-03-07 11:44
最帅爸爸
阅读(62)
推荐(0) 编辑
display:block 和display:inline-block的区别和用法
摘要：1).块状元素：(div,p,form,ul,ol,li) ，独占一行，默认情况width为100% 2).行内块状元素：(span,img,a)，不会独占一行，相邻的元素一直排在同一行，排满了才会换行，不受..top..bottom的影响 3).display:行内，块状元素设置 display:
阅读全文
posted @
2022-03-07 11:10
最帅爸爸
阅读(95)
推荐(1) 编辑
HTML5中新增实用的标签
摘要：1：progress 进度条 <h3>progress</h3> <progress value="75" max="100"></progress> Google运行结果： 2：datalist 下拉框（可输入） <input type="text" list="countries" /> <da
阅读全文
posted @
2022-03-02 10:08
最帅爸爸
阅读(206)
推荐(1) 编辑
vue中的v-if查找数组中最后一个，给他加上新的样式
摘要：vue: var app=new Vue({ el:".xiaomi", data: { typeInfo: [{img:"image/type/phone_1.webp",name:"Xiaomi 12 Pro",price:"4699"}, {img:"image/type/phone_2.we
阅读全文
posted @
2022-03-02 09:20
最帅爸爸
阅读(248)
推荐(0) 编辑
