![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
檀小泡泡
希望大家多多的点赞点赞,评论
展开
-
vue中v-for循环选中点击的元素并对该元素添加样式
v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变;但是往往所有v-for循环出的元素都会变化。如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变,但是这样会导致所有的元素都会变化解决方法:使用index索引,当点击一个元素时,将该元素的index索引赋给类样式的启用变量,如果该变量和index相等时,则启用该类样式<template> <view> <view v-for="(item,index) in items" :原创 2021-01-12 23:30:27 · 1531 阅读 · 0 评论 -
background-size cover和contain的区别
cover:不会重复。会不失真的,按照原图比例,铺满屏幕。图片与屏幕比例不一致时,会溢出屏幕。contain:会重复。保证图像不失真的,按照原图比例,最大尺寸的铺到屏幕上。图片与屏幕比例不一致时,不会溢出,整张图都会在屏幕里,不足的部分重复repeat展示。...原创 2020-12-10 13:00:36 · 234 阅读 · 0 评论 -
:after/::after和:before/::before的异同
相同点都可以用来表示伪类对象,用来设置对象前的内容:before和::before写法是等效的; :after和::after写法是等效的不同点:before/:after是Css2的写法,::before/::after是Css3的写法:before/:after 的兼容性要比::before/::after好 ,不过在H5开发中建议使用::before/::after比较好注意这些伪元素 要配合content属性一起使用这些伪元素 不会出现在DOM中,所以不能通过js来操作,仅仅是在转载 2020-05-19 14:27:23 · 261 阅读 · 0 评论 -
li 多列等高的几种实现
什么是多列等高简单的说,就是多个列,但是所有列的高度都希望以最高的那个列为准。如下图,每个列的高度都靠里面的内容撑起来。但是有些情况我们需要每个列能与最高的那个列等齐。如下图:实现利用 padding、margin 来实现table 布局实现flex 布局实现来直接看看测试代码吧,可以直接复制代码,查看结果<!DOCTYPE html><html lang...转载 2020-05-08 09:34:16 · 453 阅读 · 0 评论 -
轮播图居中显示,background-image: vue在html中写:style= 变量
静态的:<div :style="{backgroundImage:'url('+require('../../assets/images/liushu.png')+')'}"></div>从后台获取的:轮播图居中:用div进行布局然后把图片设置为div的背景图 设置如下属性,让图片居中,不重复,宽度100%,这是固定高度,让它从两边切。<div clas...原创 2020-04-20 15:32:03 · 1505 阅读 · 0 评论 -
清除浮动造成影响
参考:https://www.cnblogs.com/zjf-1992/p/5898779.html如何清除浮动造成的影响???块级div元素包含一个内联img元素,此时div的高应该是图片img撑开的高度,当设置了图片img元素设置浮动后,div高度就会坍塌浮动的破坏性 浮动导致高度坍陷代码解决一:.cleara:after{display:block; content:''; cl...转载 2020-03-17 20:27:01 · 94 阅读 · 0 评论 -
如何让DIV中的内容左边的靠左对齐,右边的靠右对齐?
在一行里面<div><div style="float:left">sdafadsf</div><div style="float:right">adsfadfsa</div></div>原创 2020-03-17 20:05:28 · 16633 阅读 · 0 评论 -
css设置文字上下居中,一行文字居中,两行或多行文字同样居中
<div class="fl border">{{credInfo}}</div>.border{ min-width: 80px; max-width: 148px; overflow: hidden; 下面这一部分是起作用部分 height: 39px; line-height: 19.5px; display...原创 2020-02-18 16:31:17 · 791 阅读 · 0 评论 -
display:none和visible:hidden区别
(忘记在哪里参考的了,如果需要注明出处,请私信)1、display:none和visible:hidden都能把网页上某个元素隐藏起来。2、但两者有区别:●display:none —不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。●visible:hidden— 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。...原创 2020-01-21 14:10:44 · 1731 阅读 · 0 评论 -
css 梯形的三种实现方法
转自:https://blog.csdn.net/ChenXvYuan_001/article/details/85016836https://www.cnblogs.com/linsinan/p/6928734.html1 利用border加粗方式这是网上较为常见的方式,其原理就是对一个高度为0px的正方形的div的border-top进行增粗。HTML:<div class="...转载 2019-11-25 18:10:02 · 8505 阅读 · 0 评论 -
css动画 实现落叶效果
实现叶子的下落效果:旋转和降落。直接上代码:<div class="con"> <img src="img/yeluobig.png" id="yeluobig"/> <img src="img/yeluolit1.png" id="yeluolit1"/> <img src="img/yeluolit2.png" id="yel...转载 2019-11-21 15:37:16 · 875 阅读 · 0 评论 -
css transform属性
div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg); /* Safari 和 Chrome */-o-transform:rotate(7deg); /* O...原创 2019-11-21 11:26:36 · 82 阅读 · 0 评论 -
CSS样式的状态hover、focus、active、link、visited详解
CSS 又名层叠样式表,是一种伪类用于向某些选择的容器添加特殊的效果,所谓层叠,就是后面的样式会覆盖前面的样式,所以不同的排列顺序可能会有不同的显示效果。下面介绍几个关于连接按钮效果的关键样式属性:1 link控制未访问时的显示效果2 hover鼠标悬停和划过时的显示效果3 visited 访问过后的显示效果4 active 控制按钮被点击时的显示效果。当所指定的元素处于激活状态(...转载 2019-11-21 11:12:36 · 18012 阅读 · 0 评论 -
js禁止、允许 页面滚动
禁止页面滚动:document.body.style.overflow='hidden'允许页面滚动:document.body.style.overflow='visible'原创 2019-11-12 17:22:04 · 3508 阅读 · 0 评论 -
css如何设置透明度?两种方法
一、css rgba()设置颜色透明度语法:rgba(R,G,B,A);RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。rgba()里的值的介绍:R:红色值。正整数 (0~255)G:绿色值。正整数 (0~255)B:蓝色值。...转载 2019-11-08 15:44:22 · 1556 阅读 · 0 评论 -
Mint给某个页面的messagebox加特殊样式
Mint UI框架中,想给其中一个页面的messagebox加背景灯样式,但是一旦设置公共类“.mint-msgbox”,其它页面的messagebox也会出现同样的样式,所以给它动态的加一个类,用于选择元素,设置样式。背景知识:下面介绍一下如何给一个节点添加和删除class名添加:节点.classList.add(“类名”);删除:节点.classList.remove(“类名”);J...原创 2019-10-21 18:29:12 · 601 阅读 · 0 评论 -
css3自适应布局单位vw,vh
转自https://www.cnblogs.com/luxiaoxing/p/7544375.html视口单位(Viewport units)什么是视口?在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。视口单位中的“视口”,桌面...原创 2019-06-03 10:37:11 · 369 阅读 · 0 评论 -
灵活的css
1 不同情况下显示不同的类:<div v-for="(mannger,index) in managerInfo" :key="index" :class="index%2==0?'':'thirdBack'">2* :class * :class="a" * :class="{classA : isA, classB : isB}" * :class="[clas...原创 2019-06-11 14:38:25 · 136 阅读 · 0 评论 -
common.css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}fieldset,img{border:0;}li{list-style:none;}h1,h2,h3,h4,h5,h6{font-si...原创 2019-07-02 16:18:25 · 1058 阅读 · 0 评论 -
解决 flex align-items:center 无法居中(微信小程序)
转自:https://www.cnblogs.com/zzd0916/p/7218451.html 进击的小牛牛因为最近再做小程序,需要用到flex布局,因为写惯了web项目,初次学习确实感弹性布局的强大(关键是不用再管可恶的ie了)。但是也遇到了align-items:center无法居中的问题,想了很久终于找到了解决办法。解决方法:1.确定好自己的主轴方向是不是row,如果是co...转载 2019-07-16 09:38:06 · 12677 阅读 · 2 评论 -
css对齐方式
1、被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center /left/right 来实现的。button、input、select、textarea、img、progress、2、当被设置元素为块状元素时用 text-align:center 就不起作用了。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的,...原创 2019-07-24 11:22:25 · 2420 阅读 · 0 评论 -
纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
转自:https://www.cnblogs.com/ming1025/p/7363074.html今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者...原创 2019-07-26 10:27:49 · 202 阅读 · 0 评论 -
background-image移动端的兼容性
不识别方位词:top等 background-image: -webkit-linear-gradient( 0deg,#CBB9E8 0%, #9DB5FC 100%); /* Safari 5.1 - 6.0 */ background-image: -o-linear-gradient(0deg,#CBB9E8 0%, #9DB5FC 100%); /* Opera 11.1 - 12....原创 2019-08-15 09:48:08 · 1952 阅读 · 1 评论 -
vue中的ref属性
首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值。通俗的将就类似于原生js用document.getElementById("#id")但是只是类似,他们的不同点是Vue是操控虚拟DOM ,也就是说在渲染初期并没有这个ref的属性,这个属性是在创建Vue实例以后才被加到虚拟DOM中的。所以在官方文档的最后提醒开发者不能将ref的结果在模版...原创 2019-08-15 16:13:14 · 509 阅读 · 0 评论 -
同时使用background-size:cover和background-attachment:fixed图片显示效果改变的原因
<html><head><style>body,ul,li{margin: 0; padding: 0;}.wrap{ width: 100%; height: 60px;}.img{ width: 100%; height: 60px; background-image: url(1.jpg); ba...原创 2019-09-05 17:01:32 · 3468 阅读 · 0 评论 -
input 、textarea 改变placeholder的字体颜色
.continue textarea::-webkit-input-placeholder { /* WebKit browsers */ color: #999999; font-size: 12px; font-family: PingFang-SC-Regular; } .continue textarea:-moz-placeholder { ...原创 2019-09-26 10:56:48 · 152 阅读 · 0 评论 -
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
转自http://www.divcss5.com/wenji/w415.shtml1、隐藏超出对象宽度高度文字内容假如我们在一个布局中为了美观对齐,有时我们需要设置了对象高宽后就固定了,这个时候需要实现无论多少内容文字都不要超出设置宽度高度布局,这个时候我们需要overflow:hidden帮忙。CSS代码: ...转载 2019-04-29 09:33:58 · 1588 阅读 · 0 评论