![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
codeXml
web developer
展开
-
文字超出部分以省略号(...)代替,并显示tooltip,未超出不显示
文字超出部分以省略号(...)代替,并显示tooltip,未超出不显示原创 2022-08-02 15:46:58 · 2110 阅读 · 0 评论 -
字体大小随容器宽度自适应变化 - vue
需求:固定宽高的容器,内部文字长度不固定,字号大小需要随着文字数量的变化而变化,使得文字始终以一行撑满容器。效果如图:实现思路:拿到文字所在dom的水平宽度 childWidth,并取得其父级dom的水平宽度 parentWidth。这里需要对超出父级容器的部分缩小,所以可以用:parentWidth / childWidth = scalcVal如果文字长度超出父容器,则会得到一个介于0 ~ 1之间的值,这个值可以直接作为缩放比例使用,再结合css3的transform:scale(x.原创 2022-01-07 15:25:26 · 6485 阅读 · 1 评论 -
css3实现loading动画
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span></div>.loading { width: 76px; height: 60px; position: absolute; top: 50.原创 2021-12-29 10:34:26 · 1000 阅读 · 0 评论 -
css3多出文字用省略号表示
-webkit-line-clamp值为n,表示:显示至多n行,如果n行未显示完所有内容则以省略号(…)表示。 .Ellipsis{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }注意:该属性仅对块级元素有效。...原创 2020-10-22 13:00:52 · 453 阅读 · 0 评论 -
vue爬坑——先到a页面浏览后,跳转到b页面,发现b页面的位置自动跳转到a页面浏览的位置
可以通过监听路由变化解决如下:watch:{ '$route':function(to, from){ document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }}原创 2019-05-21 20:16:29 · 2281 阅读 · 2 评论 -
css写一个小三角
.triangle{ width: 0px; height: 0px; *width: 1.6rem; *height: 1.6rem; font-size: 0; line-height: 0; overflow: hidden; border-width: 1r...原创 2019-08-28 13:55:16 · 678 阅读 · 0 评论 -
滚动到一定位置时导航栏置顶-vue
获取距离的id元素和添加样式的元素可以是包含关系也可以是并列关系<div id='testNavBar'> <div :class='{ fixedNavbar: isfixTab }'>这是导航</div></div>或<div id='testNavBar'></div><div :class='{ fi...原创 2019-08-19 14:04:03 · 2630 阅读 · 0 评论 -
css实现图片按宽等比例缩放不变形
<div id='evalPage '> <div class='imgbox'> <img class='image__inner' src='http://https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg' /> </div></...原创 2019-07-29 10:04:09 · 6053 阅读 · 2 评论 -
微信网页静默授权获取用户信息——koa2.x
1、获取code2、通过code获取用户openid3、拿着用户的openid换取用户信息1、构造请求url如下(只能在公众号内打开):https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8888888888888888&redirect_uri=http://mascot.duapp.com/oauth2....原创 2019-06-20 15:12:37 · 2006 阅读 · 0 评论 -
vue实现按钮倒计时
效果如下,倒计时完了再成为蓝色状态实现代码:<el-button type="primary" :disabled="disable" :class="{ codeGeting:isGeting }" @click="getVerifyCode">{{getCode}}</el-button>export default { name: "demo",...原创 2019-05-31 11:57:11 · 6247 阅读 · 0 评论 -
vue2.x v-for下当点击某一个item时添加class 样式,类似于单选
动态添加class的关键是判断条件,点击某个item时设置isAdd为当前索引,以使得index == isAdd为true,就能成功添加class到我们点击的item上 <p v-for="(sel, index) in selection" :key="index" :class="{ tavActive:index == isAdd}" @click="tabCheck(ind...原创 2019-05-22 19:37:46 · 1625 阅读 · 0 评论 -
flex布局——space-between(around)最后一行不能左对齐的解决方案
分为两种情况,分别是三列及三列以上的解决办法1、三列时(图为借鉴的,懒得自己画)要实现为代码如下:<div class="box"> <div class="list" v-for="(item,index) in lists" :key="index">{{item}}</div><div>data(){ return{ ...原创 2019-05-20 22:09:20 · 9215 阅读 · 1 评论 -
纯css实现div水平方向的滑动效果
可以在这个div内左右滑动,效果如下:html结构如下:<div class="coverInfo"> <ul> <li class="itemInCovers"></li> <li class="itemInCovers"></li> <li class="itemInCovers"><...原创 2019-05-19 12:03:13 · 17135 阅读 · 0 评论 -
css自定义滚动条样式
首先了解控制滚动条样式的几个css属性,如下:::-webkit-scrollbar 控制滚动条整体的样式;::-webkit-scrollbar-thumb 控制滑块部分样式;::-webkit-scrollbar-track 控制轨道部分样式;::-webkit-scrollbar-button 滚动条的轨道的两端按钮::-webkit-scrollbar-track-pi...原创 2019-02-22 09:15:26 · 303 阅读 · 0 评论