零基础如何快速画页面(VUE篇)第一天

零基础如何快速画页面(VUE篇)第一天

学习规划

  1. 使用HTML&&CSS画一个静态页面(最基础的静态页面所需要掌握的内容;时间:5天)
  2. 简化代码(充分理解代码含义;时间:2天)
  3. 简单学会JS(简单学习即可,复杂逻辑对于速成没必要;时间:2天)
  4. 使用Vue重新画一遍(学习Vue的过程:时间:5-7天)
  5. 简化代码(实践;时间:2天)
  6. 用JS简化VUE代码(把学到的知识整合;时间:2-3天)
  7. 用其他方法完成简化前代码(等同于重新写页面,收益:偷懒;时间:4-6天)
  8. 静态页面练习(可有可无,只要能写就行)
  9. 总结:打个比方,HTML是一个娃娃,CSS就是衣服,JS是赋予这个娃娃行动力的能力,Vue是将上述三种能力结合起来的也可以说vue是一个工厂展示

HTML&&CSS(这里只是提供了常见的并不是所有)

  1. 了解几个特殊的标签(在html中所有的<>都可以叫做标签or元素),这里还需要了解标签属性
    • 标签(常见)
      • 块级元素(不可“并行”元素,也就是同一行只会出现一个),常见的有:div、p、hx(数字代表x:1-6)、ul、ol、li、table、tr、td。之后用的对多的几个div、p
      • 行内元素:span、a、img、表单元素。行内元素顾名思义,可以同时存在一行内的元素,也就是说可并行元素
      • 行内元素和块级元素除了,不能在同一行出现之后,还有行内元素设置宽高不生效,块级元素的宽度在不设置的情况下同父级元素一致,而高度则由内容决定
      • 几个特殊的标签但是只需要知道即可:html(根标签)、body(体标签)、style(写css的标签)
    • 属性(常见)
      • class:类名(也可以说是一个代号,比如红色、黄色)作用是关联css样式
      • id:唯一标识
      • style:行内写样式的地方
      • src:路径,一般只有img用的到
    • 开发软件推荐vscode:https://code.visualstudio.com/(下载后可根据自己的喜好去安装插件,建议英语不好的同学首先安装Chinese)
    • 了解标签和使用—第一个静态页面
<!-- 声明此文件为超文本标记语言  不用管他,想创建一个此模版的只需要在vscode 创建一个.html文件输入英文叹号回车 -->
<!DOCTYPE html>
<!-- 添加根标签 lang就是一个属性,没啥用的不用关注值是什么 -->
<html lang="en">

<!-- 头部标签用于存放一些指定字符编码以及网页标题等,不用关注 -->

<head>
  <!-- 指定字符编码 -->
  <meta charset="UTF-8">
  <!-- 窗口适配 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 网页标题 -->
  <title>Document</title>
  <!-- 头部标签结束 -->
</head>

<!-- 
  这里需要提一嘴,有的标签是双标签,有的是单标签(也叫做自闭合标签) 
  常见的都是双标签,单标签有img、input、video等
  单标签也可以写成双标签的形式,但是不推荐
-->

<style>
  #box {
      /* 宽度 */
      width: 100px;
      /* 高度 */
      height: 100px;
      /* 背景色,这里的颜色可以是css预设的颜色也可以是rgb,rgba,还可以设置十六进制的 */
      background-color: skyblue;

      /* 外,这里设置的上下左右都是20px */
      /* 还可以分别设置margin-top,margin-bottom,margin-left,margin-right */
      margin: 20px;
      /* 外,这里设置的上下20px,左右是10px */
      margin: 20px 10px;
      /* 外,这里设置的上20px,左右是10px,下是0px */
      margin: 20px 10px 0;
      /* 外,这里设置的上20px,右是10px,下是0px,左是2px */
      margin: 20px 10px 0 2px;
      /* 内边距,这里设置的上下左右都是20px */
      /* 还可以分别设置padding-top,padding-bottom,padding-left,padding-right */
      padding: 20px;
      /* 内边距,这里设置的上下20px,左右是10px */
      padding: 20px 10px;
      /* 内边距,这里设置的上20px,左右是10px,下是0px */
      padding: 20px 10px 0;
      /* 内边距,这里设置的上20px,右是10px,下是0px,左是2px */
      padding: 20px 10px 0 2px;
      /* 边框,这里分别是边框宽度、边框类型、边框颜色 */
      border: 2px solid red;
      /* 文字大小,单位暂时记px */
      font-size: 20px;
      /* 文字宽度,400是正常,小于400则是变细后的文字,大于400则是加粗文字 */
      font-weight: 700;
      /* 文字 */
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      /* 行高,设置一行文字的行高,主要用于解决间距问题和文字部分情况的垂直居中问题 */
      line-height: 40px;
      /* 相对定位,会占有原来的位置 */
      position: relative;
  }

  .ab {
      /* 绝对定位,会脱离原来的位置(俗话说就是飘了),在使用绝对定位的时候一定要注意,要以哪个元素作为基准,做到基准元素也有定位,常见的还有一个固定定位,其他的用的不多 */
      position: absolute;
      /* 距离上边的距离 */
      top: 20px;
      /* 距离左边的距离 */
      left: 20px;
      /* 距离下边的距离 */
      bottom: 10px;
      /* 距离右边的距离 */
      right: 30px;
      /* 宽度 */
      width: 100px;
      /* 高度 */
      height: 100px;
      /* 圆角,这里可以通margin相同的位置 */
      border-radius: 20px;
      /* 背景色 */
      background-color: green;
      /* 鼠标手势,此设置为小手 */
      cursor: pointer;
  }
</style>
<!-- 体标签,也就是内容区域 -->

<body>
  <!-- 最常见的也是使用最多的div标签,没有什么自带的样式相对来说比较干净纯洁 -->
  <div>我是div标签</div>
  <!-- 带有自己的上下间距 -->
  <p>我是段落标签</p>
  <!-- 这是一个分割线标签 -->
  <hr />
  <!-- 以下的都是标题标签,都会有自己的字体和上下间距 -->
  <h1>标题标签</h1>
  <h1>标题一共六级选</h1>
  <h2>文字加粗一行显</h2>
  <h3>由大到小依次减</h3>
  <h4>从重到轻随之变</h4>
  <h5>语法规范书写后</h5>
  <h6>具体效果刷新见</h6>
  <!-- 无序列表,有自带的列表样式,注意li只能在ul/ol里面,不可以单独存在,而ul/ol里面最好不要出现别的元素 -->
  <ul>
      <li>1</li>
      <li>2</li>
  </ul>
  <ol>
      <li>a</li>
      <li>b</li>
  </ol>

  <!-- 表格元素,其中tr代表行,th代表表头,td代表的是每个单元格,默认是没有边框的 -->
  <table>
      <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
      </tr>
      <tr>
          <td>张三</td>
          <td>25</td>
          <td></td>
      </tr>
      <tr>
          <td>李四</td>
          <td>30</td>
          <td></td>
      </tr>
  </table>

  <!-- span普通行内元素,无特殊样式 -->
  <span>我是span标签</span>
  <!-- 超链接标签,href的值是一个链接或者是一个锚点 -->
  <a href="www.baidu.com"></a>
  <!-- src图片地址,可以是本地路径也可以是网上地址 -->
  <img src="图片地址" alt="图片损坏时的文字提示">
  <!-- 表单元素,常见的输入框,按钮,之后我们有组件库不需要深入学习 -->
  <input type="text" />
  <button>按钮</button>


  <!-- class是类名,id是唯一标识,这里用来绑定样式的 -->
  <div class="box" id="box">
      我是一个盒子
      <div class="ab">我是一个定位的元素</div>
  </div>
</body>

</html>
  1. 知道样式(css)如何设置,需要掌握的如下:
    • 宽高(这里就有单位的涉及,一般是px、%和vh/vw)
    • 字体设置
    • 背景设置(纯色or图片)
    • 定位
    • 盒模型
    • flex布局
    • 其他(手势、圆角、换行、变换等)
#box {
      /* 宽度 */
      width: 100px;
      /* 高度 */
      height: 100px;
      /* 背景色,这里的颜色可以是css预设的颜色也可以是rgb,rgba,还可以设置十六进制的 */
      background-color: skyblue;

      /* 外,这里设置的上下左右都是20px */
      /* 还可以分别设置margin-top,margin-bottom,margin-left,margin-right */
      margin: 20px;
      /* 外,这里设置的上下20px,左右是10px */
      margin: 20px 10px;
      /* 外,这里设置的上20px,左右是10px,下是0px */
      margin: 20px 10px 0;
      /* 外,这里设置的上20px,右是10px,下是0px,左是2px */
      margin: 20px 10px 0 2px;
      /* 内边距,这里设置的上下左右都是20px */
      /* 还可以分别设置padding-top,padding-bottom,padding-left,padding-right */
      padding: 20px;
      /* 内边距,这里设置的上下20px,左右是10px */
      padding: 20px 10px;
      /* 内边距,这里设置的上20px,左右是10px,下是0px */
      padding: 20px 10px 0;
      /* 内边距,这里设置的上20px,右是10px,下是0px,左是2px */
      padding: 20px 10px 0 2px;
      /* 边框,这里分别是边框宽度、边框类型、边框颜色 */
      border: 2px solid red;
      /* 文字大小,单位暂时记px */
      font-size: 20px;
      /* 文字宽度,400是正常,小于400则是变细后的文字,大于400则是加粗文字 */
      font-weight: 700;
      /* 文字 */
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      /* 行高,设置一行文字的行高,主要用于解决间距问题和文字部分情况的垂直居中问题 */
      line-height: 40px;
      /* 相对定位,会占有原来的位置 */
      position: relative;
  }

  .ab {
      /* 绝对定位,会脱离原来的位置(俗话说就是飘了),在使用绝对定位的时候一定要注意,要以哪个元素作为基准,做到基准元素也有定位,常见的还有一个固定定位,其他的用的不多 */
      position: absolute;
      /* 距离上边的距离 */
      top: 20px;
      /* 距离左边的距离 */
      left: 20px;
      /* 距离下边的距离 */
      bottom: 10px;
      /* 距离右边的距离 */
      right: 30px;
      /* 宽度 */
      width: 100px;
      /* 高度 */
      height: 100px;
      /* 圆角,这里可以通margin相同的位置 */
      border-radius: 20px;
      /* 背景色 */
      background-color: green;
      /* 鼠标手势,此设置为小手 */
      cursor: pointer;
  }
  1. 练习&问问题(比如我想设置一个什么样的样式从上述代码中没找到,这时候就需要提问)
  • 14
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值