小程序常用CSS大全

/**app.wxss**/
/* 页面主色 */

/* ****************************总页面样式开始********************************* */
/* scroll  可滚动页面默认样式 */

.f-page-s{position: fixed;width: 100%;height: 100%;overflow: overflow-y;font-family: PingFangSC-Medium, sans-serif;color: #333333;font-size: 28rpx; }
.f-page-x{position: fixed;width: 100%; height: 100%;overflow: overflow-x;font-family: PingFangSC-Medium, sans-serif;color: #333333;font-size: 28rpx; }
/* 一屏默认样式 */
.f-page{position: fixed;width: 100%;height: 100%;font-family: PingFangSC-Medium, sans-serif;color: #333333;font-size: 28rpx; }
/* ****************************总页面样式结束********************************* */
.f-position-r{position: relative;}
.f-position-f{position: fixed;}
/* ****************************display样式开始******************************** */

/* 全居中 */
.f-view-co{ display: flex;justify-content: center;align-items: center;}
/* 一列 */
.f-view-c{display: flex;flex-flow: column;}
/* 一列全居中 */
.f-view-c-c-c{display: flex;flex-flow: column;align-items: center;justify-content: center;}
/* 一列左中 */
.f-view-c-c{display: flex;flex-flow: column;align-items: center;}
/* 一行 */
.f-view-r{display: flex;flex-flow: row;}
/* 一行左中 */
.f-view-r-c{display: flex;flex-flow: row;align-items: center;}
/* 一行周游 */
.f-view-r-r{display: flex;flex-flow: row;justify-content: center;}
/* 一行全居中 */
.f-view-r-c-c{display: flex;flex-flow: row;align-items: center;justify-content: center;}
/* 一行两端齐 */
.f-view-r-c-s{display: flex;flex-flow: row;align-items: center;justify-content: space-between;}
.f-view-r-s{display: flex;flex-flow: row;justify-content: space-between;}
/* 一列两端有距离 */
.f-view-c-c-r{display: flex;flex-flow: column;align-items: center;justify-content: space-around;}
/* 一行两端有距离 */
.f-view-r-c-r{display: flex;flex-flow: row;align-items: center;justify-content: space-around;}
/* 一行右结尾 */
.f-view-r-c-e{display: flex;flex-flow: row;align-items: center;justify-content: flex-end;}
/* 一行左结尾 */
.f-view-c-c-e{display: flex;flex-flow: column;align-items: center;justify-content: flex-end;}
/*  多行左上角*/
.f-view-c{display: flex;flex-flow: column;}
/* 多行上下居中 */
.f-view-c-cu{display: flex;flex-flow: column;align-items: center;}
/* 多行左右居中 */
.f-view-c-c{display: flex;flex-flow: column;justify-content: center;}
/* 多行全居中 */
.f-view-c-c-c{display: flex;flex-flow: column;align-items: center;justify-content: center;}
/* ****************************display样式结束******************************** */
/* ****************************图标图片开始********************************** */
/* 小图标 */
.f-icon-ss{height: 24rpx;width: 24rpx;}
.f-icon-s{height: 28rpx;width: 28rpx;}
.f-icon-m{height: 32rpx;width: 32rpx;}
.f-icon-x{height: 40rpx;width: 40rpx;}
.f-icon-xx{height: 67rpx;width: 67rpx;}
.f-iconr-xxx{height: 88rpx;width: 88rpx;}
/* ****************************图标图片结束********************************** */
/* ****************************长宽样式开始********************************** */
.f-width-all{width:100%;}
.f-width-small{width:80%;}
.f-width-small-o{width:60%;}
.f-width-small-os{width:65%;}
.f-width-alls{width:90%;}
.f-width-href{width: 50%;}
.f-width-b{width: 30%;}
.f-width-b-box{width: 20%;}
.f-width-b-smb{width: 10%;}
.f-width-bs{width: 40%;}
.f-width-c{width:80%;left: 5%;}
.f-width-ss{width:60%;left: 20%;}
.f-width-sb{width:60%;left: 5%;}
.f-width-m{width:94%;left: 3%;}
.f-width-s{width:98%;left: 1%;}
.f-width-allbing{width:95%;}
.f-height-he{height: 400rpx;}
.f-height-bighe{height: 500rpx;}
.f-height-he-a{height: 300rpx;}
.f-height-he-ha{height: 200rpx;}
.f-height-he-hea{height: 150rpx;}
.f-height-he-heas{height: 100rpx;}
.f-height-he-as{height: 60rpx;}
.f-height-he-in{height: 80rpx;}
.f-height-all{height:100%;}
.f-height-href{height:50%;}
.f-height-smallhr{height:30%;}
/* ****************************长宽样式结束********************************** */
/* ****************************边框开始************************************** */
.f-border-b{border-bottom:20rpx solid #F8F8F8;}
.f-border-b-s{border-bottom: 5rpx solid #EAEAEA;}
.f-border-b-ss{border-bottom: 5rpx solid #999;}
.f-border-t-s{border-top: 1rpx solid #EAEAEA;}
.f-border-t{border-top:20rpx solid #EAEAEA;}
.f-border-r{border-right:1rpx solid #EAEAEA;}
.f-border-l{border-left:5rpx solid #EAEAEA;}
/* 圆弧 */
.f-border-r-b{border-radius: 50rpx;}
.f-border-r-q{border-radius: 100rpx;}
.f-border-r-m{border-radius: 30rpx;}
.f-border-r-s{border-radius: 10rpx;}
/* 单个圆角 */
.f-bo-t-l-r{border-top-left-radius:15rpx;}
 .f-bo-t-r-r{border-top-right-radius:15rpx;}
 .f-bo-b-r-r{border-bottom-right-radius:100rpx;}
.f-bo-b-l-r{border-bottom-left-radius:100rpx;}
 .f-bo-b-r-rs{border-bottom-right-radius:20rpx;}
.f-bo-b-l-rs{border-bottom-left-radius:20rpx;}
/* 全边框 */
.f-border-all{border:4rpx solid #41c7db;}
.f-border-all-b{border:3rpx solid #fff;}
.f-border-all-q{border:3rpx solid #E5E5E5;}
/* 阴影 */
.f-border-shawdow{ box-shadow:0px 2px 2px 1px #EAEAEA;}
/* ****************************边框结束************************************** */
/* ****************************颜色开始************************************** */
/* 颜色 */
.f-text-c-xxx{color: red;}
.f-text-c-xx{color: #666666;}
.f-text-c-x{color: #999999;}
.f-text-c-m{color: #41c7db;}
.f-text-c-s{color: #fff;}
.f-text-c-sx{color: #333;}
/* 背景颜色 */
.f-bg-c-xxx{background-color: #000;}
.f-bg-c-xx{background-color: #E5E5E5;}
.f-bg-c-x{background-color: #F8F8F8;}
.f-bg-c-m{background-color:  #41c7db;}
.f-bg-c-ms{background-color:  #57def3;}
.f-bg-c-s{background-color: #fff;}
/* ****************************颜色结束************************************** */
/* ****************************字体大小开始************************************** */
.f-text-ms{font-size: 20rpx; }
.f-text-l{font-size: 22rpx; }
.f-text-s{font-size: 24rpx; }
.f-text-m{font-size: 28rpx; }
.f-text-xm{font-size: 30rpx; }
.f-text-x{font-size: 32rpx; }
.f-text-xx{font-size: 40rpx; }
.f-text-xxx{font-size: 60rpx; }
.f-text-weight{font-weight: bold;}
/* 一行超出显示省略号 */
.f-text-ellipsis-one{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
/* 两行超出显示省略号 */
.f-text-ellipsis-more{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow:hidden;}
/* ****************************字体大小结束************************************** */
/* ****************************内外边距开始************************************** */
/* margin边距 */
.f-margin-lr-s{margin:0 10rpx;}
.f-margin-lr-ss{margin:0 5rpx;}
.f-margin-lr-b{margin:0 30rpx;}
.f-margin-lr-bs{margin:0 15rpx;}
.f-margin-tb-s{margin:10rpx auto;}
.f-margin-tb-b{margin:20rpx 0;}
.f-margin-tb-big{margin:50rpx auto;}
.f-margin-t-s{margin-top: 10rpx;}
.f-margin-t-slog{margin-top: 20rpx;}
.f-margin-l-s{margin-left: 5rpx;}
.f-margin-l-b{margin-left: 40rpx;}
.f-margin-b-s{margin-bottom: 100rpx;}
.f-margin-b-sbtm{margin-bottom: 150rpx;}
.f-margin-auto{margin:0 auto;}
.f-margin-t-r-l{margin: 10rpx 20rpx;}
.f-margin{margin: 20rpx;}
/* padding边距 */
.f-padding-lr-s{padding: 0 10rpx;}
.f-padding-lry-s{padding: 0 40rpx;}
.f-padding-tb-s{padding: 10rpx 0;}
.f-padding-tb-b{padding: 20rpx 0;}
.f-padding-tb-bb{padding: 40rpx 0;}
.f-padding-t-s{padding-top: 20rpx;}
.f-padding-a{padding: 6rpx;}
/* ****************************内外边距结束************************************** */
/* ****************************杂七杂八开始************************************** */
/* 头像 */
.head-image{width: 200rpx;height: 200rpx;}
/* 文本居中 */
.text-box-c{text-align: center}
/* 总体文本内部居中 */
.c-text{display: flex;align-items: center;vertical-align:center;justify-content: center;}
/* 轮播图 */
.f-swiper-h{height:376rpx;width: 100%;}
.f-swiper-hs{height:250rpx;width: 85%;}
/* 选中样式 */
.f-active{color: #FF544C;border-bottom: 1rpx solid #FF544C;}
/*使屏幕变暗 遮罩层 */
.f-mask {position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 100;}
/* 客服绑定手机等默认按钮去掉样式 */
.f-button-official {background-color: #FFF;padding: 0;margin: 0;font-size: inherit;}
.f-button-official::after {border: #FFF solid;}
/* 全部按钮去掉样式 */
button::after{border:none;line-height: 0;}
/* 滚动条隐藏 */
::-webkit-scrollbar {width: 0;height: 0;color: transparent;}
/* 满屏按钮 */
.f-buttom-b{position: relative;width: 100%;color: #fff;padding: 25rpx 0;font-size: 29rpx;}
/* 半屏按钮 */
.f-buttom-s{position: relative;width: 45%;color: #fff;padding: 25rpx 0;font-size: 29rpx;}
/* image{height: 100%;width: 100%} */
/* ****************************此项目自定义开始************************************** */
/* 店图片的样式 */
.shop-img-style{height: 120rpx;width: 120rpx;border-radius: 5rpx;}
.shop-img-styles{height: 150rpx;width: 150rpx;border-radius: 5rpx;}
/* 分类图片 */
.shop-img-type{height: 100rpx;width: 100rpx;}
/* 标签图片 */
.shop-img-types{height: 80rpx;width: 80rpx;}
/* 图标 */
.shop-logo-types{height: 50rpx;width: 50rpx;}
.shop-logo-smalltypes{height: 30rpx;width: 30rpx;}


/* 品牌样式 */
.brand-style{background-color:  #FADE37;color:#643903;padding: 5rpx;font-size: 23rpx;font-weight: bold;border-radius: 5rpx;}
/* 减标签 */
.sign-style{color:#fff;padding: 2rpx 6rpx;font-size: 24rpx;border-radius: 60rpx;}
/* 减 #E96F6F*/
.minus{background-color: #fff;}
/* 折 */
.break{background-color: #E16971;}
/* 首 */
.initial{background-color: #76BC4C;}
/* 特 */
.unusual{background-color: #EB8A4D;}
/* 赠 */
.present{background-color: #39CF98;}
/* 保 票 */
.sign-style-empty{border:1rpx solid #ccc;border-radius: 60rpx; padding: 1.5rpx 10rpx;font-size: 23rpx;}

.sign-style-all{background-color: #fff;color:#333;border-radius: 60rpx; padding: 2rpx 10rpx;font-size: 23rpx;}
/* 商店左部分 */
.shop-left{width: 20%}
.shop-right{width: 80%}
.shop-left-s{width: 15%}
.shop-right-s{width: 85%}
.shop-left-ss{width: 7%}
/* 阴影 */
.shawdow{ box-shadow:0px 2px 2px 1px #E5E5E5;}
.shawdows{ box-shadow:0px 2px 2px 1px #E5E5E5;}
/* 删除线 */
.manyshow{text-decoration:line-through;}
/*下划线*/
.xian{text-decoration:underline;}

最后编辑于：2019.10.30 17:15:44

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,905评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,140评论 2赞 379
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,791评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,483评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,476评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,516评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,905评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,560评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,778评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,557评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,635评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,338评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,925评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,898评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,142评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,818评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,347评论 2赞 342

小程序常用CSS大全

推荐阅读更多精彩内容