Day 29 | 来组合个画面吧 - Part 2

昨天稍微提了一些我切画面时,
对 HTML 的规划,
今天就来讲 CSS 的部分啦!
(铁人赛剩一天好兴奋啊~终於可以休息一下了)

在 CSS 撰写习惯上,
有人喜欢加上注解,
比较好知道这边在设定哪个区块
(当然这个前提是你没有自由式的跳着下 CSS),
有协作需求的时候,可能其他人也比较不会一脸问号,
或是想拿砖头砸你(或是埋了你),
有人却觉得注解这种东西根本不需要存在,
只要你命名够清楚,
有照着一些规范的撰写习惯,
自然不需要注解这种东西。

我在写的时候目前还是会习惯加上注解,
而且还是有一点长度的那种注解,
这样找起来比较好找(我就懒),
大家共用的 CSS 设定我就会整理到最上面。

其实 CSS 的细节在前面的篇章里面都有稍微讲过了,
大概最大的差别就是,
我的 .item 外层我多包了一层 .item-group
好去控制这些 .item 项目,
以及我开头 importGoogle Fonts 的字体,
还有 Font Awesome

这个版面的配色我是用 Color Hunt 找的,
我的这一篇 Day 05 | 给我点颜色瞧瞧 有提到其他的色彩网站,可以参考看看,

讲了这麽多,
最後来提供我的 codepen

以上就是今天的内容,如果有讲不对的地方再请各位留言让我知道,谢谢。
明天就是最後一天啦~就打个结语阿捏。


<<:  微聊 铁人赛 最终回

>>:  [Day29] grid 项目对齐属性

Progressive Web App Badging API 入门实做 (8)

什麽是 Badging API Badging API 让 App 能够显示通知数字,不过通知数字的...

第二十六天:UI切版 & 元件-图文资讯元件、ICON字型 & SVG、通知讯息元件

今天的内容 一、图文资讯元件 二、ICON: Webfont & SVG 三、通知讯息元件 ...

从 React 开始,让你的网页material-ui起来 [Day 3] 排版布局Container

网页的开始 於布局排版 现在的年代 也需要RWD适合部分版型 所以我们就由布局开始吧 常常会看到一种...

[Day 23] - React 取得永丰汇率api的json资料(1)

学会游泳会好的方法就是掉进水里 今天就直接来用react 取api 我直接参考React官网的教学:...

Day21-State

前言 昨日我们学会了Props,而Props是由外传进来的资料,进而改变组件。而组件本身的状态我们称...