{
"background.enabled": true,
"background.useDefault": false,
"bracketPairColorizer.depreciation-notice": false,
"tabnine.experimentalAutoImports": true,
"background.customImages":["file:///E:/0220104192032.png"],
"background.useFront": false,
"background.style": {
"margin": "0 auto",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"z-index": "99999",
"background.repeat": "no-repeat",
"background-size": "cover",
"opacity": 0.3 // 透明度
}
}
vue 解决ios端H5页面放大问题和element ui 计数器能唤起键盘
1.放大问题:在index.html加入
2.唤起键盘:
pointer-events: none;
将json格式的数据转换成表单格式
var params = {}
// debugger
let formDataTo = new FormData;
for (let key in params) {
formDataTo.append(key, params[key]);
}
console.log(formDataTo)
[vue跳转外部链接](https://www.cnblogs.com/pwindy/p/14627475.html)
var url = 'www.baidu.com'
window.open(url,"_blank");
?version=1.0.1 //解决钉钉浏览器缓存问题
vue隔行换色 medicalHeaderS 样式名
:class="{medicalHeaderS:index%2==0,medicalHeaderSB:index%2!=0}"
vue 鼠标划入变背景颜色
班子分析
active: '',
mouseOver() {
this.active = 'background-color: rgba(29, 142, 237, 0.4)';
},
mouseLeave() {
this.active = '';
},
获取url中"?"符后的字符串包括‘?’
var url = location.search; //获取url中"?"符后的字符串包括‘?’ ,window.location.href获取的是url完整的字符串
var code = url.substring(6)
父元素display:flex布局下的子元素宽度无效问题
因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性。
该属性介绍:
一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
根据上述介绍可以理解为默认 1 为开启收缩
所以可以将display:flex;下的子元素的flex属性设置为flex:0 0 auto;
解决了display:flex下的子元素设置宽度无效的问题。
align-items: center;//弹性盒模型水平垂直居中
瀑布流布局
width: 750rpx;
height: 100Vh;
display: flex;
flex-flow:column wrap;
----------------------------------------------------------------------
结构伪类选择器(css3)
:first-child:选取父元素的首个子元素的指定选择器
:last-child:选取父元素的最后一个子元素的制定选择器
:nth-child(n):匹配属于父元素的第N个子元素,不论元素的类型
:nth-last-child(n):匹配从父元素最后一个子元素开始倒数的子元素
————————————————
伪类选择器首个元素样式不要
.service-evaluation-title{
font-size: 30rpx;
font-weight: 600;
padding-left:70rpx ;
}
.service-evaluation-title:first-child{
font-size: 30rpx;
font-weight: 600;
padding-left:0;
}
----------------------------------------------------------------------
字体倒影
-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
font:bold 40px/1.231 georgia,sans-serif;
text-transform:uppercase;
---------------------------------------------
cursor: pointer; vue 鼠标 变手
font-style:italic;字体倾斜
imgUrl: require("../../../static/img/my_chengfa3x.png")解决打包后图片不显示的问题(静态资源时)
背景透明度1
background: black;
opacity: 0.4;
背景透明度2
background-color: rgba(0, 0, 0, 0.4);
font-size:20rpx ;
transform: scale(0.9);//font-size最小z
border-radius:5px; 倒角属性
letter-spacing:2px;字间距属性
font-weight:800;字体加粗
html中随机生成假文:输入Lorem按tab键
text-indent : 20px; 字体缩进了20px
!important;css中权限最高 覆盖一切
max-width:100px;设置段落的最大宽度
[background-image](http://www.divcss5.com/rumen/r125.shtml):url() ;//引入背景图片
[background-repeat](http://www.divcss5.com/rumen/r125.shtml):no-repeat ;//设置背景图片是否重复平铺
background-size: 100% 100%; //设置背景图片大小
background-image: linear-gradient(to right, red , yellow); 渐变的背景颜色
![]()
//图片居中
居中
//transform:translateY
position: absolute;
transform:translate(-50%);
left: 50%;
水平垂直居中
position: relative;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
------------------------
input::-webkit-input-placeholder{color: #C6C6C6;} 改变input提示文的颜色
maxlength="11" input限制长度
style="text-align:right;" 让input提示文居右
//input加上type="password"可以让内容变成星号
div实现背景色和背景图片同时存在:
{ background-color: #fff; background-image:url('../../assets/img/model-bg.png'); background-repeat: no-repeat; }
height:100%,不生效?
此时应该在App.vue文件style中添加如下代码:
html,body,#app{
height: 100%;
}
去除ios 手机端input输入框的内阴影
input{ -webkit-appearance: none; }