![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
SilenceJude
多做,多想,少说话。
展开
-
CSS 使用:not(:last-child) 来选择集合中非最后一个的元素
使用:not(:last-child) 来选择集合中非最后一个的元素。<div class="zone-tab"> <img class="tab-item"/></div><style lang="less">.zone-tab { .tab-item { width: 2.2rem; height: 1.9rem; &:not(:last-child) { margin-right: 0.原创 2022-04-19 10:56:51 · 6549 阅读 · 0 评论 -
纯CSS实现横向瀑布流代码记录
<div class="container"> <div class="item" style="height: 140px"></div> <div class="item" style="height: 190px"></div> <div class="item" style="height: 170px"></div> <div class="item" style="height: 120p.转载 2021-10-12 17:51:38 · 703 阅读 · 0 评论 -
获取dom元素的真实style属性。
今天需要写一个滑动的特效,在开发的过程中发现,通过js获取dom的style样式时,style中的属性全是空字符串,而css中明明已经定义了bottom,z-index等等属性。查阅了相关资料后了解到,js获取到的dom对象的style通常是没有值得,因为我们都写在外部文件中。而dom.style这种方式获取到的样式只能是内联样式。要想获取到实际的css样式,我们需要使用以下方法,来获取实际的style样式:function getStyle (obj, attr) { if (obj.curre原创 2020-10-24 11:01:39 · 2807 阅读 · 1 评论 -
超出多行文字省略号
超出多行文字,显示为省略号。下面的3换成对应的行数。display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;原创 2020-07-30 14:49:47 · 436 阅读 · 0 评论 -
Vue项目使用less和css3的calc时计算错误问题解决方案。
起因:项目开发过程中,需要计算一个div版块的高度为100% - 0.48rem,于是很自然的想到了: .content { height: calc(100% - 0.48rem); overflow: scroll; word-wrap: break-word; word-break: normal; }打开控制台查看代码效果,却发现 高度和我预想的不对。而且99.52%这个数字似乎很眼熟,看了半天才发现99.52 = 100 - 0原创 2020-05-11 17:05:25 · 1713 阅读 · 0 评论 -
选中商品后右下角显示√号,纯css完成。
目录css代码:效果:解析:css代码: &.selected{ color: @theme; border: 0.02rem solid @theme; position: relative; transition: all 0.5s ease; ...原创 2020-04-08 17:16:53 · 1140 阅读 · 1 评论 -
echarts使用心得技巧速记速查。
速记速查。一、echarts 调整图表 位置 的方法调整画布内,图像的总体偏移位置,设置grid属性就可以了 myChart.setOption({ title:{ text:"价格指数" }, grid:{ ...原创 2019-01-08 20:24:50 · 464 阅读 · 0 评论 -
mint-ui 时间选择器Datetime Picker的用法介绍。
官方文档坑爹啊,调用mint-ui中的Datetime Picker显示,必须使用该组件的open()方法。以前版本的有介绍,新版本就压根没提这档子事,干的漂亮!下面详解一下用法!首先,你得有一个元素来控制显示选择好的数据,这里我是通过控制isClicked的布尔值来显示。year变量的值就是选择后的值。selectYear函数是用来调用组件的open()事件。isClicked属性用...原创 2019-01-08 10:02:37 · 6636 阅读 · 0 评论 -
一些CSS兼容性处理写法汇总。
一、placeholder修改样式兼容性写法:由于placeholder是h5新特性之一,目前还有兼容性问题,所以这样写以兼容各浏览器。 input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozilla Firefox ...转载 2019-01-07 22:41:53 · 1502 阅读 · 0 评论 -
移动端开发常用设置。
移动端通过css适配不同dpr的手机样式写法示例:.box{ width:375px; background-image:url('img_2x.png')}@media only screen and (-webkit-min-device-pixel-ratio:3){ .box:{ width:125px; background-image:url('img_3x.png...原创 2018-12-25 14:57:33 · 250 阅读 · 0 评论 -
多行文本垂直方向上居中方法总结
问题描述最近写项目的时候遇到个问题,数据从后台发送过来,可能是1行文本或者2行文本,要求居中显示。如果按照height=line-height的方式来做,当文本是2行的时候就会使得2行文本的间距非常大。解决办法:1.首先给需要居中的元素外面再包一层div作为父元素。2.然后设置父元素的height=line-height,按照最大可能2行的高度来设置。3.对目标子元素设置display...原创 2018-12-13 15:24:26 · 587 阅读 · 0 评论 -
移动端1像素边框问题
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的移动端1px转载 2018-08-21 14:17:54 · 3040 阅读 · 0 评论 -
stylus实现的通用clearfix清除浮层代码。
目的:清除浮层,包括内容和占位。实现:在公用css或者base.styl里面写入.clearfix display: inline-block &amp;:after display: block content: "." height: 0 line-height: 0 clear: both visibility: hidden...原创 2018-08-28 19:26:09 · 791 阅读 · 0 评论 -
经典的css sticky footer 布局
【sticky footer】 指的就是一种网页效果: 如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。 实现效果如下图。 实现—— header.vue中首先创建3个div层。detail-wrapper,detail-main,detail-close <div v-show="detailShow" class="d...原创 2018-08-28 20:41:42 · 336 阅读 · 0 评论 -
星星评分系统代码模板。
这里使用星星评分的位置是header组件,以此为例。 header.vue中代码,无关代码已经省略。&amp;lt;template&amp;gt; &amp;lt;div class=&quot;detail-wrapper clearfix&quot;&amp;gt; &amp;lt;div class=&quot;detail-main&原创 2018-08-29 16:20:20 · 1874 阅读 · 0 评论 -
超过指定宽度的文字缩略为省略号“...”特效的实现代码
css中设置为: .bulletin-wrapper position: relative height: 28px line-height: 28px padding: 0 20px 0 12px white-space: nowrap // 下面3行代码实现...效果 overflow: hidden text-overflow: ...原创 2018-08-30 14:57:23 · 573 阅读 · 0 评论 -
CSS 背景属性background简写攻略:
常用的6个属性:background-color 背景颜色: 合法的颜色值background-image 背景图像: url( )background-repeat 如何重复背景图像: no-repeat,repeat,repeat-x,repeat-ybackground-attachment 背景图像是否固定或者随着页面的其余部分滚动:fixed,scrollbackground-...原创 2018-10-22 10:03:28 · 4992 阅读 · 0 评论 -
hr如何设置样式
刚刚写了一个hr水平线,发现线条有点粗不好看。想改hr的样式,以为修改了color或者background之后就能改变水平线颜色,但是发现这样并不能完全修改颜色,会带有一点灰色。而且高度设置的1px也感觉比较粗。hr { color: red; background: red; height: 1px; margin: 30px 0;}效果如下图:其实这里因为hr是一个...原创 2018-10-23 11:25:18 · 4810 阅读 · 0 评论 -
取消a标签在移动端点击时的背景颜色
一、取消a标签在移动端点击时的蓝色-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;二、使用图片作为a标签的点击按钮时,当触发touchstart的时候,往往会有一个灰色的背景a,a:ho...转载 2018-12-13 10:42:10 · 653 阅读 · 0 评论 -
关于display:flex布局的用法
关于display:flex布局,有人了解颇深,我也是看着别人的东西学习的。display:flex的布局是什么、基本概念之类的我根本就不了解,只会用。每次看到概念之类的东西,我都是扫一眼就过去。第一个属性和用法:flex-direction我了解的方法有4个:row(水平排列)、row-revese(水平反向排列)、column(垂直排列)、column-reserve(垂直反向排列)...转载 2018-08-07 16:05:25 · 3606 阅读 · 0 评论