现在我打算用 Semantic UI 这套框架提供的样式，去改进一下应用界面的样式 .. 先找到 Notes 组件的模板 .. 在它的包装上添加一个 ui container ，它可以给元素一个固定的宽度，并且可以让它居中在页面上显示 .. 再添加一个自定义的类 .. notes

打开应用的自定义样式文件 .. 设置一下 notes 的样式 .. 给它添加一点边距 .. margin-top: 32px ..

再回到 Notes 的模板 .. 里面再添加一个分隔标题 .. 一组 h4 .. 加上 ui horizontal divider 还有 header

里面添加一个小图标 .. 一组小 i 标签 .. paw icon .. 一个爪子图标 .. 标题文字是 Ninghao Notes App _ Vue.js

应用的 html 文档的标题我们也可以改成这个 ... 复制一下 .. 粘贴到 title 标签里面 ..

在这个添加笔记的按钮上再添加点额外的 css 类 .. ui right floated 让它靠右显示 .. basic violet button 一个简单的紫色按钮 ..

再给笔记添加一个包装 .. 上面用一下 Semanitc UI 的 item ， ui divided items ..

然后去改造一下 Note 组件的模板 .. 一组 div。上面加上 item 这个类 .. 里面再包装一个 div .. 上面加上 content .. 它里面先添加一个标题 .. 一组 div，上面加上 header .. 这个包装里面是具体的内容 ..