小程序 背景图片样式 阴影 子元素上下左右居中 上下居中 左右居中
小程序 css3 常用的一些样式；
一、 背景颜色半透明
- 1. 透明背景颜色样式
background:rgba(0,0,0,0.5);
- 2. 背景图片样式
background-image: url(../img/1.png) ; background-size:480rpx 146rpx; background-repeat: no-repeat; background-position:46% 10%;
- 3. 从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色
background: linear-gradient(to bottom right, red , green , blue);
- 4 . 从左到右的线性渐变，带有透明度
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
二、 阴影
- 1.文字阴影
box-shadow: 0px 2px 5px 5px #c3c3c3; text-shadow: 5px 5px 5px #FF0000;
- 2.元素边框阴影
(1).黑色阴影
-webkit-box-shadow: 0px 3px 5px 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 3px 5px 5px rgba(0, 0, 0, 0.15); box-shadow: 0px 3px 5px 5px rgba(0, 0, 0, 0.15);
(2).白色阴影：
-webkit-box-shadow: 0px 3px 5px 5px rgba(245, 241, 241, 0.5); -moz-box-shadow: 0px 3px 5px 5px rgba(247, 243, 243, 0.5); box-shadow: 0px 3px 5px 5px rgba(250, 249, 249, 0.5);
三 、 文本段落样式
- 1.超过一行后面显示省略号
overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; // （行数） -webkit-box-orient: vertical;
- 2.首行缩进
text-indent: 24px;
- 3.文字之间的间距
letter-spacing: 8px;
- 4.鼠标变为可点击的标志图标
cursor: pointer;
- 5.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行
white-space:nowra;
- 6. 使用您需要的字体
@font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf');}
- 7. 删除线
text-decoration:none; text-decoration:underline; 下划线样式 text-decoration:line-through; 删除线样式-贯穿线样式 text-decoration:overline; 上划线样式
四、 弹性盒
弹性盒的设置，是给父元素设置的
- 1. 子元素一行显示，两端对齐
display: flex; justify-content: space-between;
- 2. 子元素一行显示，平均对齐
display: flex;justify-content: space-around;);
- 3 . 子元素左右居中
display: flex; justify-content: center;;
- 4. 子元素上下居中
align-items: center;
- 5. 子元素上下左右居中
display: flex;align-items: center;justify-content: center;
.box{height: 300rpx;background: #CECECE;display: flex;justify-content: center;align-items: center;/* 方向为列 */flex-direction: column;
}
/*只是为了区分一下、*/
.box view{background: #fff;margin: 4rpx;
}
<view class="box"><view>德萨范德萨</view><view>德萨范德萨</view><view>德萨范德萨</view><view>德萨范德萨</view>
</view>
改变一下子元素的排列方向
.box{height: 300rpx;background: #CECECE;display: flex;justify-content: center;align-items: center;/* 方向为行 */flex-direction: row;
}
.box view{background: #fff;margin: 4rpx;
}
图片的一个盒子里面，上下左右居中
图片大小只和外层的盒子大小有关，不会改变图片的比例，高度宽度自适应
五、图片上下左右居中，自适应盒子的大小
.postcent{width: 100%;padding-top: 100%;text-align: center; position: relative;display: block;overflow: hidden;
}
.postcent img {padding: 10px;transition: all 0.5s;position: absolute;top: 0;left: 0;right: 0;bottom: 0;height: auto;max-height: 100%!important;max-width: 100%;margin: auto!important;vertical-align: middle;box-sizing: border-box;
}
<div class="col-xs-6 col-sm-4 col-md-3"><a href="anlidetail.html"><div class="anlilistimg"><section class="postcent"><img src="img/index/st1.png" alt=""></section><div class="anlitip"> 江湾城-地暖案例</div></div></a>
</div>
现AB两个div设置display：inline-block，出现上下错位问题，当AB里面内容为空时，错位问题消失
看了网上资料以及通过实践分析，总结如下
1.同一行的行内元素对齐方式默认是底部对齐，即vertical-align：baseline
2.对于内容为空的inline-block元素而言，该元素的基线就是它的margin底边缘，否则就是元素的内部最后一行内联元素的基线
解决方式：
1.float方式（考虑脱离流后后面元素不易控制，故不首选）
2.改变vertical-align属性。设置所有内联元素 vertical-align: top/middle/bottom; 属性，改变默认设置
在我自己的项目中将每一项排列的节点加这个，vertical-align: bottom; 就好了
小程序 背景图片样式 阴影 子元素上下左右居中 上下居中 左右居中相关推荐
- 微信小程序背景图片设置和图片自适应宽高
微信小程序背景图片设置和图片自适应宽高 我们在开发过程中经常需要对一些元素设置图片为背景图片. 网络图片: .ServiceCenter{width: 100vw;height: 40vw;margi ...
- 小程序背景图片从服务器获取,小程序之背景图片的加载
说在前面 最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,先说说关于如何解决小程序背景图片pc端调试完美不缺,而在真机调试的时候却消失不见的情况. 问题描述 最近做项目的 ...
- 解决小程序背景图片在真机上不能查看的问题
解决小程序背景图片在真机上不能查看的问题 参考文章: (1)解决小程序背景图片在真机上不能查看的问题 (2)https://www.cnblogs.com/web1/p/9018035.html 备忘 ...
- 微信小程序背景图片全屏显示
微信小程序背景图片全屏显示 很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
- 微信小程序背景图片不显示
最近学着写了一个微信小程序,可是总是是加载不出背景图片.这里先描述一下问题. 用下面这种办法声明的背景图片在本机和手机上都无法显示. .container { height: 100%; displa ...
- 关于微信小程序背景图片设置
微信小程序在 .wxss文件中不允许设置background-image :url('/img/bg.png');解决方法有如下两种 一:在 .wxss文件中设置背景图片时使用base64 网址:ht ...
- 微信小程序 背景图片base64_微信小程序背景图片显示不出来
开发小程序的时候,设置页面的背景,用到css代码:.page__bd{ width: 100%; height: 220px; background: url('../../assets/img/im ...
- 微信小程序 — 背景图片实现。
如图微信小程序背景色.上面放文字如何实现此效果.背景色设置css样式是position: relative; 文字设置css样式position: absolute; 布局wxml: <view ...
- 微信小程序背景图片background无法在手机端显示问题解决方案
之前做过一个小程序项目,页面中有背景图片,使用web开发工具调试时候背景图片能正常显示,使用真机调试及发布线上版本的时候图片不显示,刚开始以为是图片显示路径问题,后面问啦度娘后才发现微信小程序不支持背 ...
最新文章
- SQLSERVER2000同表数据复制(部分复制)
- modelsim仿真中遇到的问题
- 控件包含代码块(即 % ... %),因此无法修改控件集合。
- spray.json.JsonParser$ParsingException: Unexpected end-of-input at input index
- 2021.NET大会日程首发！行程亮点全曝光！
- linux相关英文书记,Linux常用软件（英文介绍）
- 信息学奥赛一本通C++语言——1053：最大数输出
- 软件设计师教程 第5版 下载
- 安装imageAI:
- Mybatis的四种分页方式详解
- QQ秀文字,很酷的!
- python拼音检查
- 格式化数据恢复|u盘格式化恢复
- IE8中文正式版下载
- Win7系统下文件或程序无法选择默认打开方式如何解决
- 抖音直播各类话术？开场、留人、促单互动话术合集
- 利用JapiDocs构建java接口文档（无代码侵入性）
- Metronic学习-1-替换google字体，让页面打开更流畅
- 地图的legend点击事件_3D地图的定时高亮和点击事件
- ECharts饼图单位