推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 1027 天前的主题，其中的信息可能已经有所发展或是发生改变。
在学前端，发现样式看起来简单写起来难。
大佬们有没有类似那种可以学习写样式技巧，一个个案例去实现的学习课程， 或者其他推荐的 css 入门 /进阶方式。
 |
1
murmur 2022-01-26 11:02:03 +08:00
样式很简单的，flex 布局起步，ie 兼容性才叫头大，写不好一般说明对页面布局拆分不到位，从大到小写，不要从小往大写，第一步考虑的是主布局，几分栏，哪里定哪里变宽
|
 |
2
Huelse 2022-01-26 11:06:47 +08:00  2
|
 |
3
mrgblues OP @murmur 有在学 flex 布局，真的很方便。页面布局拆分真的是一门学问，所以想找些优秀的教程案例学习下.. 还有一些小技巧也需要积累下经验，之前不会弄消息的红点提示、还有背景内容的叠加之类的
|
|
4
murmur 2022-01-26 11:10:50 +08:00 3
不要上来学歪门邪道，现代 css 本质上是观察的技术，要掌握大局观，上来抠细节只会死的更快
比如 V2EX ，他的布局是什么样的，是不是上面一个顶栏下面内容区域，内容区域有侧栏，这里又怎么样，浏览器放大内容区域会放大么，侧栏和内容的比例如何，是全定死还是百分比还是活动，这样拆下去 |
 |
6
golangLover 2022-01-26 11:11:39 +08:00 via Android 1
|
|
8
murmur 2022-01-26 11:12:41 +08:00 1
@mrgblues 小技巧直接抄，可能你的需求打到 google 里别人有现成的，或者极端点图片搞定，红点那种就最简单绝对布局偏移出去，overflow 允许他出去显示就完了，现代 css 真的好方便，以前 ie8-年代圆角都没有，红点都得用图，或者更土，那个年代还在用各种闪光的 new 图片
|
 |
9
nanvon 2022-01-26 11:25:28 +08:00 1
https://www.zhangxinxu.com/wordpress/ 张鑫旭的博客不错，每天都看几篇。他只关注 HTML 、CSS 、JavaScript
|
 |
10
molika 2022-01-26 14:03:00 +08:00 via iPhone
不要去学要去写遇到问题就去搜索写多了就能接受了后面你写的速度就会越来越快
|
 |
11
alexad 2022-01-26 14:14:27 +08:00 1
|
 |
12
TomatoYuyuko 2022-01-26 14:16:51 +08:00
同意上面说的，布局拆分才是重点，拆分的好事半功倍，当然了这是经验活，你可以试着仿写一些大的门户网站的布局，写出布局就好不用填细节
|
 |
13
hgc81538 2022-01-26 14:47:52 +08:00 1
http://www.csszengarden.com/
相同的 html, 套用不同 css 有不同風格, 直接 inspect dom 學習 |
 |
14
rongchuan 2022-01-26 14:53:50 +08:00
建议看书，有些基础的内容不理解的话还是比较难受的。https://book.douban.com/subject/35021471/
|
 |
15
GeekJason 2022-01-26 14:56:39 +08:00 1
|
|
16
mrgblues OP @golangLover 我看了下这个 https://csslayout.io/ 看起来很不错，点开了页面第一个 Accordion ，这个好像没有完整代码？只告诉你一些代码结构 /提示吗？
|
|
17
mrgblues OP @GeekJason 这个我在 b 站关注了，讲得太棒了，我的 flex 和 css selector 就是看他视频学的。感谢
|
 |
19
AyaseEri 2022-01-26 15:16:46 +08:00
学 PS 作图有助于提升 css 姿势水平
|
 |
20
inhons 2022-01-26 18:16:45 +08:00 1
|
 |
21
dcsuibian 2022-01-26 18:51:49 +08:00 1
要成体系的，专业的教学资料，还是看书最靠谱。网上的资料水平参差不齐，有很大的鉴别成本。
推荐《精通 CSS 》（原名《 CSS Mastery 》），我个人感觉已经挺好了 《 CSS 权威指南》不建议看，至少不建议看中文版，翻译质量很差。 |
 |
22
ospider 2022-01-26 18:58:28 +08:00
如果是前端工程师，请认真学习基础理论。如果是后端的话，直接上 tailwind 一把梭，爽得很。
|
|
23
golangLover 2022-01-26 21:05:29 +08:00 via Android
@mrgblues 因为这个是 layout ，所以只有这些东西。不过我觉得已经挺有用了
|
 |
24
doocii 2022-01-26 22:12:25 +08:00
|
 |
25
abbenyyy 2022-01-26 22:55:18 +08:00
其实使用 flex 布局，大部分兼容问题都有 [browserslist]( https://github.com/browserslist/browserslist) 解决了，绝大部分前端框架都使用了这个库，但这个项目我看了一下赞助众筹数目也不乐观，很担心也会像之前的那个谁删库...
但这几天遇到 Safir 的 100vh 问题，属实难搞..而且苹果开发人员还说它的 100vh 定义与别人不同是特性，不是 bug... |
 |
26
ecletics 2022-01-27 00:07:29 +08:00 via iPhone
B 站 搜 表严肃 CSS
通俗易懂，我是看这个入门的 |
 |
27
initd 2022-01-27 00:13:54 +08:00
|
 |
28
ccraohng 2022-01-27 14:33:10 +08:00
没有，一个一个属性记、练习，然后自己找设计稿画网页
|
Select Language