当前位置: 首页 > news >正文

【uniapp】html和css-20231031

我想用控件和样式来表达应该会更贴切,html和css的基础需要看看。

关于html:https://www.w3school.com.cn/html/html_layout.asp

关于css:https://www.w3school.com.cn/css/index.asp

html让我们实现自己想要的布局(按钮,输入框),css让我们锦上添花实现想要样式(颜色、字体大小。

直接上代码吧,实现一个输入框,并通过ccs改变样式。

下面是uniapp的vue文件的基本结构

014a1dd421341f8af4fc75748a53119e.png

在style中写css或写外包的css文件作为引用;template里面就放控件;scripe里就放js或者写外部的js作为引用;

<template><view class="content"><view class="inputView"><!-- 输入框,提示:请输入文字 --><input class="name" type="text" placeholder="请输入文字"  /></view></view>
</template>

如果我们想改变文字颜色呢、并控制边距,加边框,就写对应的css。

css需要被引用,这里就要写样式选择器,我写的是类选择器。

<style>/* 加个边框,控制上下左右距离 */.inputView {border: 1px solid red;padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;margin-left: 10px;margin-right: 10px;}.name {color: red;//文字颜色为红}</style>

71d72109bdf5acb66b427eb572bd64d7.png

控件(布局)、样式(css)、逻辑(js)就可以构成了一个简单的程序。

调整网页的开发者模式,展示成手机的样子。

a0f053b2c38880866989983ae9fe7a54.png

相关文章:

【uniapp】html和css-20231031

我想用控件和样式来表达应该会更贴切&#xff0c;html和css的基础需要看看。 关于html&#xff1a;https://www.w3school.com.cn/html/html_layout.asp 关于css&#xff1a;https://www.w3school.com.cn/css/index.asp html让我们实现自己想要的布局&#xff08;按钮&#xff0…...

Docker Tomcat 搭建文件服务器

本文基于openwrt上进行。 步骤 1: 安装 Docker 如果尚未安装Docker&#xff0c;首先需要安装Docker。根据你的操作系统&#xff0c;参考Docker官方文档来完成安装, 这里不做详细介绍。 步骤 2: 拉去docker Tomcat镜像 进入openwrt管理界面&#xff0c;docker选项中 拉取最新…...

无感刷新 token

文章目录 背景基本思路需解决的问题请求进入死循环标记刷新 token 请求避免请求拦截覆盖 refresh token并发刷新 token 完整代码注意&#xff1a;拦截器注册顺序另一种方案&#xff1a;事件驱动刷新 前景提要&#xff1a; ts 简易封装 axios&#xff0c;统一 API 实现在 confi…...

【MISRA C 2012】Rule 2.6 函数不应该包含未使用的标签声明

1. 规则1.1 原文1.2 分类 2. 关键描述3. 代码实例 1. 规则 1.1 原文 Rule 2.6 A function should not contain unused label declarations Category Advisory Analysis Decidable, Single Translation Unit Applies to C90, C99 1.2 分类 规则2.6&#xff1a;函数不应该包含…...

Ubuntu:使用apache2部署Vue开发的网站

作者:CSDN @ _乐多_ 本文记录了Vue项目打包到部署到ubuntu系统的全部步骤。 文章目录 一、代码打包二、安装 Apache2三、开启/关闭apache23.1 开启3.2 关闭四、部署Vue应用到Apache24.1 首次部署4.2 更新部署五、全部操作截图一、代码打包 首先,确保您已经在本地开发环境中…...

使用IO完成端口实现简单回显服务器

说明 使用IO完成端口实现简单回显服务器&#xff0c;因为是测试用的&#xff0c;所以代码很粗糙。 提醒 使用的是ReadFile、WriteFile来实现Overlapped IO&#xff0c;正式场合应该用WSARecv、WSASend&#xff0c;原因&#xff1a;来自《Windows网络编程技术》 8.2.5节 在这里…...

【ROS】Nav2源码之nav2_behavior_tree详解

1、简介 nav2_bt_navigator实现ROS2节点以行为树的方式来处理。 nav2_behavior_tree模块提供如下功能: 一个c模板类&#xff0c;可以轻松地将ROS2 动作(actions)和服务(services)集成到行为树(Behavior Trees)中。特定于导航的行为树节点。通用的BehaviorTreeEngine类&#…...

SpringBoot---myBatis数据库操作

一&#xff0c;分页查询 现在controller中设置参数&#xff0c;RequestParam(defaultValue "1") 设置默认值 GetMapping public Result page(RequestParam(defaultValue "1") Integer page,RequestParam(defaultValue "10") Integer pageSize…...

力扣541.反转字符串II

原题链接&#xff1a;力扣541.反转字符串II 思路&#xff1a; 其实在遍历字符串的过程中&#xff0c;只要让 i (2 * k)&#xff0c;i 每次移动 2 * k 就可以了&#xff0c;然后判断是否需要有反转的区间。 因为要找的也就是每2 * k 区间的起点&#xff0c;这样写&#xff0c…...

撕掉Hadoop标签,Cloudera未来可期吗?

Cloudera&#xff1a;大数据的弄潮儿 1、Cloudera发展史2、透过Cloudera看清大数据时代的转变3、参考文章 1、Cloudera发展史 说起Cloudera&#xff0c;就不得不提起Hadoop&#xff0c;Cloudera的过去就是Hadoop时代中的一个缩影。作为全球第一家也是最大一家Hadoop商业化公司&…...

排序算法(1)

这里写目录标题 排序插入排序直接插入排序希尔排序 选择排序直接选择排序堆排序向下调整堆排序 交换排序冒泡排序 排序 插入排序 直接插入排序 直接插入排序是O&#xff08;N^2&#xff09;的排序算法 从0下标开始往后排 void InsertSort(int* a,int n)//直接插入排序 {fo…...

Top 5 Cutting-edge technology examples 2023

文章目录 Top 5 Cutting-edge technology examples 20231、Computer Vision2、Natural Language Processing3、Virtual Reality & Augmented Reality4、Deep Machine Learning5、Neuralink Top 5 Cutting-edge technology examples 2023 Cutting-edge technology in 2023 …...

【算法|滑动窗口No.3】leetcode3. 无重复字符的最长子串

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…...

元素的水平居中和垂直几种方案

总结一下各种元素的水平居中和垂直居中方案。 水平居中&#xff1a; 1.行内元素水平居中 text-align: center 定义行内内容&#xff08;例如文字&#xff09;如何相对它的块父元素对齐;不仅可以让文字水平居中&#xff0c;还可以让行内元素水平居中 注意&#xff1a;给行内…...

JS和JQuery的区别

JS和jQuery都是用于前端开发的工具&#xff0c;但是它们有一些重要的区别。主要区别如下&#xff1a; JS是一种编程语言&#xff0c;而jQuery是一个JS库。JS可以与其他语言一起使用&#xff08;如PHP、Python等&#xff09;&#xff0c;而jQuery是JS的一个扩展&#xff0c;只能…...

延时摄影视频制作工具 LRTimelapse mac中文版特点介绍

lrTimelapse mac是一款适用于 Windows 和 macOS 系统的延时摄影视频制作软件&#xff0c;可以帮助用户创建高质量的延时摄影视频。该软件提供了直观的界面和丰富的功能&#xff0c;支持多种时间轴摄影工具和文件格式&#xff0c;并具有高度的可定制性和扩展性。 lrTimelapse ma…...

Mac电脑怎么运行 Office 办公软件

虽然 Office 软件也有 Mac 版本的&#xff0c;但是有蛮多小伙伴用起来还是感觉不得劲&#xff0c;毕竟接触了太久的 Windows&#xff0c;所以想要使用 Windows 版本的 Office 软件。 今天就给大家介绍一下怎么在 Mac 电脑中运行 Windows 版本的办公软件&#xff0c;在这里就需…...

FPGA 如何 固化程序到 FLASH中

1、导出Hardware 2、导出bit文件 3、打开SDK 4、 点击Ok 5、创建工程 6、 输入工程名称&#xff1a;guhua 7、选择 Zynq FSBL 8、单击 guhua、然后点击 build 点击&#xff1a;build all 9、 右键之后&#xff0c;点击&#xff1a;Creat Boot Image 10、点击 Cr…...

电源管理(PMIC)MAX20428ATIA/VY、MAX20428ATIC/VY、MAX20428ATIE/VY适合汽车ADAS应用的开关稳压器

一、概述 MAX20428是一款高效率、八路输出、低压PMIC。OUT1将输入电源升压至5V&#xff0c;电流高达500mA&#xff0c;而三个同步降压转换器的输入电压范围为3.0V至4.2V&#xff0c;输出电压范围为0.8V至3.9875V&#xff0c;峰值电流分别高达1.3A、1.3A和3.5A。三个300mA pMOS…...

十年JAVA搬砖路——Linux搭建Ldap服务器。

1.安装命令 yum -y install openldap compat-openldap openldap-clients openldap-servers openldap-servers-sql openldap-devel2.启动ldap systemctl start slapd systemctl enable slapd3.修改密码 slappasswd Aa123456获得返回的密码加密密码串&#xff1a; {SSHA}DkSw0…...

AI集成开发工程师的技术实践与转型之路

第一章:技术架构演进与AI融合趋势 1.1 传统开发范式的演进 现代软件开发正经历从单一业务系统向智能化业务系统的转型。传统的.NET技术栈作为企业级应用开发的基石,其技术架构也在不断演进: // 典型的三层架构示例 public class BusinessLogic {private readonly IDataAc…...

HunyuanVideo-Foley 企业级架构设计:基于Agent的分布式音效生成调度系统

HunyuanVideo-Foley 企业级架构设计&#xff1a;基于Agent的分布式音效生成调度系统 1. 引言&#xff1a;音效生成的企业级挑战 想象一下这样的场景&#xff1a;一家大型视频平台每天需要为上万条视频自动生成匹配的音效。传统单机方案面临三大难题&#xff1a;生成速度跟不上…...

运维自动化新思路:使用Pixel Script Temple生成系统监控拓扑像素图

运维自动化新思路&#xff1a;使用Pixel Script Temple生成系统监控拓扑像素图 1. 引言&#xff1a;运维可视化的痛点与创新方案 每天早晨&#xff0c;运维工程师小李都要花1-2小时手动整理服务器状态报告。他需要从多个监控系统导出数据&#xff0c;在PPT中绘制网络拓扑图&a…...

魔兽世界插件开发5分钟速成:从零掌握API查询与宏命令管理终极指南

魔兽世界插件开发5分钟速成&#xff1a;从零掌握API查询与宏命令管理终极指南 【免费下载链接】wow_api Documents of wow API -- 魔兽世界API资料以及宏工具 项目地址: https://gitcode.com/gh_mirrors/wo/wow_api 魔兽世界API文档平台与宏工具是一个专为《魔兽世界》玩…...

告别枯燥Loading!聊聊Android骨架屏的‘心理战术’与设计取舍

告别枯燥Loading&#xff01;Android骨架屏的UX心理学与架构设计博弈 当用户盯着那个旋转的小圆圈超过3秒时&#xff0c;他们的耐心就像沙漏里的沙子一样快速流失。但有趣的是&#xff0c;如果换成骨架屏——那些跳动的灰色块——同样的3秒等待却变得可以接受。这不是魔法&…...

R Markdown网站生成器使用教程:如何快速搭建技术文档网站 [特殊字符]

R Markdown网站生成器使用教程&#xff1a;如何快速搭建技术文档网站 &#x1f4ca; 【免费下载链接】rmarkdown Dynamic Documents for R 项目地址: https://gitcode.com/gh_mirrors/rm/rmarkdown R Markdown是一个强大的动态文档生成工具&#xff0c;能够将代码、输出…...

颠覆教育资源获取:3分钟搞定电子课本下载的秘密武器

颠覆教育资源获取&#xff1a;3分钟搞定电子课本下载的秘密武器 【免费下载链接】tchMaterial-parser 国家中小学智慧教育平台 电子课本下载工具&#xff0c;帮助您从智慧教育平台中获取电子课本的 PDF 文件网址并进行下载&#xff0c;让您更方便地获取课本内容。 项目地址: …...

Figma设计稿秒变Vue代码?实测Trae AI的“图像转代码”功能,还原度到底有多高

Figma设计稿秒变Vue代码&#xff1f;实测Trae AI的"图像转代码"功能还原度与实战应用 设计师与前端开发者的协作痛点由来已久。当Figma画布上精美的界面设计需要转化为实际可运行的代码时&#xff0c;往往意味着数小时的像素级测量、CSS编写和响应式调试。这种设计到…...

90% 的开发者都在错误理解 async/await:协程本质与高并发实战指南

90% 的开发者都在错误理解 async/await&#xff1a;协程本质与高并发实战指南 很多人在第一次写 async def await 的时候&#xff0c;心里都暗暗期待&#xff1a;这下代码应该变快了吧&#xff1f; 结果写完一测&#xff0c;单个接口的响应时间和以前同步写法几乎一模一样&…...

Netty ChannelPipeline 线程安全机制的深度解析

Netty ChannelPipeline 线程安全机制的深度解析 摘要 ChannelPipeline 作为 Netty 事件处理管道的核心抽象&#xff0c;其线程安全性的实现是 Netty 高性能、高并发架构的关键基础。Netty 通过精心设计的机制确保了 ChannelPipeline 所有公共方法的线程安全&#xff0c;主要包括…...