随笔分类 - HTML+CSS
摘要:<!-- 增加v-thousands指令 --> <el-input-number v-model="row.money" v-thousands :controls="false" :min="0" :precision="2" style="width: 100%" // 添加全局指令或局部指令
阅读全文
摘要:::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
阅读全文
摘要:display: flex; flex-wrap: wrap; // 让弹性盒元素在必要的时候拆行: overflow: auto; // 规定当内容溢出元素框时发生的事情。auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
阅读全文
摘要:background-image: url('~@/static/downbg-big.png'); background-repeat: no-repeat; background-attachment: fixed; background-size:100% 100%;
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要:<svg width="500" height="500" viewBox="0 0 500 500"> <!-- 圆圈 --> <circle r="5" cx="10" cy="10" fill="currentColor" /> <!-- 横线 --> <line x1="40" y1="25
阅读全文
摘要:<!-- viewbox:可视区域(默认为宽高) viewBox: 是用于在画布上绘制svg图形的坐标系统 可自动缩放比 公式:实际图形宽高 = <图的宽> / (svg--width / viewBox--width) --> <svg width="100px" height="100px" v
阅读全文
摘要:<svg width="100px" height="100px"> <line x1="0" y1="50" x2="100" y2="50" stroke-width="8" stroke="currentColor"></line> <line x1="50" y1="0" x2="50" y
阅读全文
摘要:name: '有氧\n耐力', 只需要把当前标签样式 加上white-space: pre-wrap; 再把数据用v-html 输出 就可以啦 white-space属性指定元素内的空白怎样处理。 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的
阅读全文
摘要:<template> <view class="home"> <view class="content"> <view @animationend="runend(index)" @animationstart="runstart(index)" v-for="(item,index) in pac
阅读全文
摘要:动画 CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash 动画,和 Javascripts。 CSS3 @keyframes 规则 要创建CSS3动画,你将不得不了解@keyframes规则。 @keyframes规则是用来创建动画。 @keyframes规则内指定一个 CSS样式和
阅读全文
摘要:设置了固定宽高的图片被压缩 通常实现如下的效果,是把外层容器设置为display:flex,容器中图片设置固定宽高度,右边元素设置为flex:1,但当右边元素宽度超出剩余空间的时候,图片会被挤压,变成椭圆形。 这是因为在flex容器中,当空间不够的时候,flex-shrink不为0的元素会被压缩,所
阅读全文
摘要:@function px2vw($px, $base: 1920) { @return ($px/($base/100)) + vw;}@function px2vh($px, $base: 1080) { @return ($px/($base/100)) + vh;}
阅读全文
摘要:/* transform属性允许您修改CSS视觉格式模型的坐标空间 。使用它,元素可以被翻译,旋转,缩放和倾斜 该translate() CSS函数在水平和/或垂直方向上重新定位元素。 translateX(t)代表了向量平移的横坐标长度<length>。 transform: translateX
阅读全文
摘要:.selectStyle { color: #EF420E; font-size: 35rpx; font-weight: bold; position: relative; } .selectStyle::before { content: ''; position: absolute; left
阅读全文
摘要:{ overflow: hidden; text-overflow: ellipsis; // 显示省略符号来代表被修剪的文本 white-space: nowrap; // 文本不会换行,文本会在在同一行上继续 display: block; // 此元素将显示为块级元素,此元素前后会带有换行符
阅读全文
摘要:#### 1.css3兼容老式IE 浏览器(ie678)--使阴影和圆角属性生效 -moz-border-radius:15px;//Firefox -webkit-border-radius:15px; // Safari and Chrome -moz-box-shadow: 10px 10px
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要:<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
阅读全文