对表白墙wxss的解释

一、index.wxss

  1 /* 信息 */
  2 .Xinxi{
  3     display: flex;
  4     flex-wrap: wrap;
  5     margin: 0rpx 1%;
  6   }
  7 
  8   
  9 /* 信息列表 */
 10 .XinxiLiebiao{
 11     height: 400rpx;
 12     width: 100%;
 13     padding: 20rpx;
 14     margin: 5px 1%;
 15     border-radius: 25rpx;
 16     background-color: rgba(255, 255, 255, 0.9);
 17   
 18   }
 19   /* 信息图片边框 */
 20   .XinxiTupianBiankuang{
 21     width: 100%;
 22     height: 250rpx;
 23     display: flex;
 24     flex-direction: column;
 25     align-items: center;
 26   }
 27   .XinxiTupianBiankuang2{
 28     width: 100%;
 29     height: 250rpx;
 30   }
 31 
 32 
 33   /* 信息图片 */
 34   .XinxiTupian{
 35     width: 45%;
 36     margin: 2%;
 37     height: 230rpx; 
 38   }
 39 
 40 
 41   /* 给接收到的内容加以限制 */
 42 .neirong{
 43     /* 内容超宽不显示。末尾生硬结束，没有省略号标识*/
 44     overflow: hidden;
 45     /* 内容末尾追加省略号。 */
 46     text-overflow: ellipsis;
 47     /* 使用自适应布局方式显示 */
 48     display: -webkit-box;
 49     /* 限定最多 3 行 */
 50     -webkit-line-clamp: 3;
 51     -webkit-box-orient: vertical;
 52     margin: 20rpx;
 53     border-bottom: solid rgb(179, 179, 179) 1rpx;
 54     border-left: solid rgb(179, 179, 179) 1rpx;
 55 }
 56 
 57 
 58 /* 内容边框 */
 59 .NeirongBiankuang{
 60   height: 125rpx;
 61   width: 100%;
 62   
 63 }
 64 
 65 
 66 /* 额外信息边框 */
 67 .EwaiXinxiBiankuang{
 68   height: 30rpx;
 69   width: 100%;
 70 }
 71 
 72 
 73   /* 额外信息 */
 74   .EwaiXinxi{
 75       font-size: 24rpx;
 76       color: rgb(180, 180, 180);
 77   }
 78 
 79 
 80   /* 用于固定发布按钮 */
 81   .guding{
 82     position: fixed;
 83     right: 20rpx;
 84     bottom: 20rpx;
 85     width: 150rpx;
 86     height: 150rpx;
 87     display:flex;
 88     flex-wrap:wrap;
 89     flex-direction: column;
 90     align-items: center;
 91     border-radius: 90rpx;
 92     line-height: 40rpx;
 93     background-image: url('https://xx.uom.cn/new/img/wx7c24e1e2e2875b2e/1662456589.png');
 94   }
 95 
 96 
 97 /* 设置发布按钮文本 */
 98   .wenben{
 99       margin: 38rpx;
100     width: 80rpx;
101     height: 80rpx;
102   }

常用属性：

height：设置高度，即组件在垂直方向占用的像素为多少

width：设置宽度，即组件在水平方向占用的像素为多少

margin：外边距，在组件外面添加一块类似于领域的东西，别的组件就无法靠过来

color：设置组件内文本的颜色

background-color：设置背景色

background-image：设置背景图

boder：设置和描边有关的一切

display：flex;将布局类型设置为flex布局，下方代码是设置为flex布局并居中

  display: flex;
   flex-direction: column;
   align-items: center;

注释：以‘.’（←是一个点）开头的为class样式属性

 

二、xiangqing.wxss

 1 /* pages/wenzhang/wenzhang.wxss */
 2 /* 垂直排列 */
 3 .ChuizhiPailie{
 4     display: flex;
 5     flex-direction: column;
 6     margin: 20rpx;
 7   }
 8   /* 标题 */
 9   .Biaoti{
10     font-size: 48rpx;
11   }
12   /* 作者时间 */
13   .ShangchuangYonghu{
14     font-size: 32rpx;
15     color: rgb(192, 192, 192);
16   }
17   /* 正文 */
18   .Zhengwen{
19     font-size: 30rpx;
20     line-height: 60rpx;
21     letter-spacing: 10rpx;
22     display: flex;
23     flex-wrap: wrap;
24   }
25

三、fabu.wxss

 1   /* 按钮框架 */
 2   .fabuyeAnniu{
 3     display: flex;
 4     margin: 100rpx 0rpx;
 5     }
 6 
 7 
 8 /* 重置按钮 */
 9   .fabuyeAnniu button:nth-child(1){
10     background-color: #ffffff;
11     color: #3bd0b6;
12     width: 40vw;
13     margin: 0px 5vw 0px 5vw;
14   }
15 
16 
17   /* 发布按钮 */
18   .fabuyeAnniu button:nth-child(2){
19     background-color: #3bd0b6;
20     color: #ffffff;
21     width: 40vw;
22     margin: 0px 5vw 0px 5vw;
23     }
24 
25 
26     /* 图片上传部分 */
27 
28     /* 上传部分的按钮 */
29   .TupianShangchuanBufenAnniu{
30     width: 150rpx;
31     height: 150rpx;
32     border-style: solid;
33     border-width: 4rpx;
34     line-height: 100rpx;
35     font-size: 50rpx;
36     display: flex;
37     align-items: center;
38     justify-content: center;
39   }
40   /* 对图片列表的约束 */
41   .scTubpiandx{
42     width: 150rpx; 
43     height: 150rpx; 
44     margin: 10rpx;
45   }
46 
47 
48   /* 背景色。用于给文本框添加一个白色的背景，方便用户看清信息 */
49 .Beijingse2 view{
50     background-color: #fff;
51     padding: 10rpx ;
52 }

 

posted @ 2022-09-07 14:01  遇见lilanglang  阅读(132)  评论(0)    收藏  举报