4.1 整体思路

整个App分成四个部分，用四个div

<template>
  <Layout class-prefix="layout">
    <div class="tags">
      <ul class="current">
        <li>衣</li>
        <li>食</li>
        <li>住</li>
        <li>行</li>
      </ul>
      <div class="new">
        <button>新增标签</button>
      </div>
    </div>
    
    <div>
      <label class="notes">
        <span class="name">备注</span>
        <input type="text" />
      </label>
    </div>

    <div>
      <ul class="types">
        <li class="selected">支出</li>
        <li>收入</li>
      </ul>
    </div>
    
    <div class="numberPad">
      <div class="output">100</div>
      <div class="button">
      <button></button>
      <button></button>
      <button></button>
      <button></button>
      <button></button>
      <button></button>
      <button></button>
      <button></button>
      <button></button>
      </div>
    </div>
    
  </Layout>
</template>

4.2 CSS思路

//清空默认不需要的样式
//reset.scss

reset.scss

* { margin: 0; padding: 0; box-sizing: border-box; } a{ text-decoration: none; color: inherit; }

//字体一般用:https://zenozeng.github.io/fonts.css/
字体写在`#app`上还是`body`上, 主要看这个项目几个人负责, 多人负责写`#app`上防止冲突. 单人的话建议body, 防止写样式出了`#app`, 而达不到整体影响的作用.

网站字体一般不用黑色, 推荐使用`#333`

helper.css

$font-hei: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;

app.vue

body {
  // 苹果设备上有用的
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
  font-family: $font-hei;
  //默认行高
  line-height: 1.5;
}

-   变量

控制变量, 变量放`helper.scss`, 这个文件只能放变量, 只能放变量, 只能放变量. 因为最终转为css这个文件中的东西都会消失.

不要在自己的代码中, 留下任何无用的代码, 包括注释

4.3 CSS第一部分

如果布局复杂就从里往外, 简单的话就随便

重置默认li, ol样式

ul, ol{ list-style: none; }

`border-radius: 50%` 是高度的50%, 不是宽度的50%

宽度的50%:

height: 24px; border-raduis: 12px //等价 height: 24px; border-raduis: (24px/2) //等价 $h: 24px; height:$h; border-radius: $h/2;

button input默认字体是宋体,需要到reset.scss重置一下

button, input{ font: inherit; }

垂直居中方法:
1 用flex布局来

2 用height和line-height来(注意只能是一行的内容用这个)

border-bottom可以不写颜色, 这样就可以随字体颜色

4.4 CSS第二 三部分

line-height默认是有高度的.

垂直水平居中能用flex就用flex.

4.5 CSS第四部分

编程字体1和0一样宽, 等宽字体, 默认用计算机自带的

font-family: Consolas, monospace;

flex布局解决不了, 就可以用float布局了(用了float父元素就要用clearfix)

可用rgba或fade_out

box-shadow: inset 0 3px 3px -3px fade_out(black, 0.3); //或 box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, 0.25)

4.6 CSS布局

不是太影响用户体验的部分可以暂时不优化, 优化必须优化的部分.

4.7 模块化

代码过150行就需要模块化, 养成好习惯