DIV或者其他标签内的多行文本文字,默认情况下的很多时候,可能对齐方式排版的对齐方式不对,不是很好看(右侧不对齐),如图: 为了让网页美观,希望让文本两段对齐,可以使用来进行对齐 示例的代码如下: .my-div { word-wrap: anywhere; text-align:justify; } 修改后如图就两端对齐了,好看多了:  

2022-07-11 0条评论 469点热度 0人点赞 admin 阅读全文

如题,可能有一些需求(例如使用其他人的组件,不方便修改JS代码等情况),需要让CSS来控制某些超链接无法点击,例如,有以下Html代码: <a class="baidu-link" href="https://www.baidu.com">Baidu.com</a> 要使Baidu.com无法点击,可以可以给a标签加pointer-events: none; 代码如下: .baidu-link { pointer-events: none; }  

2022-05-20 0条评论 588点热度 0人点赞 admin 阅读全文

CSS给div设置透明度的方式有多种,根据自己的实际情况做选择 opacity取值是[0,1]之前的小数都可以,直接使用opacity: 0.5,意思是透明度50%,不过这种方式有个问题,就是整个div全部透明了,且div里面的内容(包括文字)也会产生透明: .my-div { opacity: 0.5; } 如果想要让div里面的内容不透明,可以使用这种方式: RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展,带…

2022-05-14 0条评论 498点热度 0人点赞 admin 阅读全文

Html里的元素将其旋转一定的角度,可以利用CSS的transform:rotate来实现,例如: .some-div { transform:rotate(-30deg); } 其中-30deg说明逆时针旋转30°,如果顺时针的角度,就是正数,根据自己的实际需求做相应的调整。

2022-05-08 0条评论 969点热度 0人点赞 admin 阅读全文

我们使用到给元素设置成display:inline-block; 例如用于同一行摆放多个元素,发现一个问题,他们之间有空隙,如下所示代码: <div style="padding: 0px;margin:0px;"> <div style="display:inline-block;background:red;width:50px;height:50px;"></div> <div style="display:inline-block;background:green;…

2022-05-06 0条评论 431点热度 0人点赞 admin 阅读全文

需要将某个buttons下面的类名是button的前几个或者后几个按钮筛选出来做特别的CSS处理。 可以利用nth-child(从前数第几个)和nth-last-child(从后数第几个) 还是以上面的例子,我们给button添加background为例: 选择前3个做处理: .buttons .button:nth-child(-n+3) { background: red; } 选择后1个(最后一个)做处理: .buttons .button:nth-last-child(-n+1) { background:…

2022-04-29 0条评论 598点热度 0人点赞 admin 阅读全文

在一行(例如一个div中)需要排多个元素,如果一行排不下的情况,我们不希望内容换行(默认情况就会换行),而是可以左右让用户进行左右滑动(滚动,例如鼠标拖动或者手指拖动),另外因为不影响美观,还希望可以隐藏横向的左右拖动滚动条。 我已经写好了h-scroll,只要给上层div加这个class就可以了。   .h-scroll { white-space: nowrap; overflow-x: scroll; overflow-y: hidden; -ms-overflow-style: none; /* …

2022-04-27 0条评论 1923点热度 0人点赞 admin 阅读全文

Html中input输入框,如果设置属性type="number"可以限制用户仅能输入数字(不过限制不能完全自定义,有自定义需求的,请查看:https://blog.terrynow.com/2022/04/20/vuejs-iview-input-allow-digits-or-specified-chars/),但是加上这个属性后,发现输入框右侧有个上下的箭头,可以给输入的数字+1后者-1,但是因为一些特定的要求,产品要求我们去掉或者隐藏这个上下箭头,如图: 可以利用css实现,Html代码如下: <in…

2022-04-24 0条评论 654点热度 0人点赞 admin 阅读全文

写CSS的是否,遇到一个需求,需要根据标签的属性(例如属性是否是某个值,是否包含某个属性,是否不包含某个属性)选择出来增加css内容。 input:not([type]), input[type='text'], input[type='password'] { /* style here */ } input[type] { /* 根据input里的是否包含type来选择 */ } input:not([type]) { /* 根据input里的属性如果不包含type来选择 */ } input:not([typ…

2022-02-17 0条评论 568点热度 0人点赞 admin 阅读全文

打开一个vue项目,里面有SASS语法,其中CSS里用到/deep/,发现编译报错,如下: ERROR Failed to compile with 1 errors 10:34:52 AM error in ./src/components/floatBtn.vue?vue&type=style&index=0&id=cacbdb20&lang=scss&scoped=true& Module build failed (from ./node_modules/sa…

2022-02-13 0条评论 4805点热度 0人点赞 admin 阅读全文