【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)就可以构成了一个简单的程序。

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

相关推荐
培根芝士31 分钟前
使用 Canvas 替代 <video> 标签加载并渲染视频
前端·javascript·音视频
小螺号dididi吹1 小时前
菜鸟速通:React入门 01
前端·react.js·前端框架
Lstmxx1 小时前
解放前端生产力:我如何用 LLM 和 Bun.js 构建一个 YApi to TypeScript 的自动化代码生成服务
前端·ai编程·mcp
持续前行1 小时前
vue3 : 导出pdf , 除iframe之外 ,还有其他内容一并导出方式
前端·javascript·vue.js
唐某人丶1 小时前
前端仔如何在公司搭建 AI Review 系统
前端·人工智能·aigc
没有鸡汤吃不下饭1 小时前
排查vue项目线上才会出现的故障
前端·vue.js·nginx
吃饭睡觉打豆豆嘛1 小时前
React Router 传参三板斧:新手也能 5 秒做决定
前端
裘乡1 小时前
storybook配合vite + react生成组件文档
前端·react.js
Carolinemy1 小时前
ElementUI 之 el-table
前端·vue.js
裘乡2 小时前
vonage音视频基本使用--web@opentok/client
前端·音视频开发