CSS/CSS3/LESS
苏喂苏喂苏喂su
这个作者很懒,什么都没留下…
展开
-
css美化浏览器默认滚动条样式
废话不多说,直接上代码吧//滚动条的宽度::-webkit-scrollbar { width:5px; height:5px;}//滚动条凹槽的颜色,还可以设置边框属性::-webkit-scrollbar-track-piece { // background-color:#f8f8f8; // 这个不要更加好看,如果要了这个样式,没有产生滚动条的时候都会有一个框在右侧 border-radius: 2px;}//滚动条的设置::-webkit-scrollb原创 2020-12-02 17:02:47 · 681 阅读 · 1 评论 -
css让字体平均铺满容器
<div class="label">账号</div>.label { width: 60px; height: 31px; line-height: 31px; padding-right: 10px; text-align: justify;}.label::after { display: inline-block; width: 100%; content: "";}效果原创 2020-08-25 14:32:47 · 11242 阅读 · 2 评论 -
修改input的placeholder的字体颜色
input::-webkit-input-placeholder { color: #cccccc;}原创 2020-08-25 10:32:49 · 3106 阅读 · 0 评论 -
HTML实现横向滚动
父容器必须要设置允许横向滚动,以及不换行。就是这么简单..white-space: nowrap;overflow-x: scroll;原创 2020-03-27 20:23:13 · 6374 阅读 · 1 评论 -
vue安装less
npm install less less-loader --save-dev接下来找到bulid目录下的webpack.base.conf.js并打开,找到module下的rules写下{ test: /\.less$/, loader: "style-loader!css-loader!less-loader"}...原创 2019-12-11 10:55:07 · 132 阅读 · 0 评论 -
vue设置全局css
vue设置全局css只要在main.js里引入css文件即可,如:import '@/styles/index.scss' // 全局css原创 2019-12-23 17:12:24 · 1898 阅读 · 0 评论 -
iconfont使用方法
1、进入iconfont官网:https://www.iconfont.cn/collections/index2、选择自己需要的icon,并且加入购物车3、在右上角点击进入刚才进入购物车的icon3、可以直接点击下载代码,也可以添加到项目中,然后再下载代码,都是一样的。4、将下载的代码解压缩,得到以下文件将iconfont.css、iconfont.e...原创 2019-12-23 16:56:22 · 1547 阅读 · 0 评论 -
CSS3 box-shadow笔记
语法:x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);如果只给出两个值, 这两个值将被浏览器解释为x轴上的偏移量和y轴上的偏移量如果给出了第三个值, 这第三个值将被解释为模糊半径的大小如果给出了第四个值, 这第四个值将被解释为扩展半径的大小如果没有...原创 2019-12-18 09:47:11 · 157 阅读 · 0 评论 -
css设置文本竖向显示
writing-mode: vertical-rl;-webkit-writing-mode: vertical-rl;原创 2019-12-11 16:42:12 · 712 阅读 · 0 评论 -
修改input的光标颜色
caret-color: #333333;原创 2019-09-29 17:42:12 · 585 阅读 · 0 评论 -
animate.css使用文档
step1:下载/引入 链接:https://daneden.github.io/animate.css/ 或者使用npm: npm install animate.css --save 或者使用yarn: yarn add animate.css CDN: <link rel="stylesheet" href="https://cd...原创 2019-08-05 16:05:14 · 8699 阅读 · 0 评论 -
display: none;和 visibility:hidden;有什么区别
一、它们的相同点:都可以隐藏一个元素。二、不同点:display:none;不会占用文档流位置;visibility:hidden;占用文档流位置;三、性能:从性能上来说,display:none;会更加消耗性能,因为当你从none和其它状态来回切换的时候,实际上是需要引擎去解析,然后还会影响到文档流的排列,这样会导致页面回流。而visibility则不存在...原创 2019-08-03 14:25:11 · 487 阅读 · 0 评论 -
样式重置CSS
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, ...原创 2019-07-21 13:32:37 · 97 阅读 · 0 评论 -
响应式与自适应的区别
在网上经常看到一些博客写到响应式和自适应的区别的文章,但是看多了,就会发现很多人说的都不太一样,最后导致自己都没有搞清楚到底什么是响应式布局?什么是自适应布局?所以想在这里对自己的理解做个记录,也方便分享给大家。1、自适应:通常我们使用弹性盒子、百分比的时候,都属于自适应布局。这里简单附上一个例子。<!DOCTYPE html><html><head...原创 2019-05-15 17:44:57 · 603 阅读 · 0 评论 -
文本内容溢出显示省略号
方法很简单,就一个属性。实例<div class="userName">testUser132123132</div>.userName { width: 30px; height: 30px; overflow: hidden; text-overflow: ellipsis; /* 2019-08-27更新:...原创 2019-05-24 17:55:27 · 160 阅读 · 0 评论 -
IE和谷歌浏览器隐藏滚动条的方法
IE:在需要隐藏滚动条的元素下添加此css属性-ms-overflow-style: none;谷歌:谷歌需要隐藏滚动条,直接在样式表中写上下面的代码即可::-webkit-scrollbar { width: 0px;}...原创 2019-06-05 11:14:51 · 1058 阅读 · 0 评论 -
input如何去掉输入框获取焦点时的外边框
input去掉输入框获取焦点时的外边框,只需要设置css样式为:input { background: none; border: none; /* 重点是 outline: none; */ outline: none;}效果:只要设置了css样式为:outline: none;就可以了。...原创 2019-06-14 10:06:53 · 5524 阅读 · 0 评论 -
移动端自适应方案
大多数情况下,在开发自适应的页面或者移动端页面,都是使用vw/vh以及rem的方法,今天看到一篇文章给出的方案,试过,确实很好用,方案如下:html { font-size: 16px;}@media screen and (min-width: 375px) { html { /* iPhone6的375px尺寸作为16px基准,414px正好18px...原创 2019-07-14 14:16:41 · 177 阅读 · 0 评论 -
LESS基本用法
一:浏览器端使用直接在浏览器运行less,需要先下载一个less.js的文件来编译less文件,在官网可以下载到。下载下来的是一个压缩包,找到less.js拷贝到项目中引用。 然后创建一个style.less,style.less文件的引入,需要在less.js文件的前面,否则less.js就无法编译style.less文件的内容了。 由于浏览器同源策略的原因,直接打开会产生跨域的问题,禁...原创 2019-07-15 22:16:46 · 199 阅读 · 0 评论 -
less变量
一:如何定义变量?编写less的变量,和我们平时定义js变量的方法不太一样,在less中是使用 @ 标识符来定义变量的,如:@font-color: blue;@border-color: #ddd;这里就定义了两个变量,分别是font-color 和 border-color。二:如何使用变量使用变量的时候,也要带上@标识符,如:style.less@font-...原创 2019-07-15 22:32:55 · 2103 阅读 · 0 评论 -
less嵌套规则
目录嵌套语法优先级:伪类指令嵌套嵌套语法html<div id="container"> <section class="left"></section> <section class="center"></section> <section class="right">&...原创 2019-07-16 22:28:10 · 2253 阅读 · 0 评论 -
less运算
语法运算的语法,就是对变量的数字进行加减乘除,如:#222222 ,对这个值进行运算时,会忽略#号,只对数字运算。具体例子如下HTML<div class="content"> <p>this is content</p> <p>background-color is @color1</p> <...原创 2019-07-16 23:37:18 · 754 阅读 · 0 评论 -
css3 动画加旋转 例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3 -- 旋转动画</title> <style> .div1 { width: 500px; height: 500px; border:...原创 2019-04-11 17:39:30 · 2406 阅读 · 0 评论