对表白墙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主"梦千的曾哥哥"的开源框架. 没有他就没有这个小程序.如果有想做的同学,可以直接移步他的视频那里开始学习.我水平不够,就不教具体怎么配置环境 ...
随机推荐
- UiPath官方视频Level1
[UiPath官方视频Level1]第一课-UiPath简介https://www.bilibili.com/video/BV1zJ41187vB [UiPath官方视频Level1]第二课-变量和数 ...
- UiPath循环活动While的介绍和使用
一.While循环的介绍 先判断条件是否满足, 如果满足, 再执行循环体, 直到判断条件不满足,则跳出循环 二.While循环在UiPath中的使用 1. 打开设计器,在设计库中新建一个Flowcha ...
- java常见的面试题(一)
1.Collection 和 Collections 有什么区别? Collection 是一个集合接口(集合类的一个顶级接口).它提供了对集合对象进行基本操作的通用接口方法.Collection接口 ...
- 把excel的数据导入到SQLSERVER里面,excel的字符串时间在导入sql库显示datetime 数据类型的转换产生一个超出范围的值
这是我Excel导入的数据,准备把这个varchar(50)时间导入我的userInfo表中的出生日期字段datatime,如果你的数据正常,是可以导入的, 但是有些日期可能超出datatime的最大 ...
- 总结vue 需要掌握的知识点
使用的开发工具是webstorm,它是默认就安装好了vuejs插件,idea要使用的话,需要安装一下该插件 一.快速搭建项目vue-cli 脚手架(Vue2.0) 1.Vue CLI使用前提 –Nod ...
- surging作者出具压测结果
前言 首先回应下@wen-wen 所贴的压测报告,我也把我和客户压测碰到的问题,和压测结果贴出来,这个结果是由客户提供的.不会有任何的舞弊手脚问题 问题一:Task.Run慎用 首先在最新的社区版本已 ...
- 循环队列(严3.30)--------西工大NOJ习题.9
#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> typedef struct _Q ...
- 5.1 从C到C++
在前4章中介绍了C语言的主要内容,已经足以应付许多算法竞赛的题目了,然而能写不代表好写,有些虽然能够用C语言实现,但是使用C++写起来往往会更快,并且不容易出错 从c到c++ C语言是一门很有用的语言 ...
- 分享一个WPF 实现 Windows 软件快捷小工具
分享一个WPF 实现 Windows 软件快捷小工具 Windows 软件快捷小工具 作者:WPFDevelopersOrg 原文链接:https://github.com/WPFDevelopers ...
- python常用功能模块
路径相关:os.pathlib Windows注册表相关:winreg 系统cpu.内存.线程相关:psutil 文件.文件夹处理:shutil 解析和生成ini文件:ConfigParser:(co ...