常用的css

港控/mmm° 2021-07-24 22:04 373阅读 0赞

正文：  
@keyframes -> 使 div 元素匀速向下移动    
div\{animation:myanimation 5s infinite;\} @keyframes myanimation \{from \{top:0px;\}to \{top:200px;\}\}   
注:animation ->Css3动画属性  myanimation->随便命名  infinite 可重复 ,去掉就不重复了 top可以改为宽高,或者方向 form 开始 to结束

background: linear-gradient(to bottom, \#D8D8D8,\#fff, \#D8D8D8); 上\#D8D8D8 中\#fff 下\#D8D8D8 的颜色渐变   
background:linear-gradient(\#d0d0d0, white);颜色渐变(上到下)

\-webkit-filter: grayscale(100%); filter: grayscale(100%);  滤镜 使图片变为黑白色

position: absolute;  绝对定位（相对于外面一层div的绝对定位）

text-shadow: 1px 1px 1px \#666; filter: Shadow(Color=\#666666, Direction=135, Strength=5);  文字阴影

box-shadow: 5px 5px 5px \#666; -moz-box-shadow: 5px 5px 5px \#666; -webkit-box-shadow: 5px 5px 5px \#666;   盒子阴影

position:fixed;  right: 20rpx;定位到右边  相对于浏览器窗口进行定位。

float:right; 浮动是针对上级    clear: both;清除浮动

text-decoration: line-through 原价效果(文字中间有斜杠)

display: flex;  
  justify-content: center;  
  flex-direction: column-reverse; 竖向排列并且倒序,按比例居中

display: flex;  
 flex-direction: column;  纵向  display: flex;  flex-direction: row;  横向

\\n空格  <hr />下划线    <br />空格   text-align: center;文本居中

disabled input禁用   Alt+0165 美元符号

display 属性  block，可以让行内元素表现得像块级元素一样,图片变得没有外边距  none，让生成的元素根本没有框。    
display: none;  隐藏  display: block; 显示  
display: inline  使段落生出行内框  inline-block  让块级元素变为行内元素

letter-spacing:5rpx;  字间距     
  text-align: right;  文本靠右

text-align:center; margin:0 auto; width:200rpx;  让本盒子居中,盒子内的文字也居中   margin:0 auto;需要配合宽度一起使用

width: 200rpx;   
  align-items: center;   
  display: flex;   
  margin: 0 auto; 让盒子(包括图片)居中显示

display: flex; justify-content: space-around; 让盒子(包括图片)居中显示,但是中间会留有空白(小程序貌似不能用)

margin: 0 auto; width: 25%;  
  height: 120rpx;  商品导航的效果(边距根据窗口自适应,宽度25%,会自动换行)

font-weight: bold  文本加粗  letter-spacing : 5rpx; 文字间隔

placeholder = "input提示"

<text decode="\{ \{true\}\}">&nbsp; < > & &apos; &ensp; &emsp;</text>  text可以识别

.tl\{text-align: left; ||  text-align: center;|| text-align: right; 文本对齐方式

border: 1px solid \#d0d0d0;  border-radius:10rpx; 边框加圆角

display: flex;   flex-wrap:wrap  7 让弹性盒元素在必要的时候拆行

<div style="position:relative;width:100px;height:100px;">        
<img src="" alt="" /><div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">文字</div></div>   在图片右上角显示文字

overflow: hidden;  
  text-overflow: ellipsis;  
  white-space:nowrap;  
  width:500rpx;   文本不换行并且超出宽度的文字显示省略号

width: 500rpx;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  display: -webkit-box;  
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 2;  文字超出两行省略

display: -webkit-box;  
  font-size: 28rpx;  
  color: \#000;  
  margin: 10rpx 10rpx 0 10rpx;  
  text-align: left;  
  line-height: 40rpx;  
  word-break: break-all;  
  -webkit-box-orient:

vertical;  
  -webkit-line-clamp: 2;  
  overflow: hidden;  
  text-overflow: ellipsis;width:100%;  
height: 30%;  
\-webkit-filter:blur(20px);  
z-index: -1;  
position:absolute;  虚拟背景图片

微信小程序分类导航图标的样式  
导航  
.big-logos \{  
  display: flex;  
  padding-top: 10rpx;  
  flex-direction: row;  
  flex-wrap: wrap;  
  justify-content: space-around;  
\} 智能布局for外  
.logoinfo \{  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  width: 150rpx;  
  height: 150rpx;  
\}  智能布局for内

商品  
.cont \{  
  display: flex;  
  flex-wrap: wrap;  
  margin-top: 50rpx;  
  width: 100%;  
\}

.cont .pr \{  
  background: \#fff;  
  width: 46%;  
  border: 1px solid \#ededed;  
  margin-left: 18rpx;  
\}  
html分类导航图标的样式  
.nav \{-webkit-flex-wrap: wrap;flex-wrap: wrap;\}    
.nav\_list \{display: inline-block;padding: 25px;width: 25%;height: 120px;\}

background-image:url(../img/demo.jpg); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;   背景图片,并自适应  
<marquee behavior="scroll">我是跑马灯标签</marquee>