一、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. UiPath官方视频Level1

    [UiPath官方视频Level1]第一课-UiPath简介https://www.bilibili.com/video/BV1zJ41187vB [UiPath官方视频Level1]第二课-变量和数 ...

  2. UiPath循环活动While的介绍和使用

    一.While循环的介绍 先判断条件是否满足, 如果满足, 再执行循环体, 直到判断条件不满足,则跳出循环 二.While循环在UiPath中的使用 1. 打开设计器,在设计库中新建一个Flowcha ...

  3. java常见的面试题(一)

    1.Collection 和 Collections 有什么区别? Collection 是一个集合接口(集合类的一个顶级接口).它提供了对集合对象进行基本操作的通用接口方法.Collection接口 ...

  4. 把excel的数据导入到SQLSERVER里面,excel的字符串时间在导入sql库显示datetime 数据类型的转换产生一个超出范围的值

    这是我Excel导入的数据,准备把这个varchar(50)时间导入我的userInfo表中的出生日期字段datatime,如果你的数据正常,是可以导入的, 但是有些日期可能超出datatime的最大 ...

  5. 总结vue 需要掌握的知识点

    使用的开发工具是webstorm,它是默认就安装好了vuejs插件,idea要使用的话,需要安装一下该插件 一.快速搭建项目vue-cli 脚手架(Vue2.0) 1.Vue CLI使用前提 –Nod ...

  6. surging作者出具压测结果

    前言 首先回应下@wen-wen 所贴的压测报告,我也把我和客户压测碰到的问题,和压测结果贴出来,这个结果是由客户提供的.不会有任何的舞弊手脚问题 问题一:Task.Run慎用 首先在最新的社区版本已 ...

  7. 循环队列(严3.30)--------西工大NOJ习题.9

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> typedef struct _Q ...

  8. 5.1 从C到C++

    在前4章中介绍了C语言的主要内容,已经足以应付许多算法竞赛的题目了,然而能写不代表好写,有些虽然能够用C语言实现,但是使用C++写起来往往会更快,并且不容易出错 从c到c++ C语言是一门很有用的语言 ...

  9. 分享一个WPF 实现 Windows 软件快捷小工具

    分享一个WPF 实现 Windows 软件快捷小工具 Windows 软件快捷小工具 作者:WPFDevelopersOrg 原文链接:https://github.com/WPFDevelopers ...

  10. python常用功能模块

    路径相关:os.pathlib Windows注册表相关:winreg 系统cpu.内存.线程相关:psutil 文件.文件夹处理:shutil 解析和生成ini文件:ConfigParser:(co ...