css样式汇编总结
掌握CSS的5个技巧
经验分享:
划分页面机构的顺序:
- 自上而下,从左往右,以行作为一个单位
- 划分结构的依据:内容、颜色块、间距和边框
你离css大神只差这5个技巧和思维!
学习资源:
MDN:https://developer.mozilla.org/en-US/docs/Web/CSS
w3schools.com:https://w3schools.com
- 样式调整
业余时间经常到像mdn之类的文档网站上去查它们的用法,能长不少见识。
- 布局调整:
可以看其他的网站,从简单的开始练习;慢慢再去看不规则的网站,再用自己的方法实现出来
慢慢就会形成一种思路:看到设计稿就能大体知道怎么实现网站布局了
分析页面布局:自己先用HTML方块规划出来,忽略内部细节
- 导航
- 头部信息
- 内容区域
- 底部信息
使用transform调整元素的位置,不会是元素脱离文档流。它们所占的空间会停留在原位。
flot、position、flex、Grid、媒体查询@media、
- 形状、特效的拆解与合并
想理解前端页面和组件的特效,先去研究一下设计的基本原则和理论,不但能加快你的开发效率,
而且能减少与设计师沟通的成本和时间,变相的减少加班…
前端工程师要学习一点设计方便的知识:因为前端页面会有不规则的图形,动画效果等等。
- 页面组件设计原则
在设计组件时,首先分析设计稿中哪些组件大体相同,然后把它们的公共样式抽离出来,有特殊情况时通过组合 class来覆盖已有的样式。另外在设计组件时,只关心组件盒子内部的区域,不要设置像外边距这样的属性, 它们应该由包含这个组件的容器来设置。因为相同的组件在不同容器中的位置和间距可能不同。
例如:按钮大小差不多,只是颜色有差异
可以通过.button{控制大小}
可以通过 .blue{} .green{};控制颜色
CSS模块化学习
- 通过选择器选择对应的HTML元素、应用样式
- 设置元素外观,比如:颜色、背景、字体等
- 调整元素的位置和与其他元素的间距
- 安排一组元素或者整个页面的布局
- 覆盖或继承已有样式
CSS样式基础篇
hover.css官网:https://github.com/lanLunn/Hover
2D转换(变换)transform
2d移动 translate
2d移动是2d转换里面的一种功能,可以改变元素在页面中的位置,类似 定位
使用2d移动的步骤:
给元素添加 转换属性
transform
属性值为
translate(x,y)
如transform:translate(50px,50px)
;div{transform: translate(50px,50px);}
小结
- translate中的百分比单位是相对于自身元素的
translate:(50%,50%);
- translate类似定位,不会影响到其他元素的位置
- 对行内标签没有效果
2d旋转 rotate
2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
使用步骤:
- 给元素添加转换属性
transform
- 属性值为
rotate(角度)
如transform:rotate(30deg)
顺时针方向旋转30度div{transform: rotate(0deg); }
2d旋转有以下特点:
- 角度为正时 顺时针 负时 为逆时针
- 默认旋转的中心点是元素的中心点
转换中心 transform-origin 了解
该属性可以修改元素旋转的时候的中心点
- transform-origin:50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度
- transform-origin:top left; 左上角 和 transform-origin:0 0;相同
- transform-origin:50px 50px; 距离左上角 50px 50px 的位置
- transform-origin:0; 只写一个值的时候 第二个值默认为 50%;
2d缩放 scale
缩放,顾名思义,可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小
步骤:
给元素添加转换属性
transform
转换的属性值为
scale(宽的倍数,高的倍数)
如 宽变为两倍,高变为3倍transform:scale(2,3)
div{transform:scale(2,3); }
小结
- transform:scale(1,1) 放大一倍 相对于没有放大
- transform:scale(2,2) 宽和高都放大了2倍
- transform:scale(2) 只写一个参数 第二个参数则和第一个参数一样 相当于 scale(2,2)
- transform:scale(0.5,0.5) 缩小
- transform:scale(-2,-2) 反向放大2倍 很少用负数 容易让人产生误解
动画 animation
初学者容易对 动画 和 过渡 傻傻分不清楚
过渡 只能看到一次变化过程 如 宽度 1000px 变化到 100px
动画 可以设置变化的次数 甚至是无数次
1. 步骤
在css中定义动画函数
给目标元素调用动画函数
/* 1 声明动画函数 */@keyframes ani_div {0%{width: 100px;background-color: red;}50%{width: 150px;background-color: green;}100%{width: 300px;height: 300px;background-color: yellow;}}div {width: 200px;height: 200px;background-color: aqua;margin: 100px auto;/* 2 调用动画 */animation-name: ani_div;/* 持续时间 */animation-duration: 2s;}
2. 语法1
动画名
设置要使用的动画名
animation-name:xxx;
持续时间
设置动画播放的持续时间
animation-duration:3s
速度曲线
和设置过渡的速度曲线一样
animation-timing-function:linear;
- linear: 匀速
- ease: 慢-快-慢 默认值
- ease-in: 慢-快。
- ease-out: 快-慢。
- ease-in-out: 慢-快-慢。
延迟时间
animation-delay: 0s;
循环次数
设置动画播放的循环次数
animation-iteration-count: 2;
infinite 为无限循环循环方向
animation-direction
如在动画中定义了 0%:红色 100%:黑色 那么 当属性值为
- normal 默认值 红 -> 黑
- reverse 反向运行 黑 -> 红
- alternate 正-反-正… 红 -> 黑 -> 红…
- alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …
- 以上与循环次数有关
动画等待或者结束的状态
animation-fill-mode
设置动画在等待或者结束的时候的状态
- forwards:动画结束后,元素样式停留在 100% 的样式
- backwards: 在延迟等待的时间内,元素样式停留在 0% 的样式
- both: 同时设置了 forwards和backwards两个属性值
暂停和播放
animation-play-state
控制 播放 还是 暂停
running
播放paused
暂停
3. 复合写法
animation: name duration timing-function delay iteration-count direction fill-mode;
多个动画写法
用逗号分隔
animation: name duration timing-function delay iteration-count direction fill-mode, animation: name duration timing-function delay iteration-count direction fill-mode;
动画结束事件animationend
元素在动画结束之后,会自动触发的事件 animationend
var div = document.querySelector("div");div.addEventListener("animationend", function () {console.log("div的动画结束之后,触发");})
4. 动画库animate.css
封装了常见的有意思的小动画 发疯似的建议看官网来学习使用
官网
中文
使用步骤
引入css文件
<head><link rel="stylesheet" href="animate.min.css"> </head>
给元素添加对应的class
<h1 class="animated infinite bounce">快来看看我</h1>
简单解读:
animated
必须添加的class
infinite
无限播放
bounce
弹跳动画的效果,可以查官网自己选择喜欢的css3兼容处理
css3涉及到较多的新属性,某些低版本(如ie8以及以下)的浏览器对css3的支持程度不够,因此需要做以下处理
添加对应的浏览器的前缀 常见前缀如下
- 谷歌 -webkit
- 火狐 -moz
- IE -ms
如对
border-radius
进行兼容性处理-webkit-border-radius: 30px 10px;-moz-border-radius: 30px 10px;-ms-border-radius: 30px 10px;// border-radius 一定要放在最后border-radius: 30px 10px;
如果发现添加前缀也解决不了兼容性问题,那么就不要使用该css3属性
3D转换(变换)
3d移动 translate3d
3d移动在2d移动的基础上多加了一个可以移动的方向,就是z轴方向
语法:
- transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
- translform:translateX(100px) 仅仅是移动在x轴上移动
- translform:translateY(100px) 仅仅是移动在Y轴上移动
- translform:translateZ(100px) 仅仅是移动在Z轴上移动
注意:
因为z轴是垂直屏幕,由里指向外面,所以 默认是看不到元素在z轴的方向上移动,想要看到,可以使用下面的 视距 属性设置
视距 perspertive 了解
人在看物体时,有个规律,如 远的物体看起来小 近的物体看起来大
perspertive 就是用来设置 人 和 物体 的距离
如 我们想要看到 物体 在z轴上的移动 的 远大近小 效果时
设置物体的
translateZ
一般大于 0 如transform:translateZ(100px)
设置 人和物体的距离 - 视距 这个值规定要设置给物体的父元素
perspertive:1000px
动态改变物体的
translateZ
即可观察效果/* 父元素 */body {/* 视距 */perspective: 1000px;}/* 目标 */div {width: 200px;height: 200px;background-color: aqua;margin: 100px auto;/* z轴的移动 */transform: translateZ(0px);}
小结
- translateZ的值和perspertive都要大于0 否则容易出现兼容性问题
3d旋转 rotate3d
3d旋转指可以让元素在3维平面内沿着 x轴,y轴,z轴或者自定义轴进行旋转 对于元素旋转的方向的判断 我们需要先学习一个左手准则
左手准则
比如要判断某元素沿着x轴是怎么旋转的
- 左手的手拇指指向 x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴旋转的方向了
例子1
我现在想让元素沿着 x轴正方向旋转90度
/* 沿着x轴正方向旋转90度 deg为单位 */transform: rotateX(90deg);
语法
transform:rotateX(45deg);
沿着x轴正方向旋转 45度transform:rotateY(45deg)
沿着y轴正方向旋转 45degtransform:rotateZ(45deg)
沿着Z轴正方向旋转 45degtransform:rotate3d(x,y,z,deg)
沿着自定义轴旋转 deg为角度 了解即可3D缩放 scale3d 了解
3d缩放 可以控制元素 在 x轴,y轴,z轴上的缩放,也可以理解为 宽,高,厚度的缩放。 结合3d模型工具学习
语法
transform: scale3d(1 ,1,2);
宽,高 缩放一倍,厚度放大两倍transform: scaleX(1)
只缩放宽transform: scaleY(1)
只缩放高transform: scaleZ(1)
只缩放厚视距原点 perspective-origin 了解
回顾视距知识点,视距可以设置 人 和 物体 之间的距离 也就是z轴方向的距离
而 视距原点 可以设置 人 站在x轴和y轴的位置。
- 视距原点和视距一样,也是设置给要观察元素的父元素上
- perspective-origin:center center; 默认值是元素的中心点
- perspective-origin:10px; 指定了一个参数的时候,第二个参数默认为center 也就是50%;
- perspective-origin:10% %; 百分比都是相对于自身的宽度和高度
转换样式 transform-style 了解
结合3d立方体案例理解,控制子元素是否开启3维立体环境
transform-style: flat;
平面模式 - 不开启3维立体环境transform-style: preserve-3d;
3维立体环境3D转换总结
- 百分比单位都是相对于自身
- 视距、视距原点、转换样式 这三个属性都是给父元素添加的
css3兼容处理
css3涉及到较多的新属性,某些低版本(如ie8以及以下)的浏览器对css3的支持程度不够,因此需要做以下处理
添加对应的浏览器的前缀 常见前缀如下
- 谷歌 -webkit
- 火狐 -moz
- IE -ms
如对
border-radius
进行兼容性处理-webkit-border-radius: 30px 10px;-moz-border-radius: 30px 10px;-ms-border-radius: 30px 10px;// border-radius 一定要放在最后border-radius: 30px 10px;
如果发现添加前缀也解决不了兼容性问题,那么就不要使用该css3属性
伪元素选择器
1. 伪元素种类
- E::before 在E元素前插入一个元素
- E::after 在E元素后插入一个元素
- E::first-letter 选择到了E容器内的第一个字母
- E::first-line 选择到了E容器内的第一行文本
2. h5写法和传统写法区别
- 单冒号
E:before
- 双冒号
E::before
- 浏览器对以上写法都能识别 双冒号 是h5上语法的规范
3. 伪元素的注意事项
想要让伪元素有效,必须遵循以下注意事项
- 伪元素只能给双标签加 不能给单标签加
- 伪元素的冒号前不能有空格 如
E ::before
这个写法是错误的 - 伪元素里面必须写上属性
content:""
;
伪类选择符
E:first-child 匹配父元素的第一个子元素E。
E:last-child 则是选择到了最后一个li标签
E:nth-child(n) E:nth-last-child(n)
匹配到父元素的第n个元素 或者 是倒数第n个元素
相比
E:first-child
则要强大了不少,功能如下 (死记硬背是最好的)
匹配到父元素的第2个子元素
ul li:nth-child(2){}
匹配到父元素的倒数第2个子元素
ul li:nth-last-child(2){}
匹配到父元素的序号为奇数的子元素
ul li:nth-child(odd){}
odd 是关键字 奇数的意思(3个字母 )匹配到父元素的序号为偶数的子元素
ul li:nth-child(even){}
even(4个字母 )匹配到父元素的前3个子元素
ul li:nth-child(-n+3){}
选择器中的 n 是怎么变化的呢?
因为 n是从 0 ,1,2,3… 一直递增
所以 -n+3 就变成了
- n=0 时 -0+3=3
- n=1时 -1+3=2
- n=2时 -2+3=1
- n=3时 -3+3=0
- …
匹配到父元素的后3个子元素
ul li:nth-last-child(-n+3){}
E:nth-of-type(n)
E:nth-child(n)
匹配父元素的第n个子元素E。E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E。
CSS初始化:
移动端 CSS 初始化推荐使用 normalize.css/(具体参见:个人GitHub)
移动端常用初始化样式
body {margin: 0 auto;min-width: 320px;max-width: 640px;background: #fff;font-size: 14px;font-family: -apple-system, Helvetica, sans-serif;line-height: 1.5;color: #666; }
global.css
html, body, #app {height: 100%;margin: 0;padding: 0;font-size: 12px;background-color: #f1f1f1; }// 分析: // 行高使用数字,方便子元素继承行高 1.5 body {font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;color: #3c3c3c;background-color: #f4f4f4; }img {border: none;vertical-align: middle; }a {text-decoration: none;color: #3c3c3c; }i {font-style: normal; }button {outline: none;border: none; }table {/* 边框模式:合并的模式 */border-collapse: collapse; } th,td {padding: 0; }/*伪元素是行内元素 正常浏览器清除浮动方法*/ .clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden; }/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/ .clearfix {*zoom: 1; }.fl {float: left; }.fr {float: right; }// 版心 .layer {width: 1200px;margin: 0 auto; }// 常用颜色:直接在页面元素添加class类名 .c4 {color: #f40; }.c5 {color: #f50; }.c6 {color: #8d7afb; }.c7 {color: #a8c001; }// 常用margin值 .mr7 {margin-right: .4375rem }.mr5 {margin-right: .3125rem }.mt10 {margin-top: .625rem }.mr10 {margin-right: .625rem }/* 使用媒体查询:动态计算根元素的字体大小 *//*>=1024的设备屏幕*/ @media screen and(min-width: 1024px) {body {font-size: 12px} }/*>=1100的设备屏幕*/ @media screen and(min-width: 1100px) {body {font-size: 14px} }/*>=1280的设备屏幕*/ @media (min-width: 1280px) {body {font-size: 18px;} }/*>=1366的设备屏幕*/ @media screen and(min-width: 1366px) {body {font-size: 20px;} }/*>=1440的设备屏幕*/ @media screen and(min-width: 1440px) {body {font-size: 24px !important;} }/*>=1680的设备屏幕*/ @media screen and(min-width: 1680px) {body {font-size: 26px;} }/*>=1920的设备屏幕*/ @media screen and(min-width: 1920px) {body {font-size: 30px;} }
福利:Photoshop 切图
常见的图片格式
1. jpg图像格式: JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg格式的2. gif图像格式: GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果3. png图像格式 是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点,能够保持透明背景4. PSD图像格式 PSD格式是Photoshop的专用格式,里面可以存放图层、通道、遮罩等多种设计草稿。
. 切图插件
- Cutterman是一款运行在photoshop中的插件,能够自动将你需要的图层进行输出, 以替代传统的手工 导出web
- 所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出,方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则,纯点击操作,方便、快捷,易于上手。
- 官网: http://www.cutterman.cn/zh/cutterman
- 注意: cutterman插件要求你的ps 必须是完整版,不能是绿色版,所以大家需要从新安装完整版本
CSS 的布局的三种机制: 普通流、浮动、定位
CSS属性书写顺序(重点)
建议遵循以下顺序:
布局定位属性:display / position / float / clear / visibility / overflow
自身属性:width / height / margin / padding / border / background
文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性(CSS3):
content / cursor / border-radius / box-shadow / text-shadow / background:lineargradient …
CSS3 部分新属性
1. 圆角边框(CSS3)
border‐radius:length;
其中每一个值可以为 数值或百分比的形式。
技巧: 让一个正方形 变成圆圈border‐radius: 50%;
实现椭圆形:
- 就不要用 百分比了,因为百分比会是表示高度和宽度的一半。
- 而我们这里矩形就只用 用 高度的一半就好了。精确单位
2. 盒子阴影(CSS3)
box‐shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
值 描述 h-shadow 必需;水平阴影的位置;允许负值 v-shadow 必需;垂直阴影的位置;允许负值 blur 可选;模糊距离 spread 可选;阴影的尺寸 color 可选;阴影的颜色;请参阅CSS颜色值 inset 可选;将外部阴影(outset)改为内部阴影
- 前两个属性是必须写的。其余的可以省略。
- 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset
div {width: 200px;height: 200px;border: 10px solid red;/* box‐shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); *//* box‐shadow:水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影; */box‐shadow: 0 15px 30px rgba(0, 0, 0, .4); }
3. CSS3盒子模型
传统模式宽度计算:盒子的宽度 = CSS中设置的width + border + padding
CSS3盒子模型: 盒子的宽度 = CSS中设置的宽度width 里面包含了 border 和 padding也就是说,我们的CSS3中的盒子模型, padding 和 border 不会撑大盒子了
传统or CSS3盒子模型?
- 移动端可以全部CSS3 盒子模型
- PC端如果完全需要兼容,我们就用传统模式,如果不考虑兼容性,我们就选择 CSS3 盒子模型
/*CSS3盒子模型*/
box-sizing: border-box;/*传统盒子模型*/
box-sizing: content-box;
4. 特殊样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
对比记忆:
1. 文字居中和盒子居中区别
- 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
- 块级盒子水平居中 左右margin 改为 auto
行内元素为了照顾兼容性, 尽量只设置左右内外边距, 不要设置上下内外边距
text‐align: center; /* 文字 行内元素 行内块元素水平居中 */ margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */
2. 插入图片和背景图片区别
- 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
- 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
img {width: 200px;/* 插入图片更改大小 width 和 height */height: 210px;margin‐top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */margin‐left: 50px; /* 插入当图片也是一个盒子 */ } div {width: 400px;height: 400px;border: 1px solid purple;background: #fff url(images/sun.jpg) no‐repeat;background‐position: 30px 50px; /* 背景图片更改位置 我用 background‐position */ }
3. 行内块 和 浮动
行内块(inline-block):可以水平显示,不过 div 之间有间隙,不方便处理
div {display: inline‐block; }
浮动:设置浮动属性,可以让 div 水平排列,并且没有间隙
第01节:常用CSS样式
子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
1. font:综合设置字体样式 (重点)
选择器 { font: font‐style font‐weight font‐size/line‐height font‐family;}
注意:
- 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
- 其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性
将不起作用。- font-size 我们通常用的单位是px 像素,一定要跟上单位
- font-weight 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位
- font-style 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal
2. line-height:行间距
作用:line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。
行高和高度的三种关系
- 如果 行高 等 高度 文字会 垂直居中
- 如果 行高 大于 高度 文字会 偏下
- 如果 行高小于高度 文字会 偏上
单位:line-height常用的属性值单位有三种
字母
line-height: normal
normal值多大呢? 受浏览器和字体的影响 微软雅黑大概为 1.32
数字
line-height: 1.5
(根元素常用数字:方便子元素继承行高。其他单位也可以继承,但继承的是计算后的值。)举例说明: 情况一:body行高使用数字 body {font-size: 14pxline-height: 1.5 } // h3元素的行高(浏览器可以看到元素规格:宽*48):1.5*32=48px h3 {font-size: 32px } // p元素的行高(浏览器可以看到元素规格:宽*48):1.5*20=30px p {font-size: 20px }情况二:body行高使用百分比 body {font-size: 14pxline-height: 150% } // h3元素的行高(浏览器看到元素规格:宽*21),此时子元素继承的行高是计算之后的:14*1.5=21 h3 {font-size: 32px } // p元素的行高(浏览器看到元素规格:宽*21),此时子元素继承的行高是计算之后的:14*1.5=21 p {font-size: 20px }
// 行高使用数字,方便子元素继承行高 1.5;宋体(Unicode):'\5b8b\4f53' body {font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; }假设元素的字体大小:font-size: 16px 此时元素行高的值换算为px:1.5 * 16 = 24px
分别为像素px,实际工作中使用最多的像素px
line-height: 50px
相对值em
line-height: 5em
假设根元素的字体大小:font-size: 16px 此时行高的值换算为px:5 * 16 = 80px(1em = 16px)
百分比%
line-height: 200%
假设根元素的字体大小:font-size: 16px 此时行高的值换算为px:2 * 16 = 32px
技巧:
一般情况下,行距比字号大7.8像素左右就可以了。 line‐height: 24px;
3. text-indent:首行缩进
作用:text-indent属性用于设置首行文本的缩进,
属性值:
其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,
允许使用负值,
建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度p {/*行间距*/line‐height: 25px;/*首行缩进2个字 em 1个em 就是1个字的大小*/text‐indent: 2em; }
4. text-decoration 文本的装饰
text-decoration 通常我们用于给链接修改装饰效果
值 描述 none 默认。定义标准的文本。 取消下划线(最常用) underline 定义文本下的一条线。下划线 也是我们链接自带的(常用) overline 定义文本上的一条线。(不用) line-through 定义穿过文本下的一条线。(不常用)
5. 链接伪类选择器(重点)
因为伪类选择器很多,比如链接伪类,结构伪类等等
- 链接伪类选择器
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标移动到链接上
- a:active 选定的链接
注意:
- 写的时候,他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。
- 记忆法:love hate 爱上了讨厌 lv 包包 非常 hao
- 因为叫链接伪类,所以都是 利用交集选择器 a:link a:hover
- 因为a链接浏览器具有默认样式,所以我们实际工作中都需要给链接单独指定样式
实际工作开发中,我们很少写全四个状态,一般我们写法如下:
重点记住 a{} 和 a:hover 实际开发的写法
a { /* a是标签选择器 所有的链接 */font‐weight: 700;font‐size: 16px;color: gray; } a:hover { /* :hover 是链接伪类选择器 鼠标经过 */color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */ }
6. CSS 背景(background)
6.1 背景颜色(color)
background‐color:颜色值; 默认的值是 transparent 透明的
6.2 背景图片(image)
小技巧: 我们提倡 背景图片后面的地址,url不要加引号。
background‐image : none | url (url)background‐image : url(images/demo.png);
6.3 背景平铺(repeat)
background‐repeat : repeat | no‐repeat | repeat‐x | repeat‐y
参数 作用 repeat 背景图像在纵向和横向上平铺(默认的) no-repeat 背景图像不平铺 repeat-x 背景图像在横向上平铺 repeat-y 背景图像在纵向平铺
6.4 背景位置(position) 重点
background‐position : length || length background‐position : position || position
参数 值 length 百分数 position top | center | bottom | left | center | right 方位名词 注意:
- 必须先指定background-image属性
- position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
- 如果指定两个值,两个值都是方位名字,则两个值前后顺序无关,比如left top和top left效果一致
- 如果只指定了一个方位名词,另一个值默认居中对齐。
- 如果position 后面是精确坐标, 那么第一个,肯定是 x 第二的一定是y
- 如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
- 如果指定的两个值是 精确单位和方位名字混合使用,则第一个值是x坐标,第二个值是y坐标
6.5 背景附着
背景附着就是解释背景是滚动的还是固定的
scroll 背景图像是随对象内容滚动
fixed 背景图像固定
background‐attachment : scroll | fixed
6.6 背景简写(重点掌握)
background:属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;background: transparent url(image.jpg) repeat‐y scroll center top ;
6.7 背景透明(CSS3) 后面必须是 4个值
background: rgba(0, 0, 0, 0.3);
6.8 背景缩放 background-size
background-size 属性规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度
单位: 长度|百分比|cover|contain;
- cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
- contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
第02节:定位
注意事项:
-
一个行内的盒子,如果加了浮动、固定定位和绝对定位,
不用转换,就可以给这个盒子直接设置宽度和高度等。
-
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题
也就是说,我们给盒子改为了浮动或者定位,就不会有垂直外边距合并的问题了
定位的盒子有了边偏移才有价值。 一般情况下,凡是有定位地方必定有边偏移。
定位 = 定位模式 + 边偏移;
在 CSS 中,通过 top 、 bottom 、 left 和 right 属性定义元素的边偏移:(方位名词)
注意事项:
边偏移需要和定位模式联合使用,单独使用无效
top 和 bottom 不要同时使用;
left 和 right 不要同时使用。
边偏移属性 示例 描述 top top: 80px 顶端偏移量,定义元素相对于其父元素上边线的距离。 bottom bottom: 80px 底部偏移量,定义元素相对于其父元素下边线的距离。 left left: 80px 左侧偏移量,定义元素相对于其父元素左边线的距离 right right: 80px 右侧偏移量,定义元素相对于其父元素右边线的距离
2.1 相对定位(relative) - 重要
相对定位是元素相对于它 原来在标准流中的位置 来说的。(自恋型)
相对定位的特点:(务必记住)
- 相对于 自己原来在标准流中位置来移动的
- 原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。
2.2 绝对定位(absolute) - 重要
绝对定位的特点:(务必记住)
- 不保留原来的位置,完全是脱标的。(完全脱标 —— 完全不占位置)
- 绝对定位是元素以带有定位的父级元素来移动位置 (拼爹型)
- 父元素没有定位,则以浏览器的左上角为准定位(Document 文档)。
- 父元素要有定位:将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
定位口诀 —— 子绝父相
2.2.1 绝对定位的盒子居中
注意:绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。
在使用绝对定位时要想实现水平居中,可以按照下图的方法:
1. left: 50%; :让盒子的左侧移动到父级元素的水平中心位置; 2. margin‐left: ‐100px; :让盒子向左移动自身宽度的一半。(盒子:200*100)
2.3 固定定位(fixed) - 重要
固定定位是绝对定位的一种特殊形式: (认死理型)
固定定位的特点:(务必记住)
- 完全脱标 —— 完全不占位置;
- 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置;
- 跟父元素没有任何关系;单独使用的
- 不随滚动条滚动。
提示:IE 6 等低版本浏览器不支持固定定位。
第03节:堆叠顺序(z-index)
在使用定位布局时,可能会出现盒子重叠的情况。
加了定位的盒子,默认后来者居上, 后面的盒子会压住前面的盒子。
应用 z‐index 层叠等级属性可以调整盒子的堆叠顺序z‐index 的特性如下:
- 属性值:正整数、负整数或 0,默认值是 0,数值越大,盒子越靠上;
- 如果属性值相同,则按照书写顺序,后来居上;
- 数字后面不能加单位。
注意: z‐index 只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效
第04节:CSS高级特性
4.1 元素的显示与隐藏
4.1.1 display 显示(重点):
设置或检索对象是否及如何显示
display: none 隐藏对象 display:block 除了转换为块级元素之外,同时还有显示元素的意思
特点: 隐藏之后,不再保留位置。
功能:配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛
4.1.2 visibility 可见性 (了解)
设置或检索是否显示对象。
visibility:visible ; 对象可视 visibility:hidden; 对象隐藏
特点: 隐藏之后,继续保留原有位置。(停职留薪)
4.2 overflow 溢出(重点)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉 scroll 不管超出内容否,总是显示滚动条 auto 超出自动显示滚动条,不超出不显示滚动条 实际开发场景:
- 清除浮动
- 隐藏超出内容,隐藏掉, 不允许内容超过父盒子
4.3 CSS用户界面样式
4.3.1 鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
属性值 描述 default 小白 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止 <ul><li style="cursor:default">我是小白</li><li style="cursor:pointer">我是小手</li><li style="cursor:move">我是移动</li><li style="cursor:text">我是文本</li><li style="cursor:not‐allowed">我是文本</li> </ul>
4.3.2 轮廓线 outline
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
outline : outline‐color ||outline‐style || outline‐width
最直接的写法是 : outline: 0; 或者 outline: none;<input type="text" style="outline: 0;"/>
4.3.3 防止拖拽文本域resize
实际开发中,我们文本域右下角是不可以拖拽:
<textarea style="resize: none;"></textarea>
4.4 vertical-align 垂直对齐
vertical‐align : baseline |top |middle |bottom
注意:
- vertical-align 不影响块级元素中的内容对齐,它只针对于行内元素或者行内块元素,
- 特别是行内块元素, 通常用来控制图片/表单与文字的对齐
4.4.1 图片、表单和文字对齐
我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐
4.4.2 去除图片底侧空白缝隙
父盒子由图片撑开,图片下面会多出缝隙
原因:
- 图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。
- 就是图片底侧会有一个空白缝隙。
解决的方法就是:
- 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
- 给img 添加 display:block; 转换为块级元素就不会存在问题了。
4.4.3 文字溢出隐藏
/*1. 先强制一行内显示文本*/ white‐space: nowrap; /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text‐overflow: ellipsis;
第05节:浮动
5.1 什么是浮动(float)
概念:元素的浮动是指设置了浮动属性的元素会
- 脱离标准普通流的控制,不占位置,脱标
- 移动到指定位置。
作用
- 让多个盒子(div)水平排列成一行,使得浮动成为布局的重要手段。
- 可以实现盒子的左右对齐等等…
- 浮动最早是用来控制图片,实现文字环绕图片的效果
特性:
5.2 浮动(float)的扩展
建议:如果一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动。防止引起问题
5.2.1 浮动元素与父盒子的关系
- 子盒子的浮动参照父盒子对齐
- 不会与父盒子的边框重叠,也不会超过父盒子的内边距
5.2.2 浮动元素与兄弟盒子的关系
在一个父级盒子中,如果前一个兄弟盒子是:
- 浮动的,那么当前盒子会与前一个盒子的顶部对齐;
- 普通流的,那么当前盒子会显示在前一个兄弟盒子的下方
牢记:浮动只会影响当前的或者是后面的标准流盒子,不会影响前面的标准流
5.3 清除浮动
5.3.1 为什么要清除浮动
因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子
总结:
- 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响
- 准确地说,并不是清除浮动,而是清除浮动后造成的影响
5.3.2 清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后,
父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
5.3.3 清除浮动的方法
使用after伪元素清除浮动
:after 方式为空元素额外标签法的升级版,好处是不用单独加标签了
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }/* IE6、7 专有 */ .clearfix {*zoom: 1; }
- 优点: 符合闭合浮动思想 结构语义化正确
- 缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
- 代表网站: 百度、淘宝网、网易等
使用双伪元素清除浮动:
.clearfix:before,.clearfix:after {content:"";display:table; } .clearfix:after {clear:both; } .clearfix {*zoom:1; }
- 优点: 代码更简洁
- 缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
- 代表网站: 小米、腾讯等
5.3.4 清除浮动总结
我们以后什么时候用清除浮动呢?
- 父级没高度
- 子盒子浮动了
- 影响下面布局了,我们就应该清除浮动了。
清除浮动的方式 优点 缺点 额外标签法(隔墙法) 通俗易懂,书写方便 添加许多无意义的标签,结构化较差。 父级overflow:hidden; 书写简单 溢出隐藏 父级after伪元素 结构语义化正确 由于IE6-7不支持:after,兼容性问题 父级双伪元素 结构语义化正确 由于IE6-7不支持:after,兼容性问题 后面两种伪元素清除浮动,大家暂且会使用就好, 深入原理,我们后面学完伪元素再讲
如何使用 CSS Tree 插件
- 作用
- 将选定的HTML、JSX转化为 scss、less or css 默认为:scss
- 用法
- 选中对应的 HTML/JSX
- Ctrl + shift + p
- 选择 Generate CSS tree
vscode同时编辑多处,多个光标快捷键
- 关于颜色的css代码,把鼠标移动到这段代码上时,一个颜色选择器窗口就会显示出来,可以通过它来修改选择自己想要的颜色.
- ctrl+shift+p 调出命令面板
- alt+鼠标左键 选中多行同时编辑
- ctrl+shift+L 选中编辑代码中相同的内容
- 选中多行,按tab键可统一向右移动
- 选中文本后,Ctrl + [ 和 Ctrl + ] 可实现文本的向左移动 和 向右移动
- 选中一段文字,按shift+alt+i,在每行末尾都会出现光标
- 按shift+alt,再使用鼠标拖动,也可以出现竖直的列光标,同时可以选中多列。
- 按ctrl+f,可以搜索当前页面
css样式汇编总
- 元素添加定位之后,宽度由内容撑开了
适用:小程序
page {padding-bottom: 90rpx; }.footer_tool {position: fixed;left: 0;bottom: 0;width: 100%;height: 90rpx; }
- flex常识
作为伸缩盒子的子项,高度默认100%
view {display: flex;view {//=> 子项 高度默认100%flex: 2;} }
- 快速生成view标签
view{$}*100
常用样式
css3 渐变
1.布局小技巧
1.1 通过添加空标签,实现内容之间的间隔
<view class='height_20'></view>
.height_20{height: 20px;
}
1.2 实现下划线
<view class='height_1 gray'></view>.gray{background-color: #F0F0F0;
}
.height_1{height: 1px;
}
1.3 用一个空盒子,实现虚线效果
- 方法1:
<view class='two_amone_left_amone'></view>
.two_amone_left_amone {height: 84rpx;width: 2rpx;border: 2rpx dashed #e6e6e6;margin-left: 16rpx;
}
- 方法2:
<view class='Cost_Detailed_con'></view>
.Cost_Detailed_con::before {content: "";display: block;width: 10rpx;height: 40rpx;background: red;position: absolute;top: 0;left: -4rpx;
}.Cost_Detailed_con::after {content: "";display: block;width: 10rpx;height: 90rpx;background: red;position: absolute;bottom: 0;left: -4rpx;
}
1.内容最多不能超过2行,超出部分以省略号代替…
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
2.设置全局样式
.u-f,
.u-f-ac,
.u-f-ajc {display: flex;
}
.u-f-ac,
.u-f-ajc {align-items: center;
}
.u-f-ajc {justify-content: center;
}
.u-f-jsb {justify-content: space-between;
}
3.添加旋转动画
<image class = "rotation" />.rotation {animation: rotation 12s linear infinite;-moz-animation: rotation 12s linear infinite;-webkit-animation: rotation 12s linear infinite;-moz-animation: rotation 12s linear infinite;
}@keyframes rotation {from{transform: rotate(0deg);}to{transform: rotate(360deg);}
}
4.页面遮罩层
.modal {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 99;text-align: center;background: rgba(0,0,0,0.6);
}
5.弹性布局
<view class="musicList_container"><view class="musicList_index">左边</view><view class="musicList_info">右边占剩余空间1份</view>
</view>
为什么设置 width: 0 ?如果当前内容的宽度很大,超出父元素剩余空间,那么就不会按照 flex-grow: 1; 这个比例去分配剩余空间
这时需要设置 width: 0; 这样就不会按照原有内容的宽度分配剩余空间,
而是按照弹性盒模型设置的比例分配 flex-grow: 1.musicList_container {display: flex;align-items: center;
}
.musicList_index {width: 80rpx;
}
.musicList_info {flex-grow: 1;width: 0;
}
6.高斯模糊效果
- 方法1
image {// 高斯模糊filter: blur(10rpx);}
- 方法2
<view class="player_container" style="background:url({{picUrl}}) center/cover no-repeat"></view>
<view class="player_mask"></view>
.player_container {position: absolute;top: 0;bottom: 0;left: 0;right: 0;filter: blur(40rpx);opacity: 0.5;z-index: -1
}
.player_mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #222;z-index: -2
}
7.三角形
- 我们用css 边框可以模拟三角效果
- 宽度高度为0
- 我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了
- 为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;
<div class="myTriangle"></div>
.myTriangle {width: 0px;height: 0px;line‐height:0;font‐size: 0;border: 40px solid;border-top-color: transparent;border-left-color: transparent;border-right-color: transparent;border-bottom-color: red;
}
拓展
less专题
Less 插件
Less 编译 vocode Less 插件;Easy LESS 插件用来把less文件编译为css文件
安装完毕插件,重新加载下 vscode。只要保存一下Less文件,会自动生成CSS文件。
维护css弊端
CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。
- CSS 需要书写大量看似没有逻辑的代码,CSS 冗余度是比较高的。
- 不方便维护及扩展,不利于复用。
- CSS 没有很好的计算能力
- 非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目
Less 介绍
常见的CSS预处理器:Sass、Less、Stylus
概念:less是一种动态样式语言,属于css预处理器的范畴,它扩展了css语言,增加了变量、Mixin、函数等特性,使css更易维护和扩展。
less 中使用calc 的时候注意
height: ~‘calc(100vh - 90rpx)’;
less既可以在客户端上运行,也可以借助Node.js在服务端运行。
npm install -g less
检查是否安装成功,使用cmd命令“ lessc -v ”查看版本即可
less的中文官网
bootstrap中less教程
1. less中的注释
以//开头的注释,不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中
2. less中的变量
变量是指没有固定的值,可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
- 作为普通属性值只来使用:@变量名:值;
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
@color: pink;
div {background: @color;
}
- 作为选择器和属性名:#@{selector的值}的形式 ( 不常用 )
@m: margin;
div {@{m}: 10px;
}@span: span;
@{span}{font-size: 12px;
}
- 作为URL:@{url}
- 变量的延迟加载
@var: 0;
.class: {@var: 1;.bras {@var: 2;three: @var;@var: 3;}one: @var;
}
........................编译结果:
.class {one: 1;
}
.class .bras {three: 3;
}
........................解析:
首先在less里面的变量,都是在块级作用域里面的(一个{}代表一个作用域)
因为在less里面变量都是延迟加载的,它会等作用域里面的内容解析完毕,然后加载变量。
所以 three: 3;
3. less中的嵌套规则
- 基本嵌套规则
- 如果遇见 (交集|伪类|伪元素选择器) ,利用&进行连接;&的使用 ( **&代表平级 **)
div{background: red;span{background: blue;&:hover{background: pink;}}
}
................编译结果:
div {background: red;
}
div span {background: blue;
}
div span:hover {background: pink;
}
4 less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
- 普通混合(不常用)
- 不带输出的混合
- 带参数的混合
- 带参数并且有默认值的混合
- 带多个参数的混合
- 命名参数
- 匹配模式
- arguments变量(不常用)
-
普通混合
缺点:会编译到原生css里面,会使原生css文件变得很大!
.positions {position: fixed;top: 0;left: 0;
}.box {width: 100px;height: 100px;.box1 {.positions;width: 10px;height: 10px;}.box2 {.positions;width: 20px;height: 20px;}
}
......................编译结果:
.positions {position: fixed;top: 0;left: 0;
}
.box {width: 100px;height: 100px;
}
.box .box1 {position: fixed;top: 0;left: 0;width: 10px;height: 10px;
}.box .box2 {position: fixed;top: 0;left: 0;width: 20px;height: 20px;
}
- 不带输出的混合(编译结果:里面不再输出 .positions里面的样式)
.positions() {position: fixed;top: 0;left: 0;
}.box {width: 100px;height: 100px;.box1 {.positions;width: 10px;height: 10px;}.box2 {.positions;width: 20px;height: 20px;}
}
......................编译结果:.box {width: 100px;height: 100px;
}
.box .box1 {position: fixed;top: 0;left: 0;width: 10px;height: 10px;
}.box .box2 {position: fixed;top: 0;left: 0;width: 20px;height: 20px;
}
- 带参数的混合
.juzhong(@w,@h,@c) {width: @w;height: @h;background: @c;
}.box {width: 100px;height: 100px;.box1 {.juzhong(100px,100px,pink);font-size: 18px;}.box2 {.juzhong(200px,200px,blue);font-size: 16px;}
}
......................编译结果:.box {width: 100px;height: 100px;
}
.box .box1 {font-size: 18px;width: 100px;height: 100px;background: pink;
}.box .box2 {font-size: 16px;width: 200px;height: 200px;background: blue;
}
- 带参数并且有默认值的混合 或者 带多个参数的混合
.juzhong(@w:10px,@h:10px,@c:blue) {width: @w;height: @h;background: @c;
}.box {width: 100px;height: 100px;.box1 {.juzhong(100px,100px,pink);font-size: 18px;}.box2 {.juzhong();font-size: 16px;}
}
......................编译结果:.box {width: 100px;height: 100px;
}
.box .box1 {font-size: 18px;width: 100px;height: 100px;background: pink;
}.box .box2 {font-size: 16px;width: 10px;height: 10px;background: blue;
}
- 命名参数
.juzhong(@w:10px,@h:10px,@c:blue) {width: @w;height: @h;background: @c;
}.box {width: 100px;height: 100px;.box1 {.juzhong(@c:orange);font-size: 18px;}.box2 {.juzhong();font-size: 16px;}
}
......................编译结果:.box {width: 100px;height: 100px;
}
.box .box1 {font-size: 18px;width: 10px;height: 10px;background: orange;
}.box .box2 {font-size: 16px;width: 10px;height: 10px;background: blue;
}
- 匹配模式 (以三角形为例)
<link rel="stylesheet" type="text/css" href="index.css"><div id="wrap"><div class="jsx"></div>
</div>
新建 triangle.less文件:
// 这里的 @w,@c 是自定义的
.triangle(@_,@w,@c){ width: 0px;height: 0px;overflow: hidden;
}.triangle(left,@w,@c) {border-width: @w;border-style: dashed solid dashed dashed;border-color: transparent @c transparent transparent;
}.triangle(right,@w,@c) {border-width: @w;border-style: dashed dashed dashed solid;border-color: transparent transparent transparent @c;
}.triangle(top,@w,@c) {border-width: @w;border-style: dashed dashed solid dashed;border-color: transparent transparent @c transparent;
}.triangle(bottom,@w,@c) {border-width: @w;border-style: solid dashed dashed dashed;border-color: @c transparent transparent transparent;
}
新建 index.less文件:@import './triangle.less';#wrap .jsx {.triangle(left,40px,blue)
}
- arguments变量(不常用)
<link rel="stylesheet" type="text/css" href="index.css"><div id="wrap"><div class="jsx"></div>
</div>
.border(@1,@2,@3) {border: @arguments;
}#wrap .jsx {.border(1px,solid,pink)
}
扩展:
5. less中的运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。
/*Less 里面写*/ @witdh: 10px + 5; div {border: @witdh solid red; } /*生成的css*/ div {border: 15px solid red; } /*Less 甚至还可以这样 */ width: (@width + 5) * 2;
6. less继承
性能比混合高,灵活度比混合低
<link rel="stylesheet" type="text/css" href="index.css"><div id="wrap"><div class="inner">inner1</div><div class="inner">inner2</div></div>
新建mixin文件夹 / juzhong.less
.juzhong{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
}.juzhong:hover {background: red!important;
}
index.less文件中:* {margin: 0;padding: 0;
}@import './mixin/juzhong.less';#wrap {position: relative;width: 300px;height: 300px;border: 1px solid;margin: 0 auto;.inner {&:extend(.juzhong all);&:nth-child(1) {width: 100px;height: 100px;background: pink;}&:nth-child(2) {width: 50px;height: 50px;background: deeppink;}}
}
7. less避免编译
让浏览器去计算
calc() 函数用于动态计算长度值
* {margin: 100 - 20px;padding: ~"calc(100px + 20)"
}
sass专题
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- Javascript数据结构与算法--读后总结(2)数组
1、访问元素要访问数组里特定位置的元素,可以用中括号传递数值位置,得到想知道的值或者赋新的值。 假如我们想输出数组 arr 里的所有元素,可以通过循环遍历数组,打印元素,如下所示: for (var i = 0; i < arr.length; i++) {console.log(arr[i]);}例子:求斐波那契数列…...
2024/4/10 12:39:53 - JDBC连接MYSQL时钟问题解决方法
最近在使用JDBC连接MySql时,报如下错误is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the serverTimezone configuration property) to use a more specifc time zone value if you want to utilize tim…...
2024/4/19 14:37:11 - Nmap的使用方法以及对DC3靶机的信息搜集
目录Nmap主机发现ping扫描端口扫描默认扫描TCP全连接扫描SYN半连接扫描隐蔽扫描nmap对DC3的信息收集Nmap官网:http://nmap.org主机发现ping扫描nmap -sP 192.168.88.0/24扫描结果端口扫描默认扫描确认目标服务器开发的端口,以及端口上所运行的服务nmap 192.168.88.108nmap 19…...
2024/4/12 9:37:57 - 基于51单片机的秒表系统设计
1、设计内容由STC89C51单片机+数码管显示模块+按键模块+报警提示及指示模块等构成 具体功能: 1、秒表精度为0.01s 2、按键可以实现启动、暂停及清零; 3、可以通过按键打开或关闭提醒功能,每一秒提醒一次。2、设计方案该实验要求进行计时并在数码管上显示时间,则可利用单片机…...
2024/5/5 20:25:20 - python在vscode中调用itchat,No module named ‘itchat‘
安装环境:1.python:https://www.python.org/downloads/2.anaconda navigator:https://www.anaconda.com/products/individual3.vscode:https://code.visualstudio.com/按以上顺序安装,完成环境搭建,具体细节可以在网上搜索。症状:前提itchat是安装过的。在vscode的python文…...
2024/4/25 11:16:07 - TP5框架学习笔记
安装配置 下载压缩包,解压到本地的开发环境phpstudy 默认的入口文件是public,访问public会看到TP5成功页面。 目录 project 应用部署目录 ├─application 应用目录 │ ├─common 公共模块目录 │ ├─index 模块目录 │ │ ├─co…...
2024/4/21 15:53:43 - Jupyter notebook使用笔记
Jupyter notebook使用笔记一、修改默认工作路径1、查看jupyter notebook的默认配置文件位置在cmd中输入:jupyter notebook --generate-config2、修改文件中的显示的位置二、Jupyter 快捷键转载自:https://opus.konghy.cn/ipynb/jupyter-notebook-keyboard-shortcut.htmlJupyt…...
2024/5/3 12:20:01 - leetcode 5458. 字符串的好分割数目(C++)
给你一个字符串 s ,一个分割被称为 「好分割」 当它满足:将 s 分割成 2 个字符串 p 和 q ,它们连接起来等于 s 且 p 和 q 中不同字符的数目相同。请你返回 s 中好分割的数目。示例 1:输入:s = "aacaba" 输出:2 解释:总共有 5 种分割字符串 "aacaba"…...
2024/4/11 18:52:09 - 【文本匹配】MatchZoo的基本使用
在前序文章中分别介绍了文本匹配的基本应用场景以及两大主流匹配范式:表示型匹配模型和交互型匹配模型。本文介绍一款文本匹配的基本工具:MatchZoo,其囊括了常见的文本匹配模型,免去重复造轮子的麻烦,且提供了基于Tensorflow和Pytorch的两个版本。 本文按照【数据集准备】…...
2024/4/27 8:20:54 - 二分查找中mid值的计算方法
今天在刷leetcode中用到了二分查找,答案中给的是int mid = (right - left)/2 + left;我自己写的是int mid = (left + right) / 2;测试结果是,我的没通过,超时了,第一种则通过了,后来上网查了一下:如果用mid=(left+right)/2,在运行二分查找程序时可能溢出超时。因为如果l…...
2024/4/28 4:40:49 - JAVA GUI 初体验的准备
JDK和IDE的安装与配置 在开始创建应用程序之前,首先需要设置环境。有两种主要的工具需要安 装在你的电脑上,分别是 Java Development Kit(JDK)和 Integrated Development Environment(IDE)编辑器。” JDK和IDE去对应的官网下载,版本可以选最新的也可以凭自己喜好进行选择…...
2024/4/10 12:39:43 - 数学符号、希腊、拉丁字母、单位、标点的中英文读法
整理得很辛苦,若本文对你有帮助,请记得点赞、关注我呦! 我已尽量按标准字体输出这些符号,若有不符合该符号的写法或翻译,请在评论区留言。Ααa:lf阿尔法alpha角度;系数Ββbetabeta贝塔磁通系数;角度;系数Γγgammaga:ma伽马电导系数(小写)Δδdeltadelta德尔塔变动…...
2024/4/10 12:39:42 - 「原理分析」Spring Boot启动时基于spring.factories自动读取远端Environment实现的原理源码分析
采用Spring标准的事件/监听器模型,通过Spring SPI的方式,在Spring Boot启动时,自动读取远端「远程服务器、本地硬盘等」Environment配置,方便在Spring Boot启动前,对配置进行灵活调整,增加灵活性,减少硬编码。 本文先从原理进行分析,表明其可行性,下一篇文章再展示具体…...
2024/4/21 2:26:09 - 机器学习——《统计学习方法》学习笔记——统计学习及监督学习概论
目录1.统计学习1.1 统计学习定义1.2 统计学习流程2.统计学习分类2.1 基本分类2.1.1 监督学习2.1.2 无监督学习2.1.3 强化学习2.2 按模型分类2.2.1 概论模型与非概率模型2.2.2 线性模型与非线性模型2.2.3 参数化模型与非参数化模型2.3 按算法分类2.4 按技巧分类3.统计学习三要素…...
2024/4/10 12:39:40 - hackNos: Player v1.1靶机渗透
概述该靶机下载地址:https://www.vulnhub.com/entry/hacknos-player-v11,459/准备事项:在vulnhub下载的靶机很多时候都无法获得ip地址,这个问题困扰我很久,今天我探寻到一个有效的解决办法https://blog.csdn.net/asstart/article/details/103433065?utm_source=appip地址操…...
2024/4/10 12:39:39 - SpringCloud项目架构
common包:公共组件包flatform:注册中心,配置中心,平台组件domain:微服务模块...
2024/4/10 12:39:39 - Python语言程序设计(4)——数字类型
数字类型 1 数字类型的表示方法 表示数字或数值的数据类型称为数字类型。Python 内置的数字类型有整型(int)、浮点型(float)、复数类型( complex),它们分别对应数学中的整数、小数和复数,此外,还有一种比较特殊的整型——布尔类型(bool)。下面针对Python中的这4种数字类型分…...
2024/4/26 12:24:06 - pxeLinux我的第一篇博客
pxeLinux我的第一篇博客PXELINUX单系统网络装机 ##网络装机 优势:规模化 :同时装配多台主机 自动化 :装系统配置各种服务 远程实现:不需要光盘,U盘,等物理介质 PXE:预启动执行的环境,在装机系统之前运行,可远程安装 per-boot execution Emironment 工作模式:…...
2024/4/21 22:06:29 - 设计模式——简单工厂模式
设计模式——简单工厂模式 1.适用范围:工厂类负责创建的对象较少的场景,且客户端只需要传入工厂类的参数,对如何创建对象不关心。 2.缺点:工厂类的职责过重,不易于扩展过于复杂的产品结构。 3.实例: //动物接口 public interface Animal {public void play(); }//猫类 pu…...
2024/4/23 9:45:39 - Java代码解决输出多种图形
//打印空心菱形 public class PrintPic7 {public static void main(String[] args) {//行数for (int i = 1; i <=5; i++) {//空格for (int j = 1; j <=5-i; j++) {System.out.print(" ");}//列数:星星for (int j = 1; j <=2*i-1; j++) {if (j==1 || j==2*i…...
2024/5/4 20:06:03
最新文章
- 【Linux】目录和文件相关的命令,补充:centos7系统目录结构
【Linux】Linux操作系统的设计理念之一就是“一切皆文件”(Everything is a file),即将设备、文件等都当作“文件”处理。 “文件”主要类型有:目录(即文件夹),链接文档(即快捷方式…...
2024/5/5 21:37:22 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - Go语言map、slice、channel底层实现(go面试)
slice 切片是一个引用类型,其底层实现是一个结构体,包含以下字段: ptr:一个指向底层数组的指针,指针指向数组的第一个元素。 len:切片当前包含的元素数量。 cap:切片的容量,即底层…...
2024/5/5 1:45:06 - CentOS 7查看磁盘空间
CentOS如何查看硬盘大小? CentOS是一种基于Linux的操作系统,主要用于服务器端应用。在服务器管理中,硬盘大小是一个非常重要的指标,查看硬盘大小可以帮助系统管理员有效地管理硬盘空间和避免硬盘满了的情况。 方法一:…...
2024/5/5 0:26:36 - 416. 分割等和子集问题(动态规划)
题目 题解 class Solution:def canPartition(self, nums: List[int]) -> bool:# badcaseif not nums:return True# 不能被2整除if sum(nums) % 2 ! 0:return False# 状态定义:dp[i][j]表示当背包容量为j,用前i个物品是否正好可以将背包填满ÿ…...
2024/5/5 18:19:03 - 【Java】ExcelWriter自适应宽度工具类(支持中文)
工具类 import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.CellType; import org.apache.poi.ss.usermodel.Row; import org.apache.poi.ss.usermodel.Sheet;/*** Excel工具类** author xiaoming* date 2023/11/17 10:40*/ public class ExcelUti…...
2024/5/5 12:22:20 - Spring cloud负载均衡@LoadBalanced LoadBalancerClient
LoadBalance vs Ribbon 由于Spring cloud2020之后移除了Ribbon,直接使用Spring Cloud LoadBalancer作为客户端负载均衡组件,我们讨论Spring负载均衡以Spring Cloud2020之后版本为主,学习Spring Cloud LoadBalance,暂不讨论Ribbon…...
2024/5/5 19:59:54 - TSINGSEE青犀AI智能分析+视频监控工业园区周界安全防范方案
一、背景需求分析 在工业产业园、化工园或生产制造园区中,周界防范意义重大,对园区的安全起到重要的作用。常规的安防方式是采用人员巡查,人力投入成本大而且效率低。周界一旦被破坏或入侵,会影响园区人员和资产安全,…...
2024/5/4 23:54:44 - VB.net WebBrowser网页元素抓取分析方法
在用WebBrowser编程实现网页操作自动化时,常要分析网页Html,例如网页在加载数据时,常会显示“系统处理中,请稍候..”,我们需要在数据加载完成后才能继续下一步操作,如何抓取这个信息的网页html元素变化&…...
2024/5/5 15:25:47 - 【Objective-C】Objective-C汇总
方法定义 参考:https://www.yiibai.com/objective_c/objective_c_functions.html Objective-C编程语言中方法定义的一般形式如下 - (return_type) method_name:( argumentType1 )argumentName1 joiningArgument2:( argumentType2 )argumentName2 ... joiningArgu…...
2024/5/4 23:54:49 - 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】
👨💻博客主页:花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】🌏题目描述🌏输入格…...
2024/5/4 23:54:44 - 【ES6.0】- 扩展运算符(...)
【ES6.0】- 扩展运算符... 文章目录 【ES6.0】- 扩展运算符...一、概述二、拷贝数组对象三、合并操作四、参数传递五、数组去重六、字符串转字符数组七、NodeList转数组八、解构变量九、打印日志十、总结 一、概述 **扩展运算符(...)**允许一个表达式在期望多个参数࿰…...
2024/5/4 14:46:12 - 摩根看好的前智能硬件头部品牌双11交易数据极度异常!——是模式创新还是饮鸩止渴?
文 | 螳螂观察 作者 | 李燃 双11狂欢已落下帷幕,各大品牌纷纷晒出优异的成绩单,摩根士丹利投资的智能硬件头部品牌凯迪仕也不例外。然而有爆料称,在自媒体平台发布霸榜各大榜单喜讯的凯迪仕智能锁,多个平台数据都表现出极度异常…...
2024/5/5 18:50:00 - Go语言常用命令详解(二)
文章目录 前言常用命令go bug示例参数说明 go doc示例参数说明 go env示例 go fix示例 go fmt示例 go generate示例 总结写在最后 前言 接着上一篇继续介绍Go语言的常用命令 常用命令 以下是一些常用的Go命令,这些命令可以帮助您在Go开发中进行编译、测试、运行和…...
2024/5/4 14:46:11 - 用欧拉路径判断图同构推出reverse合法性:1116T4
http://cplusoj.com/d/senior/p/SS231116D 假设我们要把 a a a 变成 b b b,我们在 a i a_i ai 和 a i 1 a_{i1} ai1 之间连边, b b b 同理,则 a a a 能变成 b b b 的充要条件是两图 A , B A,B A,B 同构。 必要性显然࿰…...
2024/5/5 2:25:33 - 【NGINX--1】基础知识
1、在 Debian/Ubuntu 上安装 NGINX 在 Debian 或 Ubuntu 机器上安装 NGINX 开源版。 更新已配置源的软件包信息,并安装一些有助于配置官方 NGINX 软件包仓库的软件包: apt-get update apt install -y curl gnupg2 ca-certificates lsb-release debian-…...
2024/5/4 21:24:42 - Hive默认分割符、存储格式与数据压缩
目录 1、Hive默认分割符2、Hive存储格式3、Hive数据压缩 1、Hive默认分割符 Hive创建表时指定的行受限(ROW FORMAT)配置标准HQL为: ... ROW FORMAT DELIMITED FIELDS TERMINATED BY \u0001 COLLECTION ITEMS TERMINATED BY , MAP KEYS TERMI…...
2024/5/5 13:14:22 - 【论文阅读】MAG:一种用于航天器遥测数据中有效异常检测的新方法
文章目录 摘要1 引言2 问题描述3 拟议框架4 所提出方法的细节A.数据预处理B.变量相关分析C.MAG模型D.异常分数 5 实验A.数据集和性能指标B.实验设置与平台C.结果和比较 6 结论 摘要 异常检测是保证航天器稳定性的关键。在航天器运行过程中,传感器和控制器产生大量周…...
2024/5/4 13:16:06 - --max-old-space-size=8192报错
vue项目运行时,如果经常运行慢,崩溃停止服务,报如下错误 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 因为在 Node 中,通过JavaScript使用内存时只能使用部分内存(64位系统&…...
2024/5/5 17:03:52 - 基于深度学习的恶意软件检测
恶意软件是指恶意软件犯罪者用来感染个人计算机或整个组织的网络的软件。 它利用目标系统漏洞,例如可以被劫持的合法软件(例如浏览器或 Web 应用程序插件)中的错误。 恶意软件渗透可能会造成灾难性的后果,包括数据被盗、勒索或网…...
2024/5/5 21:10:50 - JS原型对象prototype
让我简单的为大家介绍一下原型对象prototype吧! 使用原型实现方法共享 1.构造函数通过原型分配的函数是所有对象所 共享的。 2.JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象,所以我们也称为原型对象…...
2024/5/5 3:37:58 - C++中只能有一个实例的单例类
C中只能有一个实例的单例类 前面讨论的 President 类很不错,但存在一个缺陷:无法禁止通过实例化多个对象来创建多名总统: President One, Two, Three; 由于复制构造函数是私有的,其中每个对象都是不可复制的,但您的目…...
2024/5/4 23:54:30 - python django 小程序图书借阅源码
开发工具: PyCharm,mysql5.7,微信开发者工具 技术说明: python django html 小程序 功能介绍: 用户端: 登录注册(含授权登录) 首页显示搜索图书,轮播图࿰…...
2024/5/5 17:03:21 - 电子学会C/C++编程等级考试2022年03月(一级)真题解析
C/C++等级考试(1~8级)全部真题・点这里 第1题:双精度浮点数的输入输出 输入一个双精度浮点数,保留8位小数,输出这个浮点数。 时间限制:1000 内存限制:65536输入 只有一行,一个双精度浮点数。输出 一行,保留8位小数的浮点数。样例输入 3.1415926535798932样例输出 3.1…...
2024/5/5 15:25:31 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57