用户登录

表单元素的样式可以单独放在一个样式表里,在项目的下面新建一个样式表,放在 app/styles 的下面,名字是 form.css , 按钮的样式也可以单独放在一个样式表里,同样在这个目录的下面,新建一个 button.css,等会儿可以把按钮相关的样式放在这个样式表里。

打开应用的根组件,就是这个 app 组件,在组件里面导入使用刚才创建的这两个样式表,@import 位置是当前目录 styles 下面的 form.css ,还有一个是当前目录 styles 下面的 button.css。

form.css

然后先在 form.css 样式表里给表单还有表单元素添加一些样式。 调整一下编辑器的窗口宽度,还有浏览器的窗口宽度。这样修改样式的时候,保存样式文件以后可以马上看到元素样式的变化。

先设计一下 form 这个类的样式,用 margin-bottom 添加 32 个像素的下边的外边距。

再设计一下 .form 下面的 .header 也就是表单里的大标题,用 margin-bottom 添加 40 个像素的下边的外边距。

表单元素都会使用一个带 field 类的 div 元素包装一下,这里可以把 font-size 设置成 16 像素。 再用 color 把文字颜色设置成 --primary-text-color 这个变量的值。 下面再用 margin-bottom 添加 32 像素的下边的外边距。

input

在表单的文本框元素的上面可以添加两个类,修改一下登录组件这里用的这个文本框元素,添加一个 class 属性,里面添加两个类,input 还有 text 。同样在这个密码元素的上面也加上 input 还有 text 这两个类。 回到 form 样式表。

再设计一下 .field 下面的 .input 这个类的样式, 用 color 把文字颜色设置成 primary-text-color 。背景颜色可以使用之前我们定义的 --primary-background 这个变量的值。

box-sizing 设置成 border-box,再用 padding 添加个内边距,上下是 8 像素,左右是 0 。 再用 margin-bottom 在元素的下边添加 8 个像素的外边距。

width 可以设置成 100% ,border 设置成 none 去掉默认的边框,再把 outline 也设置成 none。

下面可以设计一下 .field 下面的 .input.text 的样式,用 border-bottom 在元素下边添加 1 个像素的实线边框,边框的颜色使用之前我们定义的 --line-color 。

再设计一下 .field 下面的 .input.text:focus ,也就是焦点状态下的文本框,用 border-bottom-color 修改一下边框颜色,设置成 --highlight-line-color 。

button.css

按钮的样式可以放在这个 button.css 样式表里。 按钮元素上会有一个 .button 类,设计一下这个类的样式, font-size 字号设置成 16 像素, color 可以是白色, padding,上下是 8 像素,左右是 24 像素。 background 背景颜色的值可以使用一个变量。

打开项目里的 theme.css 这个样式表,先在 page.light 里面定义两个变量,一个是 --primary-button-background,表示按钮的背景颜色,在亮色主题下面,按钮背景颜色是黑色。

下面再添加一个 --outline-button-color, 这个变量的值也是黑色。 复制一下添加的这两个变量。 把它们放在 .page.dark 里面,在暗色主题里面,主要按钮的背景颜色是 #555555 ,--outline-button-color 也设置成 #555555 。

然后回到 button 样式表,用一下我们定义的 --primary-button-background 这个变量的值。 border 是两个像素的实线,颜色是 --outline-button-color 。

大号按钮上会除了 button 这个类以外,还有一个 large 这个类,设计一下大号按钮的样式,可以把内边距设置的大一些。上下是 14 像素,左右是 40 像素。

预览

最后再到浏览器上预览一下这个用户登录表单,文本框进入焦点状态的时候会改变它的边框颜色,再切换一下应用的主题,观察一下样式的变化。

设计表单元素样式(form.css, button.css)《 Vue.js 项目实践:身份验证 》

统计

13799
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点