[笔记] 网页切版直播班 2020 春季班 – 第五周

章节连结

这周的内容主题放在“表单”,这个让设计师、工程师往往争论不休、对使用者来说稀松平常的部分。除了表单标签的必备成员外,也提到了手机版的呈现差异。接着进入 Bootstrap 4 的介绍,并试用一些官方文件内的范例。
hex-school-logo

第五周课程重点

input 表单标签

form, input 和 submit 是表单必备的三个元素,可以跟后端服务器沟通,进行 CRUD。
ID 可以用来作 focus 效果:label 的 for 对应到 input 的 id。
form 的 action 是告知传送到的网址,也可以指定 method (表单只支援 GET 和 POST)

重设 CSS 和新增你的个人设定

CSS Reset 后,再加上全站设定 (CSS Base)

Bootstrap 4

BS4 内建 CSS Normalized ,不需要再 reset css 了。
BS4 本身是用 Sass 结构,且手写样式要和 Bootstrap CSS 分离。


经验谈

Tel 和 Date

在手机版上,和电脑版的效果是有差别的。若你越方便使用者输入,那么转换率会比较稳定。
让人惊艳的表单设计 Google,不过有些时候,为了自定样式方便,会是“模拟”效果。

Select 的侷限

select 标签默认是没有办法改变样式的,尤其是其跳出选单的部份(手机版更是从萤幕下方出现)。如果你要修改跳出选单,那只能模拟个跳出选单 <div>,要动用到 JavaScript。

CSS Reset 和 Normalized

CSS reset :全部清空
CSS normalized:有一些默认样式

工具类 utility Scss

可以尝试做自己的 util.scss,让自己有办法抽离每个专案共用的 CSS。可以自定一些自己常用的 class。


切版练习结果

目前改放置到 Github Pages 上,欢迎大家前往观看。
网址:https://github.com/andy922200/HexSchool2020Spring


相关文章

按赞加入粉丝团

延伸阅读