css
清音啊
知识在于积累,关注点滴珍重!
展开
-
css实现吸顶效果
css吸顶效果(例如:实现滚动页面导航栏固定在顶部)主要针对需要吸顶的元素设置/* 兼容chorme */position: -webkit-sticky;position: sticky;top: 0px;示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont原创 2022-05-11 22:32:27 · 10389 阅读 · 2 评论 -
微信小程序去除按钮(button标签)默认样式
button { margin: 0; padding: 0; outline: none; border-radius: 0; background-color: transparent; line-height: inherit; width: max-content;}button::after { border: none;}实际应用时,可能margin和padding不生效,在button标签上直接style="margin:0;padding:0;".原创 2021-12-11 16:58:03 · 591 阅读 · 0 评论 -
小程序优惠券内圆角
<view class="coupon_list"> <view class="coupon_single"> <view class="coupon_single_left" style=""> </view> <view class="coupon_single_right" style=""> </view> </view></vie.原创 2021-09-06 20:53:48 · 156 阅读 · 0 评论 -
微信小程序wxml页面中,背景图片直接引用不显示,其他解决方案
微信小程序wxml页面中,使用background:url(‘’)引用图片的相对路径,但是不显示应该咋办~varsrc='images/index/top_bg.png';letsrc2=wx.getFileSystemManager().readFileSync(src,'base64');vartop_bg='data:image/jpg;base64,'+src2;this.setData({top_bg:top_bg})<view ...原创 2021-03-26 10:07:43 · 1551 阅读 · 0 评论 -
input输入框去掉默认样式
input{ background:none; outline:none; border:none; }原创 2020-09-21 15:22:35 · 3046 阅读 · 0 评论 -
css实现开红包的效果
<div id="hongbao" class="hongbao" style="display:block;" onclick=""> <div class="" style="width:60%;margin:0 auto;margin-top:4rem;"> <img style="width:100%" src="../../image/public/red_packet/text.png" alt=""> </div>.原创 2020-08-10 14:13:06 · 2392 阅读 · 0 评论 -
css文字垂直居中
<div class="" style="text-align:center;margin-top:20rpx;"> <div class="" style="background:#F9C356;width:80%;height:70rpx;margin:0 auto;border-radius:10rpx;display:flex;justify-content: space-between;line-height:70rpx;"> <text style=.原创 2020-05-22 13:58:57 · 337 阅读 · 0 评论 -
css文字图片垂直居中
<view class="" style="color:#F9C356;text-align:center;margin-top:10rpx;font-size: 32rpx;"> <text style="vertical-align:middle;">预计1个 </text> <image src="../../images/yure/gold2.png" style="width:50rpx;height:50rpx;vert.原创 2020-05-22 11:37:44 · 294 阅读 · 0 评论 -
css图片水平居中
水平居中<div class="" style="width:100%;text-align:center;"> <img src="../../images/yure/title1.png" style="display: inline-block;width:452rpx;height:126rpx;" /></div>原创 2020-05-22 10:42:30 · 227 阅读 · 0 评论 -
css设置图片文字在同一行中左右上下居中显示
.choiceness *{ display:inline-block; vertical-align:middle; align:center;}<div class="choiceness" > <img src="../image/frame1/sign.png" style="width:4.5%;"> <div class=""...原创 2020-02-22 19:56:36 · 1648 阅读 · 0 评论 -
顶部导航栏的写法
.goodsType { white-space: nowrap; overflow-x: scroll; -webkit-overflow-scrolling: touch; padding: 0.5rem 3%;}.goodsTypeitem { margin-right: 0.8rem; display: inline-block; ...原创 2020-02-22 12:59:43 · 583 阅读 · 0 评论 -
微信小程序scroll-view 隐藏滚动条
::-webkit-scrollbar{ width: 0; height: 0; color:transparent;}原创 2020-01-08 10:52:13 · 122 阅读 · 0 评论 -
页面上下两部分:主界面可以上下移动,底部固定
css: /*主区域样式*/ #main { position:absolute; bottom:0px; left:0px; width:100%; height:100%; overflow:auto; z-index:1; } ...原创 2019-11-14 16:36:16 · 328 阅读 · 0 评论 -
css文本换行加省略号
display: -webkit-box;/*控制显示行数*/-webkit-line-clamp: 2;/* 可以显示的行数,超出部分用...表示*/-webkit-box-orient: vertical;overflow: hidden;原创 2019-07-06 10:36:57 · 2344 阅读 · 0 评论 -
css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
首先我要介绍的是border-radius属性,它的作用是实现圆角边框,其中border-radius:20px;表示,一个’体‘四个角都圆滑20px,其值如果为100px那么圆角度则为最高,如果是正方体则会是一个球,依靠这个属性我们可以不用ps6的情况下,做成一个较为美观的按钮或者控件,它还拥有分别控制4个角的属性border-top-left-radius/border-top-rig...转载 2019-06-28 17:49:59 · 2185 阅读 · 0 评论