![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
南城夏季
一路浅行
展开
-
css画一个缺了右边三角形的长方形
画一个缺了右边三角形的长方形。原创 2024-05-17 17:44:56 · 288 阅读 · 0 评论 -
iview table sortable排序不正确
解决方案问题方法注意点问题排序过程中发现有的项,倒序没问题,正序排序会有几个是乱的,暂时没明白是什么原因造成的。方法 { title: '周排名', key: 'thisWeekRank', sortable: true, //配置排序 align: 'center',原创 2021-01-28 11:35:48 · 964 阅读 · 0 评论 -
css 画半圆按钮
方式1:半圆的颜色和主内容的颜色一样css: 这是小程序的样式,在网页上把rpx换成px.nav-top{ text-align: center; background: #FFE6E6; width:530rpx; margin: 0 auto; border-radius: 30rpx; .btn-nav { width: 170rpx; text-align: center; height: 60rpx;原创 2020-12-05 13:46:13 · 1683 阅读 · 0 评论 -
less的常用语法总结和案例
1.变量常用于定义属性值,让我们可以统一维护和修改,减少重复的操作。@brightRed: #FF3163; //定义属性值值的变量// 亮红色.brightRed { color: @brightRed; //使用变量}2.混合多个元素有相同的属性时,可以将公共的属性抽离出来,然后引入。2-1:直接混合.tool-row { //公共样式,add-receiving-address和del-address都拥有的样式 height: 42px;.原创 2020-10-10 12:10:16 · 717 阅读 · 0 评论 -
css 修改输入框激活的边框样式,css样式修改集合
1.输入框激活的边框样式input:focus { border: 1px solid #ddd; outline: none; }原创 2020-09-29 10:54:19 · 4205 阅读 · 0 评论 -
console.log 控制台怎么打印有颜色的特殊的字
先看效果:使用:console.log('%c 1','color:red')console.log('%c 1','color:green')console.log('%c 1','color:green;font-size:30px;background:#ddd')打印的时候,%c 后面加打印的内容, 后面直接写css样式就可以...原创 2020-09-25 14:53:26 · 2075 阅读 · 0 评论 -
css 如何让图片铺满整个容器,比例不变,且不被裁剪
.first-screen-modal{ //父容器 position: absolute; left: 0; top: 0; right:0; height: 800px; width: 600px; z-index: 100; margin: 100px 75px 306px 75px; .photo-bg{ //背景图对应的div background-image: url(images/rest.png); border-radius: 1.原创 2020-09-18 17:20:33 · 7807 阅读 · 0 评论 -
vue阻止a标签的默认跳转
<a @click="gotoContent" class="page-img"></a>直接删除href属性,加上自定义的点击事件原创 2020-04-06 15:44:25 · 5775 阅读 · 0 评论 -
vue 媒体查询方式,注意从小到的顺序
// 内容区.ad-content { margin-right: auto; margin-left: auto; padding-right: 10px; padding-left: 10px;// vue 媒体查询方式,注意从小到的顺序 @media screen and (min-width: 576px) { width: 540px; }...原创 2020-04-05 13:21:20 · 660 阅读 · 0 评论 -
css怎么做一个遮罩层
利用css 的伪元素 ::before即可.jm-theme::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 135px; background: #666; opacity: .2;}...原创 2020-03-01 15:16:59 · 2650 阅读 · 0 评论 -
chrome控制台怎么看hover的样式
点击styles下面的 :hov,然后选中hover就可以了原创 2020-03-01 14:58:53 · 2237 阅读 · 1 评论 -
去掉iview中 input table button的border
。。。必须要吐槽下了,太坑啊,直接权重重置样式不生效。。。1.错误写法html中 : <Input class="jm-input" size="large" v-model="jmName" placeholder="请输入你的大名" />css中 :.ivu-input{ border: none!important; }嘿嘿,...原创 2019-09-26 23:34:33 · 838 阅读 · 0 评论 -
iview 的Dropdown 下拉菜单click点击无效
iview的文档是个坑啊!!!!!!点击事件后面要加个修饰符native,如@click.native <Dropdown> <span> 在线制作 <Icon type="ios-arrow-down"></Icon> </span> ...原创 2019-08-03 17:08:40 · 4287 阅读 · 4 评论 -
2019js前端面试最全集合
一、html和css部分1、如何理解CSS的盒子模型?标准盒子模型:宽度=内容的宽度(content)+ border + padding低版本IE盒子模型:宽度=内容宽度(content+border+padding)2、BFC?什么是 BFC BFC(Block Formatting Context)格式化上下文,是 Web 页面中盒模型布局的 CSS ...原创 2019-07-22 00:23:33 · 16336 阅读 · 2 评论 -
(业务1)vue v-for循环的时候怎么给点击项加上样式
需求:vue循环出来的价格区间表,点击一个价格区间就会筛选相应的商品,同时该区间价格数字会变颜色首先设置一个变量priceChecked,点击当前项时就把当前项的index赋值给priceChecked然后给每一项一个动态的class,如果priceChecked和当前项的index匹配的话,设置cur类名(cur定义了橙色字体),由于上面的赋值操作,点击哪一项哪一项的c...原创 2019-05-24 22:53:02 · 1560 阅读 · 0 评论 -
vue路由跳转时,总是跳转到下一个页面的底部
解决:在路由的js中写:export default new Router({ // mode: 'history', mode: 'history', scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { ...原创 2018-10-09 17:40:25 · 4186 阅读 · 0 评论 -
iview中的内置样式如何更改,iview中怎么使用框架中的类名类修改样式
这个问题真是困扰了这么久了。之前一直没查出来怎么去改,一直是通过行内样式来修改。问题:当一个元素封装了很多层时,我们无法找到里面封装的那个标签,所以无法要通过行内样式去修改。解决:方法一:直接重置样式 ---最简单的办法直接重置样式比如我们要修改iview中的封装的ivu-layout-header这个class类对应的样式先在浏览器找到影响样式的类名:iv...原创 2018-10-09 10:38:38 · 19822 阅读 · 2 评论 -
vh,vw,vmin,vmax的区别
v w :viewpoint width,视窗宽度,1 v w等于视窗宽度的1%。v h :viewpoint height,视窗高度,1 v h等于视窗高度的1%。v min :v w和v h中较小的那个。v max :v w和v h中较大的那个。相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的v min示例代码:h1 {font-size: 8vm;font-size:...原创 2018-03-30 13:43:48 · 1256 阅读 · 0 评论 -
CSS3 transition 属性
transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]默认值:看每个独立属性适用于:所有元素,包含伪对象:after和:before继承性:无检索或设置对象中的参与过渡的属性[ transition-duration...原创 2018-04-01 22:17:27 · 167 阅读 · 0 评论 -
white-space: nowrap用法
white-space: 值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。pre-wrap保留空白符序列,但是正常地进行换行。pre-line合并空白符序列,但是保留换行符。inherit规定应该从父元素继承 white-s...原创 2018-04-14 17:46:13 · 30245 阅读 · 0 评论 -
css3 box-orient 属性
水平排列 div 元素的子元素:div{width:350px;height:100px;border:1px solid black;/* Firefox */display:-moz-box;-moz-box-orient:horizontal;/* Safari、Opera 以及 Chrome */display:-webkit-box;-webkit-box-ori...原创 2018-04-02 15:15:52 · 201 阅读 · 0 评论 -
CSS媒体查询
一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度、高度和颜色。媒体查询,添加自CSS3,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身。语法媒体查询包含一个可选的媒体类型和,满足CSS3规范的条件下,包含零个或多个表达式,这些表达式描述了媒体特征,最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使...转载 2018-04-19 20:05:03 · 229 阅读 · 0 评论 -
-webkit-appearance: none解决ios样式的的不一性
先上代码:下面这个按钮其实在安卓和ios平台的显示效果是不一样的解释:-webkit-appearance属性拓展改变按钮和其他控件的外观,使其类似于原生控件。-webkit-appearance 是一个 不规范的属性 (unsupported WebKit property),它没有出现在 CSS 规范草案中。此属性非标准且渲染效果在不同浏览器下不同,有些属性值甚至不支...原创 2018-05-04 12:14:51 · 3336 阅读 · 0 评论 -
多平台开发要用的-webkit-tap-highlight-color
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。示例:设置高亮色为50%透明的红色:-webkit-tap-highlight-color: rgba(255,0,0,0.5);浏览器支持: 只有iOS(i...原创 2018-05-04 12:19:30 · 1258 阅读 · 0 评论 -
-webkit-font-smoothing: antialiased;
CSS3的一个属性,这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。-webkit-font-smoothing有三个属性none ------ 对低像素的文本比较好subpixel-antialiased ------默认值antialiased ------抗锯齿很好例子:body{-webkit-font-smoothing: antialiased;}...原创 2018-05-04 12:22:28 · 1881 阅读 · 0 评论 -
mpvue小程序里面navigator点击不跳转分析
1.一般这种情况是路径没有配置对,并且控制台会报错。2.你配置的路径是tabbar里定义的路径,控制台不报错,但是也不会跳转,这个时候如果你需要在导航和tabbar同时跳转,需要加个属性:需要注意的是,当你路径变成非tabbar路径时,需要把这个属性去掉open-type="switchTab"以下是实际代码:<navigator open-type="switchTab" url="...原创 2018-06-20 17:29:52 · 3018 阅读 · 0 评论 -
vue前后端aes url传参解密再解base64编码
需求:我们公司做机票订购服务,有自己的平台的订单,也有第三方网站向我们网站导入的用户订单,第三方导入的是通过url传参的方式导入。url会携带用户的相关信息。url里面的参数是经过aes加密和base64编码的,因此要取出里面的数据是要解密和解码的。方案:第一步:安装要依赖的js, npm install --save_dev crypto-js 然后在组件中将其引入。...原创 2018-09-05 17:04:26 · 4963 阅读 · 5 评论 -
vue 路由带参跳转时,地址栏数据参数闪现一下就消失了
这个是由于重复跳转导致:给一个标签加了router-link to “地址”, 然后又为这个标签写了一个方法,在方法里面使用路由传参,这样的话,我们跳转时就在同一个页面跳了两次。去除一个路由就行了。...原创 2018-09-13 17:12:01 · 2840 阅读 · 0 评论 -
vue-lazyload :一个简单易用的 Vue 图片延迟加载插件
介绍: vue-lazyload主要应用于图片延迟加载。包含如下的特点:小巧轻便,功能强大,易于使用 可以用于加载任何图像类型 支持Vue 1.0和Vue 2.0理解图片延迟加载:当某个网页中呈现的图片较多时,由于网络等原因,访问该网页时,所有的图片不会立马全部进行显示出来,会出现一定的网络延迟加载的现象,影响用户体验;但我们可以vue-lazyload插件来实现在图片加载的过程中,...原创 2018-09-30 09:08:13 · 2239 阅读 · 0 评论 -
使一个元素覆盖在另外一个元素之上,使得只能点击上面的元素上
<div class="text_C"> <span style="font-size: 18px;color: black;" :class="item.status==2?'greenc':''"> {{item.statusStr}} </span> <div class="detailBtn mt原创 2018-10-11 17:32:25 · 4377 阅读 · 0 评论 -
CSS background-blend-mode 属性
background-blend-mode 属性定义了背景层的混合模式(图片与颜色)。下面是代码和效果,<style>body {background-color: yellow;}div { width: 290px; height: 69px; background-size: 290px 69px; background-repeat:no-repeat; ba...原创 2018-03-30 13:22:00 · 792 阅读 · 0 评论