V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Caojx
V2EX  ›  问与答

准备转去写前端了,写官网比较流行什么布局?

  •  
  •   Caojx · 2020-09-28 08:51:04 +08:00 · 3377 次点击
    这是一个创建于 646 天前的主题,其中的信息可能已经有所发展或是发生改变。

    准备专职写前端了,业务包含官网和小程序,现在流行什么布局啊?

    24 条回复    2020-09-29 07:08:52 +08:00
    tangtanghong
        1
    tangtanghong  
       2020-09-28 08:58:31 +08:00
    响应式
    murmur
        2
    murmur  
       2020-09-28 09:07:50 +08:00   ❤️ 7
    给你什么设计图就什么布局,响应式布局是个毒药,这种设计只用于设计非常简单的网站,而且特别要求素材和内容
    gouflv
        3
    gouflv  
       2020-09-28 09:08:45 +08:00 via iPhone
    DIV+CSS (狗头)
    hackyuan
        4
    hackyuan  
       2020-09-28 09:12:14 +08:00
    @murmur 完全同意
    补充:自己写可能还行,维护别人的那就是 shit (维护成本过高,除非页面比较简单)
    Caojx
        5
    Caojx  
    OP
       2020-09-28 09:16:25 +08:00
    @murmur 比较通用的布局吗? flex 还是流式布局?
    hhluo
        6
    hhluo  
       2020-09-28 09:17:52 +08:00   ❤️ 2
    https://www.sweet-kk.top/css-layout
    入门挺好,最近刚好复习到
    kop1989
        7
    kop1989  
       2020-09-28 09:20:01 +08:00
    没有所谓的“通用”。
    觉得哪个网站的设计好,直接 f12 学习一下就好了。
    Caojx
        8
    Caojx  
    OP
       2020-09-28 09:20:16 +08:00
    @hhluo 感谢,只会移动端的 flex 布局,但是写官网好像,就会 flex 不太够用
    freak118
        9
    freak118  
       2020-09-28 09:23:58 +08:00
    @murmur 说得对 但是很多时候需求方才不管这个 就要你响应式
    lower
        10
    lower  
       2020-09-28 09:30:41 +08:00
    @murmur 遇到放飞自我的设计师才是真的难受 😭
    murmur
        11
    murmur  
       2020-09-28 09:45:00 +08:00
    @Caojx 肯定好的页面各种布局都混着用,不考虑 IE 兼容性 flex 布局是可以解决很多问题,但是也得看设计稿
    另外就是不要期望一套代码可以解决所有设备的适配问题
    tydl
        12
    tydl  
       2020-09-28 09:48:36 +08:00
    table+style
    mach945
        13
    mach945  
       2020-09-28 09:58:42 +08:00
    @murmur 响应式考察的不是前端的能力,是设计者的能力
    DOLLOR
        14
    DOLLOR  
       2020-09-28 10:01:12 +08:00   ❤️ 1
    我现在主要用 display:flex
    未来应该用 display:grid
    啥,兼容 IE6 ?打扰了。
    azcvcza
        15
    azcvcza  
       2020-09-28 10:34:33 +08:00
    没有对齐要求就是 display:flex ;如果 UI 要求文字对齐那还是老老实实用 display:table
    sixway
        16
    sixway  
       2020-09-28 10:41:43 +08:00
    flex 一把梭。
    兼容旧设备?这是要加钱的!
    echooo0
        17
    echooo0  
       2020-09-28 10:51:08 +08:00
    @hhluo 挺不错,最近正好想学习下
    murmur
        18
    murmur  
       2020-09-28 11:42:20 +08:00   ❤️ 4
    多写一点,对于新入前端的人,不要说想学什么万能灵丹妙药,要学会拆解布局 拆解模块,从大往小拆,从全局往局部拆,比如 v2ex,整个页面就是一个 header 、footer,主要内容是居中两侧留白。对于 header,也是个居中留白,左边是 logo 、搜索框,右边是常用链接,然后右边的链接不等宽等间距

    这样一点点的拆下来,每个部分逐个击破,你就会写 css 了
    weixiangzhe
        19
    weixiangzhe  
       2020-09-28 11:47:20 +08:00 via Android
    要看需不需要兼容 ie
    creanme
        20
    creanme  
       2020-09-28 11:48:31 +08:00 via Android
    ie11 flex 有些属性兼容不了,有点烦
    loveToMy1
        21
    loveToMy1  
       2020-09-28 12:01:11 +08:00
    占个楼 我也学习一下
    meteor957
        22
    meteor957  
       2020-09-28 13:19:36 +08:00
    PC 和移动单独写两套,响应式不一定适应的了 UI 。
    Sapp
        23
    Sapp  
       2020-09-28 14:41:25 +08:00
    找个自动生成的,还手写官网,你是打算收多少钱
    bzshow1
        24
    bzshow1  
       2020-09-29 07:08:52 +08:00 via Android
    去 themeforest 买个模板就可以
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2824 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 200ms · UTC 12:51 · PVG 20:51 · LAX 05:51 · JFK 08:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.