Android 老码农,Flutter 三年经验。
最近在学 Web 开发。
目标是能从 0 开始独立做简单的 Web 。
感觉比起 Vue ,React ,Angular 之类框架本身(至少简单 Web 不用学的很深入),CSS 更让我觉得困难。
我现在的难题是,一个界面,怎么布局,怎么摆,感觉很困难。
写起来很有挫折。
写一点,卡一点,查一点。
找了一些 CSS 教程,学完感觉似乎没有改善。
这种只能靠多练习?
1
LandCruiser 2023-07-03 11:41:25 +08:00 1
你自己已经说出答案了,卡一点查一点,解决这个问题当然是系统的学习一遍了。
|
2
1t1y1ILnW0x5nt47 2023-07-03 11:48:05 +08:00 2
css 也不能说最难,很多都是靠记的,相对记知识点,程序员更应该多看文档,文档之于程序员,犹如海澜之家之于男人,每逛一次都有新发现
|
3
insanny 2023-07-03 11:52:03 +08:00
同前端新手,css 确实是老大难,有的布局原理(比如 line-height ,line-box 这种)看的我很痛苦..
个人感觉想系统掌握有两个方向吧,一方面需要多看别人是怎么布局的,学下主流的技巧;一方面最好能看一本类似 CSS 权威指南这种书(当然看起来可能也比较枯燥),理解各种属性的运作方式。 我觉得前期还是多看多练更重要一点,至少会觉得有“产出” |
4
mineralsalt 2023-07-03 11:52:21 +08:00 1
直接用 flex 干就行了
|
5
hardto 2023-07-03 11:55:12 +08:00 2
那就不学了,睡大觉!
|
6
murmur 2023-07-03 11:57:58 +08:00
学习能力菜,没别的理由,就算是面向 google 编程也能编出来
css 的难点是布局拆分,怎么从大到小,从外到里拆分布局,这个跟 android xml 有本质区别么 |
7
cvbnt 2023-07-03 11:58:03 +08:00 via Android
不学了,睡大觉,交给 chatgpt
|
8
Seanfuck 2023-07-03 12:00:38 +08:00
记住常用的那些就行了,也不是很多;
布局的话,常用好像也就 4 种方式: 1. inline-block 设置宽度 2. 绝对定位,position: absolute/fixed 3. flaot ,跟绝对定位相似 4. flex |
9
BwNVlwSq 2023-07-03 12:13:28 +08:00
前几年有和你差不多的感受
多写写页面吧 |
10
superedlimited 2023-07-03 12:15:42 +08:00 via iPhone
css 和传统的 android xml 布局有很大不同。仔细看 mdn 文档,多写一写,写 css 时要忘掉安卓布局那回事。
|
11
ashong 2023-07-03 12:16:20 +08:00 via iPhone
直接从 sass/scss 开始,减少重复
布局用 flex 都可以解决 |
12
darkengine 2023-07-03 12:44:28 +08:00
flex + div 一把梭
|
13
liveoppo 2023-07-03 12:57:36 +08:00
把 flex 学好,尽量用这个。有了 flex 后 css 简单太多了,以前才是难。
|
14
nnccree 2023-07-03 13:08:50 +08:00
flex + grid 基本够用了
|
15
retrocode 2023-07-03 13:09:06 +08:00
flex 布局, 除必须使用外,忘记 position: absolute 和 float
|
16
xingyuc 2023-07-03 13:15:50 +08:00
现在没有 IE 已经好太多了
|
17
Lesenelir 2023-07-03 13:16:22 +08:00
学 flex ,再看 position ,知道这两个基本的内容后再使用 tailwindcss 你就可以做出现在绝大多数的页面。
|
18
taotaodaddy 2023-07-03 13:19:00 +08:00
OP 可以换个方式切入 CSS 的学习和使用: tailwindcss
|
19
qingshui33 2023-07-03 13:19:06 +08:00
难了就不学
|
20
hhjswf 2023-07-03 13:21:39 +08:00 via Android
gpt 有没有相关应用,根据设计稿生成 css😩
|
21
redford42 2023-07-03 13:27:36 +08:00
多写,我最开始接触的时候写了三个月才好点....
|
22
NoManPlay 2023-07-03 13:28:36 +08:00
现在 flex 和 grid 直接写现代布局,然后伪类伪元素实现一些特殊效果
|
23
dcsuibian 2023-07-03 13:30:09 +08:00 via Android
《精通 CSS 》
|
24
weixiangzhe 2023-07-03 14:24:55 +08:00 1
布局只有 flex 和 grid , 其他都是历史遗留
|
25
notejava 2023-07-03 14:27:07 +08:00
作为一个后端,刚写 CSS 也挺痛苦,写多了就好了,多积累,多 F12 看看别人的网站是怎么实现的。
|
26
sentinelK 2023-07-03 14:32:22 +08:00
CSS 目前最流行的布局方式,和 Android 并没有任何区别。
横向、纵向线性布局,高宽,居中/等分/权重/向 x 对齐,外边距内边距,背景边框圆角, 如此 90%的界面已经搞定了。 |
27
sanmaozhao 2023-07-03 14:35:57 +08:00
程序员学 CSS 确实是最难的,因为
1 、它并不是个编程语言,其他语言的经验很难迁移过来 2 、很多 css 属性值的设置,并不是正交的。设置了 a 属性的值,会隐含式地牵连到 b 、c 属性的效果 如何应对? 1 、如果要求不高,就依靠 UI 库吧,用现成的 UI 组件去组合出界面来,就不用碰 css 了 2 、要求高,就只能多学多练了,感觉没啥捷径。我也推荐《精通 CSS 》这本书 |
28
poporange 2023-07-03 14:35:59 +08:00
我是爱好学习的代码,前端的 css 简直是痛苦中的痛苦...
|
29
zzzkkk 2023-07-03 14:37:26 +08:00 via Android
布局怎么摆 页面设计是产品经理的职责 也是很耗脑的工作 必须要有一个人专门做
产品经理不但要研究同类产品的界面和交互 具体细节 从运营人员里搜集汇总需求 还要有自己的微创新 前端的职责是从美工手里拿设计图 把它变成 html css js 一个人碰到了这种页面内容怎么摆怎么设计 这种难题 相当于是在做三个人的工作 也差不多是闭门造车 |
30
worldqiuzhi 2023-07-03 14:39:16 +08:00
css 自己写感觉不难 修修改改勉强能用 最怕产品指手画脚 各种骚操作 这块不好看 那块偏一点 这个组件顺序调整一下 就很搞 很浪费时间
|
31
SleepyRaven 2023-07-03 14:51:08 +08:00
"一个界面,怎么布局,怎么摆",这个算设计层面了吧
css 是把已经摆好的布局设计图用代码复现出来 我的建议是...flex 一把梭🐶 |
32
gitignore 2023-07-03 15:48:43 +08:00
v 我 500 手把手教,有问题随时问 😛
|
33
xz410236056 2023-07-03 16:14:42 +08:00
2023 年了还写 CSS ?前端不是一堆框架吗
|
34
SharkRazor 2023-07-03 16:33:13 +08:00
多写多画,找已有的网站模仿去画一遍再 f12 看看人家怎么画的,慢慢的就有思路了
|
35
AndrewAdam 2023-07-03 16:38:05 +08:00
flex
chatgpt |
36
giaodadi 2023-07-03 17:18:27 +08:00
用框架,套模板
熟能生巧 |
37
dddd1919 2023-07-03 17:24:27 +08:00
学会盒模型打天下
|
38
Ju22 2023-07-03 17:31:48 +08:00 2
关注一下张鑫旭的博客,css 总统山的人物。
|
39
wanderingaround 2023-07-03 17:57:11 +08:00
遇事不决 flex,把定位搞清楚,建议不要看太多,重点是去写,看得太多写的不多很容易不知道如何写
|
40
charmToby 2023-07-03 17:58:56 +08:00
我是后端,领导也会派一些对应的前端任务,css 什么的,知道 flex 布局,盒子模型这些东西,然后不懂的结合 chatGPT 基本就能写个七七八八了。
|
41
456789 2023-07-03 18:05:43 +08:00
反正 css 我是看一次放弃一次,建议睡大觉
|
42
Hilong 2023-07-03 19:28:45 +08:00
慕课网有一个 css 教程,跟完那个走一遍,大概对体系有个了解,后面知道怎么搜索或者给 chatgpt 提问就可以了.
|
43
id80108900 2023-07-03 23:09:44 +08:00
看得我也想好好学学 CSS 了。
|
44
ljpCN 2023-07-03 23:20:19 +08:00
https://zh.learnlayout.com/
一篇学完布局,其他的 css 用到的时候再查。 |
45
MagmaBlock 2023-07-04 06:39:18 +08:00 via Android
我是开发着 Tailwindcss 的项目一边看文档一边开发一边学的。Tailwindcss 用的都是比较现代常用的样式,而且归类归的很好,多翻翻文档就能了解各自样式应该用什么了。然后他文档也还提供了对应的 CSS ,了解怎么实现之后就只需要写相应的 CSS 了
|
46
KT0J OP |
47
taotaodaddy 2023-07-04 09:57:53 +08:00
@KT0J 和你感觉一样,当初就觉得 tailwind 是救星
如果不是做很深入的实现,一开始只学 tailwind 的类名使用就可以了,特别适合我这种半瓶水上手; 后来慢慢的,通过观察鼠标移到类名上浮现的原生 css 定义,开始扩大对原生 css 的学习,这种结合实效的学习比较不容易枯燥; 然后又了解了定位(静态,相对,绝对,固定,粘性),了解布局(块,行内,浮动,网格,弹性),这下就对整体性有了新的把握; 再往后在 taildwind 实现的不够灵活完美的地方,开始写一些 style(非常少)作为 tailwind 的补充. |
48
duan602728596 2023-07-04 11:08:51 +08:00
因为你没学过啊,所以难啊。就像现在如果让我去开发 android 我也觉得难啊,因为我不会啊。
以前干前端的都是拿着 PS ,切过各种页面的,肯定对 css 有一些理解啊。 |
49
Al0rid4l 2023-07-04 13:10:08 +08:00
看来很多人没耐心刷完 MDN 的 CSS reference...
|