前端开发小技巧（持续收集中）
该文章主要收集前端开发小技巧，如果有疑惑问题或者错误，欢迎大家在评论区交流
1、让文字左右出现一条线
如下图，实际上就是通过左右伪类制作的，需要把主标签设置为flex盒子，然后给伪类加flex：1进行划分，左右横线就是利用伪类的上边框或者下边框制作的，只有最后给其加margin：auto xxpx; 就是使两侧边框上下居中
<div class="recycle">
<p>回收您不用的物品，捐献给更多需要的人</p>
<div>
.recycle p {
display: flex;
margin: 10px 0;
font-size: 15px;
}
.recycle p::before,
.recycle p::after {
content: "";
flex: 1;
margin: auto 50px;
border-bottom: 1px solid #cccccc;
}2、vue做swiper组件，有两个大小不同轮播图使其它们大小不一样，并设置颜色和背景
如下图，我把swiper轮播图做成组件后，应用两个不同大小的轮播图，但是有一个轮播图太小了，所以为了好看点，需要改变它的大小，但是应用于一个组件，我们需要两个轮播图箭头大小不一样，并设置上颜色和背景，只在组件里面操作css颜色就行
- home组件的html结构
都是一个外层包着内层轮播图，外层设置轮播图的大小
- home组件的css结构
关键点：我是设置了两个不同的字体大小（font-size），因为swiper轮播图的左右箭头，实际上就是字体图标，使其大小不一样，实际上大小需要你自己设置，因为我们轮播图大小不一样，当然如果你的轮播图里面还有字，建议那个字单独设置一个新的标签包着（子盒子），再设置这个新标签的字体大小，使其覆盖父盒子的字体大小。
- Carousel组件的css部分
下面 font-size 的百分比也可以自己设置，主要是父组件的那边字体大小设置关键
.swiper-slide img {
/* 继承父组件的大小宽度，这样轮播图大小就不同了 */
width: 100%;
height: 100%;
}
.swiper-button-prev:after,
.swiper-button-next:after {
/* 我们在这里改变字体大小，设置百分比，就可以使两个轮播图左右箭头不一样了 */
font-size: 40% !important;
}
.swiper-button-next,
.swiper-button-prev {
/* 这里加背景颜色，和箭头颜色，根据自己需要调 */
color: #fad6cf !important;
background-color: rgba(0, 0, 0, 0.35);
}
/* 下面是修改背景颜色一些样式 */
.swiper-button-next {
padding: 2px 6px 2px 2px;
border-radius: 10% 45% 45% 10%;
}
.swiper-button-prev {
padding: 2px 2px 2px 6px;
border-radius: 45% 10% 10% 45%;
}3、百度地图去除左下角的百度地图图标
.anchorBL {
display: none;
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-05-09，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录