1、超出隐藏省略
(1) 超出一行隐藏省略
overflow: hidden;//超出文本隐藏
text-overflow: ellipsis;//溢出用省略号显示
white-space:nowrap;//溢出不换行
(2) 超出2行到n行隐藏省略
overflow: hidden;//隐藏
text-overflow: ellipsis;//
display: -webkit-box;//将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;//从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:5;//这个属性不是css的闺房属性，需要组合上面两个属性，表示显示的行数
(3) 超出3行隐藏省略
<view class="answer-big-box"> <view class="bosxr"> 风格的过客大概豆腐干反对法豆腐干豆腐干梵蒂冈地方的观点顶顶顶的广泛的德国德国风格的过客大概豆腐干反对法豆腐干豆腐干梵蒂冈地方的观点顶顶顶的广泛的德国德国 </view></view>
css
.answer-big-box { box-sizing: border-box; width: 690rpx; background-color: #f6f6f6; border-radius: 4rpx; font-size: 32rpx; line-height: 48rpx; color: #282828; margin: 0 auto; padding: 20rpx 30rpx;}
.bosxr{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; box-sizing: border-box; height: 154rpx; line-height: 48rpx;}
2.图片+背景颜色
background: #132433 url(/static/img/bg_home_navigation.a3ce25d6.png) no-repeat bottom !important;
2、transform:translate(-50%,-50%)实现水平垂直居中
translate()函数是css3的新特性，在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。
当使用：top:50%;left:50%,是以左上角为原点，故不处于中心位置
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform:translate(-50%,-50%);
方法二：
<div class="parent">
<div class="child">
dfdjfdfh
</div>
</div>
.parent {
display:
table-cell;
vertical-align:
middle;
width: 300px;
height: 100px;
text-align: center;
}
3、CSS3 animation-timing-function属性
animation-timing-function:linear;//动画从头到尾的速度是相同的
-webkit-animation-timing-function: linear;//兼容写法
animation-timing-function:ease;//默认。动画以低速开始，然后加快，在结束前变慢
-webkit-animation-timing-function: ease;//兼容写法
//animation-name:keyframname|none;属性为@keyframes动画规定名称
animation-name:voice_info_dynamic_trans;
-webkit-animation-name:voice_info_dynamic_trans;
@keyframes voice_info_dynamic_trans {
from {
/* transform: translateX(-100%); */
left: -100%;
}
to {
/* transform: translateX(0); */
left: 0%;
}
}
4、css实现上右下左箭头，双箭头就iconfont找图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.btn-box {
width: 50px;
height: 50px;
}
.public {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
/* 向右 */
.right1 {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
/* 向左 */
.left1 {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
/* 向上 */
.up1 {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
/* 向下 */
.down1 {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
</style>
<body>
<!-- 向右 -->
<div class="btn-box">
<div class="public right1">
</div>
</div>
<!-- 向下 -->
<div class="btn-box">
<div class="public down1">
</div>
</div>
<!-- 向左 -->
<div class="btn-box">
<div class="public left1">
</div>
</div>
<!-- 向上 -->
<div class="btn-box">
<div class="public up1">
</div>
</div>
</body>
</html>
5、
7.全局的基本样式
page {
background-color: #f5f5f5;
font-size: 28upx;
color: #333333;
font-family: Helvetica Neue, Helvetica, sans-serif;
}
/* ---布局CSS--- */
.flex{
display: flex;
}
.justify-center{
justify-content: center;
}
.justify-between{
justify-content: space-between;
}
.justify-around{
justify-content: space-around;
}
.align-center{
align-items: center;
}
.align-start{
align-items: flex-start;
}
.align-end{
align-items: flex-end;
}
.flex-column{
flex-direction: column;
}
.flex-shrink{
flex-shrink: 0;
}
/* ---内部白padding--- */
.padding-xs{
padding: 10rpx;
}
.padding-sm{
padding: 20rpx;
}
.padding-md{
padding: 25rpx;
}
.padding-lg{
padding: 30rpx;
}
.padding-xl{
padding: 40rpx;
}
.padding-xxl{
padding: 50rpx;
}
.padding-clear{
padding: 0;
}
/* 上 */
.padding-top-xs{
padding-top: 10rpx;
}
.padding-top-sm{
padding-top: 20rpx;
}
.padding-top-md{
padding-top: 25rpx;
}
.padding-top-lg{
padding-top: 30rpx;
}
.padding-top-xl{
padding-top: 40rpx;
}
.padding-top-xxl{
padding-top: 50rpx;
}
.padding-top-clear{
padding-top: 0;
}/* 右 */
.padding-right-xs{
padding-right: 10rpx;
}
.padding-right-sm{
padding-right: 20rpx;
}
.padding-right-md{
padding-right: 25rpx;
}
.padding-right-lg{
padding-right: 30rpx;
}
.padding-right-xl{
padding-right: 40rpx;
}
.padding-right-xxl{
padding-right: 50rpx;
}
.padding-right-clear{
padding-right: 0;
}
/* 下 */
.padding-bottom-xs{
padding-bottom: 10rpx;
}
.padding-bottom-sm{
padding-bottom: 20rpx;
}
.padding-bottom-md{
padding-bottom: 25rpx;
}
.padding-bottom-lg{
padding-bottom: 30rpx;
}
.padding-bottom-xl{
padding-bottom: 40rpx;
}
.padding-bottom-xxl{
padding-bottom: 50rpx;
}
.padding-bottom-clear{
padding-bottom: 0;
}
/* 左 */
.padding-left-xs{
padding-left: 10rpx;
}
.padding-left-sm{
padding-left: 20rpx;
}
.padding-left-md{
padding-left: 25rpx;
}
.padding-left-lg{
padding-left: 30rpx;
}
.padding-left-xl{
padding-left: 40rpx;
}
.padding-left-xxl{
padding-left: 50rpx;
}
.padding-left-clear{
padding-left: 0;
}
/* ---外边距margin--- */
.margin-xs{
margin: 10rpx;
}
.margin-sm{
margin: 20rpx;
}
.margin-md{
margin: 25rpx;
}
.margin-lg{
margin: 30rpx;
}
.margin-xl{
margin: 40rpx;
}
.margin-xxl{
margin: 50rpx;
}
.margin-clear{
margin: 0;
}
/* 上 */
.margin-top-xs{
margin-top: 10rpx;
}
.margin-top-sm{
margin-top: 20rpx;
}
.margin-top-md{
margin-top: 25rpx;
}
.margin-top-lg{
margin-top: 30rpx;
}
.margin-top-xl{
margin-top: 40rpx;
}
.margin-top-xxl{
margin-top: 50rpx;
}
.margin-top-clear{
margin-top: 0;
}/* 右 */
.margin-right-xs{
margin-right: 10rpx;
}
.margin-right-sm{
margin-right: 20rpx;
}
.margin-right-md{
margin-right: 25rpx;
}
.margin-right-lg{
margin-right: 30rpx;
}
.margin-right-xl{
margin-right: 40rpx;
}
.margin-right-xxl{
margin-right: 50rpx;
}
.margin-right-clear{
margin-right: 0;
}
/* 下 */
.margin-bottom-xs{
margin-bottom: 10rpx;
}
.margin-bottom-sm{
margin-bottom: 20rpx;
}
.margin-bottom-md{
margin-bottom: 25rpx;
}
.margin-bottom-lg{
margin-bottom: 30rpx;
}
.margin-bottom-xl{
margin-bottom: 40rpx;
}
.margin-bottom-xxl{
margin-bottom: 50rpx;
}
.margin-bottom-clear{
margin-bottom: 0;
}
/* 左 */
.margin-left-xs{
margin-left: 10rpx;
}
.margin-left-sm{
margin-left: 20rpx;
}
.margin-left-md{
margin-left: 25rpx;
}
.margin-left-lg{
margin-left: 30rpx;
}
.margin-left-xl{
margin-left: 40rpx;
}
.margin-left-xxl{
margin-left: 50rpx;
}
.margin-left-clear{
margin-left: 0;
}
/* ---颜色(根据项目主题色)--- */
.text-black{
color: #333333;
}
.text-white{
color: #FFFFFF;
}
.text-gray{
color: #888888;
}
.text-main-color{
color: #FF6100;
}
.text-second-color{
color: #FEA501;
}
.bg-main-color{
background-color: #FF6100;
color: #FFFFFF;
}
.bg-second-color{
background-color: #FEA501;
color: #FFFFFF;
}
.bg-gradual-main-second{
background-image: linear-gradient(to right,#FF6100, #FEA501);
color: #FFFFFF;
}
.bg-gradual-second-main{
background-image: linear-gradient(to right, #FEA501,#FF6100);
color: #FFFFFF;
}
/* ---圆角--- */
.border-radius-xs{
border-radius: 10rpx;
}
.border-radius-sm{
border-radius: 20rpx;
}
.border-radius-md{
border-radius: 25rpx;
}
.border-radius-lg{
border-radius: 30rpx;
}
.border-radius-xl{
border-radius: 40rpx;
}
.border-radius-circle{
border-radius: 50%;
}
