【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.mfbz.cn/a/112626.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

1深度学习李宏毅

目录 机器学习三件事&#xff1a;分类&#xff0c;预测和结构化生成 2、一般会有经常提到什么是标签label&#xff0c;label就是预测值&#xff0c;在机器学习领域的残差就是e和loss​编辑3、一些计算loss的方法&#xff1a;​编辑​编辑 4、可以设置不同的b和w从而控制loss的…

nodejs+vue+elementui+python家电销售分析系统设计与实现-计算机毕业设计

系统按照用户的实际需求开发而来&#xff0c;贴近生活。从管理员通过正确的账号的密码进入系统&#xff0c;可以使用相关的系统应用。管理员总体负责整体系统的运行维护&#xff0c;统筹协调。 我们可以利用计算机技术来取代传统的管理模式&#xff0c;实现家电销售分析系统的…

赋能制造业高质量发展,释放采购数字化新活力——企企通亮相武汉2023国际智能制造创新论坛

摘要 “为应对成本上升、供应端不稳定、供应链上下游协同困难、决策无数据依据等问题&#xff0c;利用数字化手段降本增效、降低潜在风险十分关键。在AI等先进技术发展、供应链协同效应和降本诉求等机遇的驱动下&#xff0c;采购供应链数字化、协同化成为企业激烈竞争的优先选…

坚持#第420天~阿里云轻量服务器内存受AliYunDunMonito影响占用解决方法

阿里云轻量服务器内存受AliYunDunMonito影响占用解决方法&#xff0c;亲测有效&#xff1a; Mobax好卡啊&#xff0c;那就直接在阿里云后台操作即可&#xff0c;阿里云后台也可以上传文件。 Navicat mysql好卡啊&#xff0c;那就直接在阿里云后台最上面帮助的右边有个数据库&…

c++装饰器模式

前言 装饰器模式&#xff0c;就是可以对一个对象无限装饰一些东西&#xff0c;而且可以没有顺序。比如一个人可能只会说出他的名字&#xff0c;但是可以让他再说哈哈&#xff0c;可以说完哈哈之后再说哇哇。如何后面又不想装饰了&#xff0c;不需要改类原来的代码&#xff0c;…

基础课15——语音标注

语音数据标注是对语音数据进行处理和分析的过程&#xff0c;目的是让人工智能系统能够理解和识别语音中的信息。这个过程包括了对语音信号的预处理、特征提取、标注等步骤。 在语音数据标注中&#xff0c;标注员需要对语音数据进行分类、切分、转写等操作&#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…

uniapp 使用 UDP

一、搭建UDP服务端&#xff0c;nodejs const dgram require("dgram");const message Buffer.from("你好&#xff0c;这是一个UDP广播消息"); const port 3000; // 用你想要的端口替换这里// 创建一个UDP套接字 const socket dgram.createSocket("…

目标检测理论知识

目标检测 1.基本概念 目标检测&#xff08;Object Detection&#xff09;的任务是找出图像中所有感兴趣的目标&#xff08;物体&#xff09;&#xff0c;确定它们的类别和位置&#xff0c;是计算机视觉领域的核心问题之一。由于各类物体有不同的外观、形状和姿态&#xff0c;…

搜索二叉树

单纯的二叉树&#xff0c;并不能体现出优秀的存储和查找能力&#xff0c;但是对二叉树附加一些规则&#xff0c; 就能让二叉树成为很高效的存储和查找的一种数据结构&#xff0c;所以今天会介绍&#xff0c;基于二 叉树和一些附加规则的树——搜索二叉树1.搜索二叉树 搜索二叉…

WINCC7.5-根据时间跨度选择趋势

yyyy-MM-dd hh:mm:ss “yyyy”&#xff1a;表示四位数的年份&#xff0c;例如&#xff1a;2022。 “MM”&#xff1a;表示两位数的月份&#xff0c;从01到12。 “dd”&#xff1a;表示两位数的日期&#xff0c;从01到31。 “hh”&#xff1a;表示12小时制的小时数&#xff0c;从…

maven之父子工程版本控制案例实战,及拓展groupId和artifactId的含义

<parent>标签 用于父子工程项目&#xff0c;什么是父子工程&#xff1f; 顾名思义&#xff0c;maven父子项目是一个有一个父项目&#xff0c;父项目下面又有很多子项目的maven工程&#xff0c;当然&#xff0c;子项目下面还可以添加子项目&#xff0c;从而形成一个树形…

第4天:基础入门-30余种加密编码进制amp;Webamp;数据库amp;系统amp;代码amp;参数值

第4天&#xff1a;基础入门-30余种加密编码进制&Web&数据库&系统&代码&参数值 一、知识点 1. 存储密码加密-Web&数据库&系统2. 传输数据编码-各类组合传输参数值3. 代码特性加密-JS&PHP&NET&JAVA4. 数据显示编码-字符串数据显示编码二…

Android APT的使用

Apt 介绍 APT(Annotation Processing Tool)是一种处理注释的工具,它对源代码文件进行检测找出其中的 Annotation&#xff0c;根据注解自动生成代码。 Annotation 处理器在处理 Annotation 时可以根据源文件中的 Annotation 生成额外的源文件和其它的文件(文件具体内容由 Annot…

c++实现策略模式

前言 看了一会儿大话设计模式&#xff0c;我感觉平常的话&#xff0c;策略模式还挺常用的&#xff0c;记录一下。个人理解策略模式&#xff0c;就是抽象一个算法&#xff0c;然后你可以有很多不同的实现&#xff0c;这些实现去重写抽象算法的虚方法。然后在一个上下文类中有一…

win10pycharm和anaconda安装和环境配置教程

windows10 64位操作系统下系统运行环境安装配置说明 下载和安装Anaconda&#xff0c;链接https://www.anaconda.com/download 下载完后&#xff0c;双击exe文件 将anaconda自动弹出的窗口全部关掉即可&#xff0c;然后配置高级系统变量 根据自己的路径&#xff0c;配置…

C++ Qt QLineEdit如何响应回车事件

在Qt开发中,回车键的处理很常见,本篇博客介绍在QLineEdit里回车键的处理方法,例如下面的界面: QLineEdit回车键的处理有方式,一是链接returnPressed信号,二是用事件过滤。下面分别介绍这两种方式。 一、returnPressed信号 可以查看QLineEdit的头文件声明,有如下信号:…

量化交易Copula建模应对市场低迷

一、简介 传统上,我们依靠相关矩阵来理解资产间的动态。然而,正如过去的市场崩盘所表明的那样,当风暴袭来时,许多模型都会陷入混乱。突然之间,相关性似乎趋于一致,而多样化这一经常被吹捧的风险管理口号似乎并没有提供什么庇护。 这种出乎意料的同步,即资产在经济低迷时…

服务器带宽忽然暴增,不停的触发告警

问题&#xff1a; 线上环境&#xff0c;服务器的外网下行带宽达到某个阈值&#xff0c;触发告警&#xff0c;查了下服务器的带宽监控信息&#xff0c;是从某个时间开始突然串上去的&#xff0c;然后监控图形非常有规律&#xff0c;都是每秒达到顶峰后&#xff0c;又立马下去了…

新一代构建工具Vite-xyphf

一、什么vite? vite:是一款思维比较前卫而且先进的构建工具,他解决了一些webpack解决不了的问题——在开发环境下可以实现按需编译&#xff0c;加快了开发速度。而在生产环境下&#xff0c;它使用Rollup进行打包&#xff0c;提供更好的tree-shaking、代码压缩和性能优化&…
最新文章