对表白墙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 }
对表白墙wxss的解释的更多相关文章
- 对表白墙wxml文件解释
一.index.wxml 1.代码 1 <view class="Beijingse" style="height: 100%;"> 2 <v ...
- 对表白墙js文件的解释
index.js 1 Page({ 2 3 /** 4 * 页面的初始数据 5 */ 6 data: { 7 xcx_appid:"", 8 }, 9 HuoquDaohangLi ...
- symfony小练习-表白墙
过上一个博客系统以及对官方示例程序的基本学习,目前对symfony的各个组件有了一定的学习,学校布置了一个表白墙任务,这里就这个任务的完成进行记录 ...........2019.3.20.22.31 ...
- 校园表白墙、微信表白墙、校园墙 微信小程序 JAVA 开发记录与分享
目录 最新版表白墙博客地址 1.微信小程序前台展示 2.功能介绍 3.后台管理 4.后端语言采用 JAVA 开发 5.体验此微信小程序 扫描下方二维码 6.如何联系我或需要源码进行联系 最新版表白墙博 ...
- PHP表白墙网站源码
PHP表白墙网站源码,可以做校园内的,也可以做校区间的,可封装成APP.告别QQ空间的表白墙吧. 安装简单,上传程序安装,然后设置账号密码,登陆后台切换模板手机PC都要换开启插件访问前台. 安装完成后 ...
- 行星万象表白墙微信小程序、社交微信小程序,后台完整,支持多区域运营,扫码体验。
简介 中国目前大概有5000个表白墙,累计用户近3000万,是一个庞大的群体,但现在大都以微信朋友圈为基础进行信息中转,但是这种模式经营者和用户都不友好,尤其是经营者无法变现,用户无法公开评论,这些种 ...
- 说什么也要脱单——Python WEB开发:用Tornado框架制作简易【表白墙】网站
先来哔哔两句:(https://jq.qq.com/?_wv=1027&k=QgGWqAVF) 今天我们要用Python做Web开发,做一个简单的[表白墙]网站.众所周知表白墙的功能普遍更多的 ...
- 关于高校表白App的NABCD项目分析
N(Need,需求) 首先,针对本校男多女少 的具体情况,为广大本校大学生提供一个更加宽广的平台: 其次,针对当前各高校均有校园表白墙的实际情况,各表白墙难以整合在一起,使得信息不够集中的现状,我们小 ...
- 微信小程序/校园社区论坛/微信云开发/云函数
一.框架来源 1.非常非常感谢B站up主"梦千的曾哥哥"的开源框架. 没有他就没有这个小程序.如果有想做的同学,可以直接移步他的视频那里开始学习.我水平不够,就不教具体怎么配置环境 ...
随机推荐
- 压测工具Apache Bench的安装与使用
压测工具使用指南: Apache Bench 下载64位 压缩 cmd打开bin目录 使用abs.exe [option] http[s]://www.asb.com 来测试 其中option: -n ...
- sql-DDL-约束
约束 对表中的数据进行限定,保证数据的正确性.有效性和完整性. 6个约束 1. 主键约束Primary Key: 唯一,不能为null -- 主键约束.和唯一约束不能同时设置 1. 含义:非空且唯一 ...
- Python爬取某网站文档数据完整教程(附源码)
基本开发环境 (https://jq.qq.com/?_wv=1027&k=NofUEYzs) Python 3.6 Pycharm 相关模块的使用 (https://jq.qq.com/?_ ...
- Grammarly for Chrome-语法、用词自动检查
从语法和拼写到风格和语气,Grammarly帮助你消除写作错误,找到完美的词语来表达自己.当你在Gmail.Twitter.LinkedIn和几乎任何你发现自己在写作的地方写作时,你都会从Gramma ...
- 一个月后,我们又从 MySQL 双主切换成了主 - 从!
这是悟空的第 157 篇原创文章 官网:www.passjava.cn 你好,我是悟空. 一.遇到的坑 一个月前,我们在测试环境部署了一套 MySQL 高可用架构,也就是 MySQL 双主 + Kee ...
- Java 范例 - 定时任务
前言 JDK 有两种定时任务的实现,一种是单线程循环判断,另一种则是线程池. 定时器 java.util 包下有 Timer 类可用来实现定时任务,下面是一个简单的例子: Date date = ne ...
- docker容器数据管理
Docker容器数据卷 Docker中的数据可以存储在类似于虚拟机磁盘的介质中,在Docker中称为数据卷(Data Volume). 数据卷可以用来存储Docker应用的数据,也可以用来在Docke ...
- centos 7系统安装
1.打开VMware软件,点击创建虚拟机,默认选择,点击下一步 2.选择稍后安装,点击下一步 3.在Linux系统中选择CentOS 7 64位,点击下一步 4.选择好安装位置后,点击下一步 5.选择 ...
- Note -「0/1 Fractional Programming」
What is that? Let us pay attention to a common problem that we often meet in daily life: There are \ ...
- rust里的内存对齐
内存对齐主要遵循下面三个原则: 结构体变量的起始地址能够被其最宽的成员大小整除 结构体每个成员相对于起始地址的偏移能够被其自身大小整除,如果不能则在前一个成员后面补充字节 结构体总体大小能够被最宽的成 ...