【uniapp】html和css-20231031

news2024/11/27 5:38:18

我想用控件和样式来表达应该会更贴切,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.coloradmin.cn/o/1160682.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ERP源码_含vs2019版

ERP源码_含vs2019版 1、两套大型源码。 2、vs2010和vs2019。 3、sqlserver2008以上。 4、C#. 5、附带数据库&#xff0c;详细安装说明。 6、赠送dxdev控件。 注意&#xff0c; 1&#xff0c;2019是更新版。2010是老版本。 2,关闭桌面所有程序&#xff0c;安装dx控件&#xff0…

电子器件 MOS管的参数、选型与使用技巧

一、电路符号 MOS管分为 G&#xff08;栅极&#xff09;、S&#xff08;源极&#xff09;、D&#xff08;漏极&#xff09; 三极&#xff0c;在图中 S 极有两条线&#xff0c;D 极只有一条线。 1.1 NMOS 和 PMOS 下图中&#xff0c;左侧是 PMOS&#xff0c;右侧是 NMOS。箭头…

Flutter 02 基础组件 Container、Text、Image、Icon、ListView

一、Container容器组件&#xff1a; demo1&#xff1a; import package:flutter/material.dart;void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("你好Flutter")),body: const MyApp(),),)); }// 容器组件 class MyApp extends St…

【软件安装环境配置】VScode 设置运行前清屏

在运行插件中设置 运行插件的安装参考&#xff1a;【软件安装&环境配置】VsCode安装和配置各种环境&#xff08;保姆级&#xff09;-CSDN博客 找到Code-runner: Clear Previous Output&#xff0c;把√打上即可 本文所涉及的他人内容包括但不限于文字、图片、音频、视频等…

OpenCV官方教程中文版 —— 图像去噪

OpenCV官方教程中文版 —— 图像去噪 前言一、原理二、OpenCV 中的图像去噪1.cv2.fastNlMeansDenoisingColored()2.cv2.fastNlMeansDenoisingMulti() 前言 目标 • 学习使用非局部平均值去噪算法去除图像中的噪音 • 学习函数 cv2.fastNlMeansDenoising()&#xff0c;cv2.fa…

面试算法49:从根节点到叶节点的路径数字之和

题目 在一棵二叉树中所有节点都在0&#xff5e;9的范围之内&#xff0c;从根节点到叶节点的路径表示一个数字。求二叉树中所有路径表示的数字之和。例如&#xff0c;图8.4的二叉树有3条从根节点到叶节点的路径&#xff0c;它们分别表示数字395、391和302&#xff0c;这3个数字…

Flutter GetX的使用

比较强大的状态管理框架 引入库&#xff1a; dependencies:get: ^4.6.6一.实现一个简单的demo 实现一个计数器功能 代码如下&#xff1a; import package:flutter/material.dart; import package:get/get.dart;void main() > runApp(const GetMaterialApp(home: Home()…

Spring MVC(Next-2)

1.视图解析器 1.视图解析器和视图 ModelAndview: 模型数据 (存储业务数据) 和视图 Model: 模型数据(存储模型层中查询到的数据) View:视图(页面属于视图中的一种) 控制单元执行完成后&#xff0c;无论什么类型返回值&#xff0c;都会封装为ModelAndview。 Mod…

C/C++指针变量详解

1、指针变量的基本操作基本操作 int a,*iptr,*jptr,*kptr; iptr &a; jptr iptr; *jptr 100; kptr NULL;图解&#xff1a; 1.1 己址和己空间 指针变量也是一个变量&#xff0c;对应一块内存空间&#xff0c;对应一个内存地址&#xff0c;指针名就是己…

OceanBase:03-集群部署

目录 一、集群规划 二、配置要求 三、部署前配置 1.配置 limits.conf 2.配置 sysctl.conf 3.关闭防火墙 4.关闭 SELinux 5.创建数据目录&#xff0c;修改文件所有者信息 6.设置无密码 SSH 登录 7.安装jdk 四、解压执行安装 五、集群部署 1.OBD命令行部署 2. OBD白…

实用篇-Docker容器

一、初识Docker docker 是一个开源的应用容器引擎&#xff0c;一个容器可以理解成一个轻量级的虚拟机&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中&#xff0c;然后发布到任何流行的 Linux或Windows操作系统的机器上&#xff0c;也可以实现虚拟化。…

python科研绘图:条形图

条形图&#xff08;bar chart&#xff09;是一种以条形或柱状排列数据的图形表示形式&#xff0c;可以显示各项目之间的比较。它通常用于展示不同类别的数据&#xff0c;例如在分类问题中的不同类别、不同产品或不同年份的销售数据等。 条形图中的每个条形代表一个类别或一个数…

基于goframe2.5.4、vue3、tdesign-vue-next开发的全栈前后端分离的管理系统

goframe-admin goframe-admin V1.0.0 平台简介 基于goframe2.5.4、vue3、tdesign-vue-next开发的全栈前后端分离的管理系统。前端采用tdesign-vue-next-starter 、vue3、pinia、tdesign-vue-next。 特征 高生产率&#xff1a;几分钟即可搭建一个后台管理系统认证机制&#x…

TypeError: Cannot read property ‘setRules‘ of undefined“

1.uniapp 执行小程序表单校验时报错 使用如果使用v-if,则使用v-show替换v-if ,即可解决问题

使用脚本整合指定文件/文件夹,执行定制化 ESLint 命令

背景 最近面对一个庞大的项目&#xff0c;但是只需要修改某个模块&#xff0c;每次都手搓命令太麻烦了&#xff0c;于是就想着能不能写个脚本来辅助处理这些事情。 解决方案 定制化一键 ESLint&#xff0c;执行文件下载地址&#xff1a; https://github.com/mazeyqian/go-g…

SpringCloud-Alibaba-Nacos2.0.4

SpringCloud-Alibaba-Nacos2.0.4 SpringCloud Alibaba版本选择&#xff08;截止到2023年3月12日&#xff09; Spring Cloud Alibaba VersionSpring Cloud VersionSpring Boot Version2021.0.4.0*Spring Cloud 2021.0.42.6.11 SpringCloud Alibaba-2021.0.4.0组件版本关系 S…

diffusers-Load pipelines,models,and schedulers

https://huggingface.co/docs/diffusers/using-diffusers/loadinghttps://huggingface.co/docs/diffusers/using-diffusers/loading 有一种简便的方法用于推理是至关重要的。扩散系统通常由多个组件组成&#xff0c;如parameterized model、tokenizers和schedulers&#xff0c…

【深度学习基础】从R-CNN到Fast R-CNN,再到MaskR-CNN,发展历程讲清楚!

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…

08-Docker-网络管理

Docker 在网络管理这块提供了多种的网络选择方式&#xff0c;他们分别是桥接网络、主机网络、覆盖网络、MACLAN 网络、无桥接网络、自定义网络。 1-无桥接网络&#xff08;None Network&#xff09; 当使用无桥接网络时&#xff0c;容器不会分配 IP 地址&#xff0c;也不会连…

【C++】set和multiset

文章目录 关联式容器键值对一、set介绍二、set的使用multiset 关联式容器 STL中的部分容器&#xff0c;比如&#xff1a;vector、list、deque、forward_list(C11)等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面存储的是元…