【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

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

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

相关文章

云栖大会:通义灵码智能编码助手,全面公测

文章目录 核心场景一、什么事通义灵码&#xff1f;二、功能介绍1.引入插件2.如何使用 总结 核心场景 代码智能生成 经过海量优秀开源代码数据训练&#xff0c;可根据当前代码文件及跨文件的上下文&#xff0c;为你生成行级/函数级代码、单元测试、代码注释等。沉浸式编码心流&…

牛客网刷题-(9)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…

C++ 赋值运算重载,const成员,取地址及const取地址操作符重载

C 赋值运算重载&#xff0c;const成员&#xff0c;取地址及const取地址操作符重载 1. 赋值运算符重载1.1 运算符重载1.2 赋值运算符重载1.3 前置/--和后置/--重载 2. const成员3. 取地址及const取地址操作符重载 所属专栏&#xff1a;C“嘎嘎" 系统学习❤️ &#x1f680;…

用前端框架Bootstrap和Django实现用户注册页面

01-新建一个名为“mall_backend”的Project 命令如下&#xff1a; CD E:\Python_project\P_001\myshop-test E: django-admin startproject mall_backend02-新建应用并注册应用 执行下面条命令依次创建需要的应用&#xff1a; CD E:\Python_project\P_001\myshop-test\mall…

MySQL系列-架构体系、日志、事务

MySQL架构 server 层 &#xff1a;层包括连接器、查询缓存、分析器、优化器、执行器等&#xff0c;涵盖 MySQL 的大多数核心服务功能&#xff0c;以及所有的内置函数&#xff08;如日期、时间、数学和加密函数等&#xff09;&#xff0c;所有跨存储引擎的功能都在这一层实现&am…

Linux中shell脚本练习

目录 1.猜数字 2.批量创建用户 3.监控网卡Receive Transmit 数据的变化 4.部署Linux 5.系统性能检测脚本 6.分区脚本 7.数据库脚本 1.猜数字 随机数的生成 使用环境变量RANDOM&#xff0c;范围是0&#xff5e;32767 编写guest.sh&#xff0c;实现以下功能&#xff1…

使用 Python 进行自然语言处理第 5 部分:文本分类

一、说明 关于文本分类&#xff0c;文章已经很多&#xff0c;本文这里有实操代码&#xff0c;明确而清晰地表述这种过程&#xff0c;是实战工程师所可以参照和依赖的案例版本。 本文是 2023 年 1 月的 WomenWhoCode 数据科学跟踪活动提供的会议系列文章中的一篇。 之前的文章在…

macOS M1安装wxPython报错‘tiff.h‘ file not found的解决方法

macOS12.6.6 M1安装wxPython失败&#xff1a; 报错如下&#xff1a; imagtiff.cpp:37:14: fatal error: tiff.h file not found解决办法&#xff1a; 下载源文件重新编译&#xff08;很快&#xff0c;5分钟全部搞定&#xff09;&#xff0c;分三步走&#xff1a; 第一步&…

UE5——网络——RPC

RPC&#xff08;这个是官方文档的资料&#xff09; 要将一个函数声明为 RPC&#xff0c;您只需将 Server、Client 或 NetMulticast 关键字添加到 UFUNCTION 声明。 例如&#xff0c;若要将某个函数声明为一个要在服务器上调用、但需要在客户端上执行的 RPC&#xff0c;您可以…

【数据库】形式化关系查询语言(一):关系代数Relational Algebra:基本运算、附加关系代数、扩展的关系代数

目录 一、关系代数Relational Algebra 1. 基本运算 a. 选择运算&#xff08;Select Operation&#xff09; b. 投影运算&#xff08;Project Operation&#xff09; 组合 c. 并运算&#xff08;Union Operation&#xff09; d. 集合差运算&#xff08;Set Difference Op…

【小白专用】PHP array_push() 函数

PHP array_push() 函数 首先创建一个数组&#xff0c;然后使用array_push()函数依次添加了2个元素&#xff0c;并使用print_r()打印出了结果。可以看到&#xff0c;新添加的元素都已经被成功插入到了数组的末尾。 向数组尾部插入 "blue" 和 "yellow"&…

【spring boot】

作用 极大地简化了spring的搭建和开发 开发方法 idea开发springboot 必须联网 结构 parent&#xff1a;装多次使用的依赖&#xff0c;还能管理版本 starter&#xff1a;SpringBoot中常见项目名称&#xff0c;定义了当前项目使用的所有依赖坐标&#xff0c;以达到减少依赖…