随笔分类 -  (新) CSS

上一页 1 2 3 4 下一页
CSS – Grid
摘要：前言 有一种布局方式叫 Layout Grid 网格布局. 在 Figma – Layout Grid 有介绍过. 在 RWD 概念篇 也有讲到过 要实现这种布局, 可以用 Flex 也可以用 Grid. Bootstrap 用的方法就是 Flex. Grid 出生在 Flex 之后, 所以先掌握 阅读全文
posted @ 2022-02-08 14:33 兴杰 阅读(484) 评论(0) 推荐(0)
CSS – Design System
摘要：介绍 这篇 Tailwind CSS 的教程:Translating a Custom Design System to Tailwind CSS 充分的体现了什么是 Design System. 设计讲求原则, 一致性, 规律, 所以它需要对很多元素做规则, 这些就可以称为 Design Syst 阅读全文
posted @ 2022-02-07 10:00 兴杰 阅读(171) 评论(0) 推荐(0)
CSS – 网页设计 Web Design
摘要：前言 Web Design 很广很深. 我记得许多年前第一次想介入设计工作 (我是后端工程师), 我就上网搜索了一下. 就看见了乔布斯著名的一句话: Design is not just what it looks like and feels like. Design is how it work 阅读全文
posted @ 2022-02-06 22:35 兴杰 阅读(283) 评论(0) 推荐(0)
CSS – Tailwind CSS
摘要：前言 很多时候 CSS 未必是需要管理的, 比如做网站, Landing Page (类似宣传单). 很多时候做了 > 用了 > 丢 > 再做新的. 它没有 "维护" 的必要. 所以也就不需要搞什么 Sass 去做代码管理之类的. 反而需要的是快速开发. 而快速开发最快的方式就是只写 HTML 不写 阅读全文
posted @ 2022-02-06 22:27 兴杰 阅读(1088) 评论(0) 推荐(0)
CSS – Sass & SCSS
摘要：前言 CSS 代码多了就不好管理了, 这是它语法先天的不足. Sass 就是加强它语法的, Sass 为 CSS 引入了一些 JS 语言的特性, 比如 variable, function, parameter, extend, import. Sass 的 variable 和 import (用 阅读全文
posted @ 2022-02-05 19:20 兴杰 阅读(929) 评论(0) 推荐(0)
CSS – RWD (Responsive Web Design) 概念篇
摘要：介绍 Only PC 以前是没有手机的, 只有电脑, 所以做开发, 只需要开发电脑版本就可以了. Mobile Version 后来手机诞生, 有钱的公司就做两个版本, 一个手机版, 一个电脑版. 没钱的公司就只做电脑版. Mobile Friendly 再后来手机越来越火, 没钱的公司也只能硬想办 阅读全文
posted @ 2022-02-05 11:50 兴杰 阅读(689) 评论(0) 推荐(0)
CSS – Icon
摘要：前言 Icon 并不容易搞. 市场有许多平台支持 Icon, 有些收费有些免费. 有些 icon 很丰富, 有些很缺失. 尤其是在做网站的时候寻找 icon 是一个挺累的事情. 这篇就来聊聊 icon. 各大平台 1. Material Icons Google 出的, 免费, 缺点是少, 它有 F 阅读全文
posted @ 2022-02-03 11:59 兴杰 阅读(686) 评论(0) 推荐(0)
CSS – 单侧环境 (stylelint, prettier, tailwind)
摘要：前言 真实项目中, 通常搭配 Webpack 之类的工具使用: Webpack 学习笔记 这篇记入的是单元测试的环境 参考: Get started with Tailwind CSS Automatic Class Sorting with Prettier VS Code Extension s 阅读全文
posted @ 2022-01-31 23:33 兴杰 阅读(427) 评论(0) 推荐(0)
CSS – Transition & Animation
摘要：前言 之前的笔记 CSS – W3Schools 学习笔记 (3) 就有讲过 CSS Transitions 和 CSS Animations. 这里做一个整理, 补上一些细节. Transitions Link to W3Schools 5 个属性可以用 transition-property t 阅读全文
posted @ 2022-01-31 14:19 兴杰 阅读(189) 评论(0) 推荐(0)
CSS – word-break, overflow-wrap, word-wrap, white-space
摘要：参考 word-break 和 word-wrap 的区别 (我以为这篇已经很厉害了) 彻底搞懂word-break、word-wrap、white-space (没想到, 这一篇更厉害) white-space white-space 是负责管理空格, 换行的, 比如 &nbsp; <br>, \ 阅读全文
posted @ 2022-01-30 23:08 兴杰 阅读(260) 评论(0) 推荐(0)
CSS – Dimension min-content, max-content, fit-content
摘要：前言 无意间在 practice 的时候看到视频使用, 以前没有听过. 它有点像 Figma 的 hug content, 据说 CSS 2.1 也是有类似的概念, 只是没有被正式纳入 CSS 里. CSS 3 才开始用的. 参考: [译] CSS 内在尺寸教程（min-content、max-co 阅读全文
posted @ 2022-01-30 21:32 兴杰 阅读(156) 评论(0) 推荐(0)
CSS – z-index
摘要：介绍 z-index 是用来设置 element 层次高低的 (当 element 重叠的时候) 参考: 4 reasons your z-index isn’t working (and how to fix it) 深入理解 CSS 属性 z-index Z-index CSS Tutorial 阅读全文
posted @ 2022-01-30 18:17 兴杰 阅读(162) 评论(0) 推荐(0)
CSS – Naming Conversion
摘要：参考: CSS Naming Conventions that Will Save You Hours of Debugging Class Name kebab-case .hero-section {} JS Used Class Name prefix "js" + kebab-case cl 阅读全文
posted @ 2022-01-30 15:09 兴杰 阅读(84) 评论(0) 推荐(0)
CSS – Display block, inline, inline-block
摘要：前言 之前 W3Schools 学习笔记就有提到了 CSS Layout - The display Property 这篇做更多的解释. 参考: CSS Display FLEX vs Block, Inline & Inline-Block Explained Disfault Display 阅读全文
posted @ 2022-01-30 13:17 兴杰 阅读(94) 评论(0) 推荐(0)
CSS – Selector
摘要：前言 这篇记入一些我常用到. 以前写的笔记 css 选择器 (学习笔记) Whatever (*) * {} By Id (#) #id {} By Class (.) .class-name {} By Tag p {} By Attribute [data-value] {} 方括弧配上 att 阅读全文
posted @ 2022-01-29 21:23 兴杰 阅读(774) 评论(0) 推荐(0)
HTML & CSS – Practice Projects
摘要：前言 学完了 w3school 就要练练手了. 这篇是记入我学习的过程, 和知识点. update: 2022-02-27 用文章来表达太难了, 用视频比较合理. 所以我就没有继续写了. 这里记入几篇教程: One Page Full Website Project For Practice | H 阅读全文
posted @ 2022-01-29 14:01 兴杰 阅读(137) 评论(0) 推荐(0)
CSS – Flex
摘要：前言 Flex 诞生在 Float 之后, Grid 之前, 它主要是取代 Float 来实现布局. 而它没有 cover 到的地方则由 Grid 弥补. 所以当前, 我们做布局时, 几乎不用 Float, 大部分都用 Flex, 少许地方用 Grid (通常 Flex 搞不定才会用 Grid). 阅读全文
posted @ 2021-12-29 20:30 兴杰 阅读(371) 评论(0) 推荐(0)
CSS – W3Schools 学习笔记 (3)
摘要：CSS Rounded Corners Link to W3Schools 它是用来画圆角的, 假设有 1 给正方形, 100px. border-top-left-radius: 30px; before after 也可以用 percentage. 如果是正方形, 4 个角 50% 就变成圆形了 阅读全文
posted @ 2021-12-11 14:43 兴杰 阅读(233) 评论(0) 推荐(0)
CSS – W3Schools 学习笔记 (2)
摘要：CSS Combinators Link to W3Schools body p = body 里的所有 p descendant body > p = body first child layer 所有的 p div + p = div next p (must be next element a 阅读全文
posted @ 2021-12-10 22:07 兴杰 阅读(106) 评论(0) 推荐(0)
CSS – W3Schools 学习笔记 (1)
摘要：CSS Color Link to W3Schools 这里讲的是 color 的 value, 它可以用在许多属性上, 比如 background-color, color, border-color 等等 color 值有许多写法, RGB, HSL, HEX, ColorName 通过 VS 阅读全文
posted @ 2021-12-05 21:48 兴杰 阅读(195) 评论(0) 推荐(0)

上一页 1 2 3 4 下一页