一、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. jdbc连接数据库问题

    ### Error querying database.  Cause: org.springframework.jdbc.CannotGetJdbcConnectionException: Fail ...

  2. 手把手教你实现在Monaco Editor中使用VSCode主题

    背景 笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持 ...

  3. python小题目练习(十一)

    题目:大乐透号码生成器 需求:使用Random模块模拟大乐透号码生成器,选号规则为:前区在1 ~ 35的范围内随机产生不重复 的5个号码,后区在1~ 12的范围内随机产生不重复的2个号码.效果如图8. ...

  4. Python Pygal 模块安装和使用你get了吗?

    Pygal 是另一个简单易用的数据图库,它以面向对象的方式来创建各种数据图,而且使用 Pygal 可以非常方便地生成各种格式的数据图,包括 PNG.SVG 等.使用 Pygal 也可以生成 XML e ...

  5. Python自动化办公:批量将文件按分类保存,文件再多,只需一秒钟解决

    序言 (https://jq.qq.com/?_wv=1027&k=GmeRhIX0) 当我们电脑里面的文本或者或者文件夹太多了,有时候想找到自己想要的文件,只能通过去搜索文件名,要是名字忘记 ...

  6. 一文详解|Go 分布式链路追踪实现原理

    在分布式.微服务架构下,应用一个请求往往贯穿多个分布式服务,这给应用的故障排查.性能优化带来新的挑战.分布式链路追踪作为解决分布式应用可观测问题的重要技术,愈发成为分布式应用不可缺少的基础设施.本文将 ...

  7. NC201605 Bits

    NC201605 Bits 题目 题目描述 Nancy喜欢做游戏! 汉诺塔是一个神奇的游戏,神奇在哪里呢? 给出 \(3\) 根柱子,最开始时 \(n\) 个盘子按照大小被置于最左的柱子. 如果盘子数 ...

  8. 服务器与Ajax

    前端相关的技术点 HTML   主要用来实现页面的排版布局 CSS   主要用来实现页面的样式美化 JavaScript   主要用来实现前端功能特效 Ajax基础知识铺垫 客户端与服务器 通信协议( ...

  9. 静态代码块和数组工具类Arrays

    静态代码块 静态代码块:定义在成员位置,使用static修饰的代码块{ }. ~位置:类中方法外. ~执行:随着类的加载而执行且执行一次,优先于main方法和构造方法的执行 格式: public cl ...

  10. antd vue 折叠面板 v-for 循环点击无效

    问题描述 实现一个折叠面板点击展开,但是必须点击两次才能展开,第一次无效 <a-collapse-panel v-for="(item, index) in dataMap" ...