一、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 }

对表白墙wxss的解释的更多相关文章

  1. 对表白墙wxml文件解释

    一.index.wxml 1.代码 1 <view class="Beijingse" style="height: 100%;"> 2 <v ...

  2. 对表白墙js文件的解释

    index.js 1 Page({ 2 3 /** 4 * 页面的初始数据 5 */ 6 data: { 7 xcx_appid:"", 8 }, 9 HuoquDaohangLi ...

  3. symfony小练习-表白墙

    过上一个博客系统以及对官方示例程序的基本学习,目前对symfony的各个组件有了一定的学习,学校布置了一个表白墙任务,这里就这个任务的完成进行记录 ...........2019.3.20.22.31 ...

  4. 校园表白墙、微信表白墙、校园墙 微信小程序 JAVA 开发记录与分享

    目录 最新版表白墙博客地址 1.微信小程序前台展示 2.功能介绍 3.后台管理 4.后端语言采用 JAVA 开发 5.体验此微信小程序 扫描下方二维码 6.如何联系我或需要源码进行联系 最新版表白墙博 ...

  5. PHP表白墙网站源码

    PHP表白墙网站源码,可以做校园内的,也可以做校区间的,可封装成APP.告别QQ空间的表白墙吧. 安装简单,上传程序安装,然后设置账号密码,登陆后台切换模板手机PC都要换开启插件访问前台. 安装完成后 ...

  6. 行星万象表白墙微信小程序、社交微信小程序,后台完整,支持多区域运营,扫码体验。

    简介 中国目前大概有5000个表白墙,累计用户近3000万,是一个庞大的群体,但现在大都以微信朋友圈为基础进行信息中转,但是这种模式经营者和用户都不友好,尤其是经营者无法变现,用户无法公开评论,这些种 ...

  7. 说什么也要脱单——Python WEB开发:用Tornado框架制作简易【表白墙】网站

    先来哔哔两句:(https://jq.qq.com/?_wv=1027&k=QgGWqAVF) 今天我们要用Python做Web开发,做一个简单的[表白墙]网站.众所周知表白墙的功能普遍更多的 ...

  8. 关于高校表白App的NABCD项目分析

    N(Need,需求) 首先,针对本校男多女少 的具体情况,为广大本校大学生提供一个更加宽广的平台: 其次,针对当前各高校均有校园表白墙的实际情况,各表白墙难以整合在一起,使得信息不够集中的现状,我们小 ...

  9. 微信小程序/校园社区论坛/微信云开发/云函数

    一.框架来源 1.非常非常感谢B站up主"梦千的曾哥哥"的开源框架. 没有他就没有这个小程序.如果有想做的同学,可以直接移步他的视频那里开始学习.我水平不够,就不教具体怎么配置环境 ...

随机推荐

  1. IntelliJ IDEA 项目文件旁边都有0%classes,0% lines covered

    IntelliJ IDEA 项目文件旁边都有0%classes,0% lines covered,解决方法:http://yayihouse.com/yayishuwu/chapter/2247

  2. C# / VB.NET 将Html转为Word

    本文分享以C#程序代码为例,实现将Html文件转换Word文档的方法(附VB.NET代码).在实际转换场景中可参考本文的方法,转换前,请按照如下方法引用Word API的dll文件到Visual St ...

  3. pytorch 基础内容

    一些基础的操作: import torch as th a=th.rand(3,4) #随机数,维度为3,4的tensor b=th.rand(4)print(a)print(b) a+b tenso ...

  4. 方法引用(Method References)

    * 方法引用的使用 * * 1.使用情境:当要传递给Lambda体的操作,已经有实现的方法了,可以使用方法引用! * * 2.方法引用,本质上就是Lambda表达式,而Lambda表达式作为函数式接口 ...

  5. java-Stream的总结

    JAVA中的Stream 01.什么是Stream Stream是JDK8中引入,Stream是一个来自数据源的元素序列并支持聚合操作.可以让你以一种声明的方式处理数据,Stream 使用一种类似用 ...

  6. ReentrantLock源码详解

    前言 以前只知道ReentrantLock底层基于AQS实现,相对于(旧版本的)synchronized: 更轻量(基于CAS而不是管程),由JDK实现 可以实现公平/非公平 可中断等待 可绑定多个条 ...

  7. GFS分布式文件系统

    一.文件系统简介1.文件系统的组成接口:文件系统接口功能模块(管理.存储的工具):对对象管理里的软件集合对象及属性:(使用此文件系统的消费者)2.文件系统的作用从系统角度来看,文件系统时对文件存储设备 ...

  8. 优雅哥学 Webpack - 01 - Webpack 5 快速体验

    程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构 本文摘要:主要讲解 webpack 5 初体验.从webpack 5 初识到便写代码.优雅哥将 ...

  9. 在 Windows msys2 下编译 scryer-prolog

    by chesium 2022/7/24 深夜 参考:https://github.com/mthom/scryer-prolog/blob/master/README.md 采用 msys2 环境编 ...

  10. Linux串口编程进阶

    在<Linux串口编程>编程一文中介绍了串口应用中常用的基本操作,如:串口打开关闭.串口设置.数据收发等.本篇文章主要基于常规串口操作进行了扩充,主要介绍如下操作: Linux系统使用非标 ...