上一节我们介绍了如何让AI修改整体UI视觉效果。

不过有时候AI调整的并不理想,一些UI的布局还是需要微调。

比如已经实现的这个开始页面,我觉得标题太高了,这时候可以自己调,也可以让AI单独调,下面详细介绍。

一、手动调整UI布局

1、首先在wxml中找到标题对应的class名

我们发现代码中标题的代码结果如下:

<text class="main-title">修仙太难了</text>

这代表标题-修仙太难了是一个text(文本)类型,class="main-title"相当于给它起了英文名字main-title。

注意这些class名是AI自己定义的,大概率都不一样。

我们发现修仙太难了的class="main-title"。然后它又被包括在class="title-area"里面。

同时我们发现,单机版,slogan都被包在了title-area里面。

这就好像在界面上创建了一个大的区域命名为title-area(父容器),然后又在它里面画了main-title,sub-title和slogan(子组件)。

我修改一下title-area的颜色(如下图)就会很清楚的看到这个关系。

2、调整“修仙太难了”的排版布局

我们在wxss中搜索(Ctrl+f)title-area。(标题的父容器)

搜到的代码块如下,这些代码都是控制标题的排版布局,颜色,字体相关的。

比如现在在title-area中margin-top: 80rpx;我将其改为120,代表距离顶部更远,也就是往下调整一些。

如果你想知道每个字段分别都是啥意思,直接复制丢给AI让它解释即可,这里我就不介绍了。

二、总结说明

本节主要介绍wxml和wxss的关系,两个文件主要都是控制页面布局排版和效果的。

wxml控制整个页面有哪些元素,wxss中主要控制每个元素的位置,大小,颜色等。

当然其实有可以不要wxss,将wxss中的所有代码放到wxml里面也行。但是这样就不方便管理和调整了。

注意:我们其实也完全不需要知道代码意思,只需知道哪里是控制哪里的即可,然后修改调整哪里的时候,直接将相关的代码复制给AI让它修改即可。

比如我现在觉得踏入仙途按钮里面的字体没有上下居中,就可以直接让AI修改


以下按钮(踏入仙途)代码,中的文字没有上下居中,请优化:

然后把具体的按钮相关wxss代码丢给AI


以下是我微调之后的UI。

tips:Ctrl+/ 快速注释不想要的代码段,再按取消注释,当然也可以直接删掉

--完--

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/88193.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/88193.shtml
英文地址,请注明出处:http://en.pswp.cn/diannao/88193.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

64-Oracle Redo Log

小伙伴们&#xff0c;关于数据库的redo log相信大家都操作很多次了,且这是OCM考试必考内容。Oracle Redo Log是一种特殊的日志文件&#xff0c;用于完整地记录数据库中所有数据变更的详细信息。当数据库执行插如、更新或删除等更新操作&#xff0c;这些操作并不会立刻写入数据库…

hive集群优化和治理常见的问题答案

Hive 集群优化与治理常见问题答案合集 &#x1f42d;1. Q&#xff1a;Hive中如何优化大表Join操作&#xff1f; A&#xff1a; 使用Map Join&#xff08;小表Join大表时&#xff09;避免Reduce阶段。启用自动Map Join&#xff08;设置hive.auto.convert.jointrue&#xff09;…

C#采集电脑硬件(CPU、GPU、硬盘、内存等)温度和使用状况

这是采集出来的Json&#xff0c;部分电脑&#xff08;特别是笔记本&#xff09;无法获取到&#xff1a; {"HardwareList": [{"Name": "MITX-6999","Type": "主板","Sensors": [],"WmiReport": null}, …

C3新增特性

✅ 一、选择器&#xff08;Selectors&#xff09; 1. 属性选择器 [attr^value]: 匹配属性值以特定字符串开头的元素。[attr$value]: 匹配属性值以特定字符串结尾的元素。[attr*value]: 匹配属性值包含特定字符串的元素。 2. 子元素和兄弟元素选择器 :nth-child(n): 匹配父元…

报错 @import “~element-ui/packages/theme-chalk/src/index“;

报错 import "~element-ui/packages/theme-chalk/src/index"; 具体报错报错原因 具体报错 SassError: Can’t find stylesheet to import. import “~element-ui/packages/theme-chalk/src/index”; src\views\login\theme\element-variables.scss 8:9 root stylesh…

ESLint从入门到实战

引言 作为前端开发者&#xff0c;你是否遇到过这样的情况&#xff1a;团队成员写出的代码风格各异&#xff0c;有人喜欢用分号&#xff0c;有人不用&#xff1b;有人用双引号&#xff0c;有人用单引号&#xff1b;代码评审时总是在纠结这些格式问题而不是业务逻辑&#xff1f;…

vue3实现markdown文档转HTML并可更换样式

vue3实现markdown文档转HTML 安装marked npm install marked<template><!-- 后台可添加样式编辑器 --><div class"markdown-editor" :class"{ fullscreen: isFullscreen, preview-mode: isPreviewMode }"><div class"editor-c…

Temu 实时获取商品动态:一个踩坑后修好的抓数脚本笔记

Temu 作为一个增长迅猛的购物平台&#xff0c;其商品价格、库存等信息&#xff0c;对许多做运营分析的小伙伴来说非常有参考价值。 我在写这个小工具的时候&#xff0c;踩了很多坑&#xff0c;特别记录下来&#xff0c;希望对你有用。 初版代码&#xff1a;想当然的“直接来一下…

【软考高级系统架构论文】论数据分片技术及其应用

论文真题 数据分片就是按照一定的规则,将数据集划分成相互独立、 正交的数据子集,然后将数据子集分布到不同的节点上。通过设计合理的数据分片规则,可将系统中的数据分布在不同的物理数据库中,达到提升应用系统数据处理速度的目的。 请围绕“论数据分片技术及其应用”论题…

VR飞夺泸定桥沉浸式历史再现​

当你戴上 VR 设备开启这场震撼人心的 VR 飞夺泸定桥体验&#xff0c;瞬间就会被拉回到 1935 年那个战火纷飞的 VR 飞夺泸定桥的岁月&#xff0c;置身于泸定桥的西岸 。映入眼帘的是一座由 13 根铁索组成的泸定桥&#xff0c;它横跨在波涛汹涌的大渡河上&#xff0c;桥下江水咆哮…

libwebsockets编译

#安装 libwebsocket git clone https://github.com/warmcat/libwebsockets && \ mkdir libwebsockets/build && cd libwebsockets/build && \ cmake -DMAKE_INSTALL_PREFIX:PATH/usr -DCMAKE_C_FLAGS"-fpic" .. && \ make &&…

使用docker部署epg节目单,同时管理自己的直播源

配置 Docker 环境 拉取镜像并运行&#xff1a; docker run -d \--name php-epg \-v /etc/epg:/htdocs/data \-p 5678:80 \--restart unless-stopped \taksss/php-epg:latest 默认数据目录为 /etc/epg &#xff0c;根据需要自行修改 默认端口为 5678 &#xff0c;根据需要自行修…

H5新增属性

✅ 一、表单相关新增属性&#xff08;Form Attributes&#xff09; 这些属性增强了表单功能&#xff0c;提升用户体验和前端验证能力。 1. placeholder 描述&#xff1a;在输入框为空时显示提示文本。示例&#xff1a; <input type"text" placeholder"请输…

【C++】简单学——引用

引用的概念 为一个变量指定一个别名 引用的规则 用之前要初始化使用了之后就不能修改指向了&#xff08;对一个引用赋值实际上是对原本被引用的那个值进行赋值&#xff0c;而不是改变指向&#xff09;一个对象可以同时有多个引用 问&#xff1a;引用可以完全代替指针吗&…

C#编程与1200PLC S7通信

读取q0.0的状态,i0.0的状态实时在窗口更新 PLC里写一个程序 用常闭按钮接i0.0信号 &#xff0c;延时接通Q0.0 按按钮&#xff0c;上位机测试效果, 2396fcfa823aa951d 程序前提是引用了S7通信文件 using Sharp7; using System; using System.Collections.Generic; using S…

el-table复选框分页多选

场景&#xff1a; 你想要对el-table表格数据进行批量处理&#xff0c;会使用复选框&#xff0c;但如果表格的数据是分页请求回来的&#xff0c;则在切换页码的时候&#xff0c;之前选中的数据会被清空掉&#xff0c;本文就是为了解决这个问题。 解决思路&#xff1a; 主要分…

大IPD之——学习华为的市场队伍建设(二十)

企业要生存&#xff0c;就必须要拥有自己的核心竞争力。这样在行业内与其他企业竞争时&#xff0c;才能立于不败之地&#xff0c;而伴随着企业的市场化&#xff0c;市场机制对企业价值创造的影响力越来越大。30多年来&#xff0c;华为高度重视市场队伍与市场能力建设&#xff0…

Datawhlale_快乐学习大模型_task02_NLP 基础概念

书籍地址 简要总结一下个人理解 文章目录 1.1 NLP1.2 发展历程1.3 NLP任务1.3.1 中文分词1.3.2 子词切分1.3.3 词性标注1.3.4 文本分类1.3.5 实体识别1.3.6 关系抽取1.3.7 文本摘要1.3.8 机器翻译1.3.9 自动问答 1.4 文本表示的发展1.4.1 词向量1.4.2 语言模型1.4.3 Word2Vec…

AUTOSAR图解==>AUTOSAR_AP_SWS_Persistency

AUTOSAR 持久化功能集群解析 1. 引言 AUTOSAR (AUTomotive Open System ARchitecture) 适配平台中的持久化功能集群(Persistency Functional Cluster)是一个核心组件&#xff0c;为应用程序提供数据持久化服务。本文档详细分析了AUTOSAR持久化功能集群的架构、主要组件和工作…

Ollama常用命令详解:本地大语言模型管理指南

前言 Ollama是一个强大的本地大语言模型管理工具&#xff0c;让我们可以轻松地在本地部署和运行各种开源大模型。本文将详细介绍Ollama的核心命令使用方法&#xff0c;帮助您快速上手本地AI模型的管理和使用。 1. 查看已安装模型 - ollama list 基本用法 ollama list功能说…