V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
mrgblues
V2EX  ›  JavaScript

有没有写 css 样式的教学类内容

  •  
  •   mrgblues · 156 天前 · 3060 次点击
    这是一个创建于 156 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在学前端,发现样式看起来简单写起来难。

    大佬们有没有类似那种可以学习写样式技巧,一个个案例去实现的学习课程, 或者其他推荐的 css 入门 /进阶方式。

    28 条回复    2022-01-27 14:33:10 +08:00
    murmur
        1
    murmur  
       156 天前
    样式很简单的,flex 布局起步,ie 兼容性才叫头大,写不好一般说明对页面布局拆分不到位,从大到小写,不要从小往大写,第一步考虑的是主布局,几分栏,哪里定哪里变宽
    Huelse
        2
    Huelse  
       156 天前   ❤️ 2
    mrgblues
        3
    mrgblues  
    OP
       156 天前
    @murmur 有在学 flex 布局,真的很方便。页面布局拆分真的是一门学问,所以想找些优秀的教程案例学习下.. 还有一些小技巧也需要积累下经验,之前不会弄消息的红点提示、还有背景内容的叠加之类的
    murmur
        4
    murmur  
       156 天前   ❤️ 3
    不要上来学歪门邪道,现代 css 本质上是观察的技术,要掌握大局观,上来抠细节只会死的更快

    比如 V2EX ,他的布局是什么样的,是不是上面一个顶栏下面内容区域,内容区域有侧栏,这里又怎么样,浏览器放大内容区域会放大么,侧栏和内容的比例如何,是全定死还是百分比还是活动,这样拆下去
    mrgblues
        5
    mrgblues  
    OP
       156 天前
    @Huelse 谢谢,我看看
    golangLover
        6
    golangLover  
       156 天前 via Android   ❤️ 1
    mrgblues
        7
    mrgblues  
    OP
       156 天前
    @murmur 好的,我要学会观察和思考!
    murmur
        8
    murmur  
       156 天前   ❤️ 1
    @mrgblues 小技巧直接抄,可能你的需求打到 google 里别人有现成的,或者极端点图片搞定,红点那种就最简单绝对布局偏移出去,overflow 允许他出去显示就完了,现代 css 真的好方便,以前 ie8-年代圆角都没有,红点都得用图,或者更土,那个年代还在用各种闪光的 new 图片
    nanvon
        9
    nanvon  
       156 天前   ❤️ 1
    https://www.zhangxinxu.com/wordpress/ 张鑫旭的博客不错,每天都看几篇。他只关注 HTML 、CSS 、JavaScript
    molika
        10
    molika  
       156 天前 via iPhone
    不要去学要去写遇到问题就去搜索写多了就能接受了后面你写的速度就会越来越快
    alexad
        11
    alexad  
       156 天前   ❤️ 1
    TomatoYuyuko
        12
    TomatoYuyuko  
       156 天前
    同意上面说的,布局拆分才是重点,拆分的好事半功倍,当然了这是经验活,你可以试着仿写一些大的门户网站的布局,写出布局就好不用填细节
    hgc81538
        13
    hgc81538  
       156 天前   ❤️ 1
    http://www.csszengarden.com/
    相同的 html, 套用不同 css 有不同風格, 直接 inspect dom 學習
    rongchuan
        14
    rongchuan  
       156 天前
    建议看书,有些基础的内容不理解的话还是比较难受的。https://book.douban.com/subject/35021471/
    GeekJason
        15
    GeekJason  
       156 天前   ❤️ 1
    mrgblues
        16
    mrgblues  
    OP
       156 天前
    @golangLover 我看了下这个 https://csslayout.io/ 看起来很不错,点开了页面第一个 Accordion ,这个好像没有完整代码?只告诉你一些代码结构 /提示吗?
    mrgblues
        17
    mrgblues  
    OP
       156 天前
    @GeekJason 这个我在 b 站关注了,讲得太棒了,我的 flex 和 css selector 就是看他视频学的。感谢
    mrgblues
        18
    mrgblues  
    OP
       156 天前
    @rongchuan 不错的建议,找时间系统看一看。
    AyaseEri
        19
    AyaseEri  
       156 天前
    学 PS 作图有助于提升 css 姿势水平
    inhons
        20
    inhons  
       156 天前
    dcsuibian
        21
    dcsuibian  
       156 天前   ❤️ 1
    要成体系的,专业的教学资料,还是看书最靠谱。网上的资料水平参差不齐,有很大的鉴别成本。

    推荐《精通 CSS 》(原名《 CSS Mastery 》),我个人感觉已经挺好了

    《 CSS 权威指南》不建议看,至少不建议看中文版,翻译质量很差。
    ospider
        22
    ospider  
       156 天前
    如果是前端工程师,请认真学习基础理论。如果是后端的话,直接上 tailwind 一把梭,爽得很。
    golangLover
        23
    golangLover  
       156 天前 via Android
    @mrgblues 因为这个是 layout ,所以只有这些东西。不过我觉得已经挺有用了
    doocii
        24
    doocii  
       156 天前
    abbenyyy
        25
    abbenyyy  
       156 天前
    其实使用 flex 布局,大部分兼容问题都有 [browserslist]( https://github.com/browserslist/browserslist) 解决了,绝大部分前端框架都使用了这个库,但这个项目我看了一下赞助众筹数目也不乐观,很担心也会像之前的那个谁删库...

    但这几天遇到 Safir 的 100vh 问题,属实难搞..而且苹果开发人员还说它的 100vh 定义与别人不同是特性,不是 bug...
    ecletics
        26
    ecletics  
       156 天前 via iPhone
    B 站 搜 表严肃 CSS
    通俗易懂,我是看这个入门的
    initd
        27
    initd  
       156 天前
    微信阅读 《深入解析 CSS 》

    我做了一些短链
    csslayout.moz.one
    csstrig.moz.one

    想添加短链 api.moz.one
    查看全部短链 list.moz.one
    ccraohng
        28
    ccraohng  
       155 天前
    没有,一个一个属性记、练习,然后自己找设计稿画网页
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1154 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 90ms · UTC 19:11 · PVG 03:11 · LAX 12:11 · JFK 15:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.