【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文件的基本结构

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

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

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

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

swift 复制代码
<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>

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

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

相关推荐
cs_dn_Jie26 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic1 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具2 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test3 小时前
js下载excel示例demo
前端·javascript·excel
Yaml43 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事3 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶3 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo3 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx