如何抄人家的布局? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
abcbuzhiming
V2EX    CSS

如何抄人家的布局?

  •  
  •   abcbuzhiming 2024-07-31 16:19:45 +08:00 3630 次点击
    这是一个创建于 435 天前的主题,其中的信息可能已经有所发展或是发生改变。
    作为一个后端程序员,我承认 CSS 这东西我这辈子也不可能彻底搞明白了。所以退而求其次吧,我就是按需使用。很多时候,我其实就是要个主界面布局。

    比如说很多后端都会遇到的后端管理系统,它其实就是顶部一个 header ,下面分左右两栏,左边是菜单栏,右边是内容区域,菜单栏有个按钮,点了会折叠起来,有的系统是彻底折叠菜单栏,有的折叠起来但是留出图标宽度。每家都有自己的细节上的一点区别。现在我就是想抄这个主界面布局,抄出主界面了后其它的部分就自己慢慢填充了。但是,这个主界面布局该怎么抄呢?
    11 条回复    2024-08-01 09:35:07 +08:00
    caixiaomao
        1
    caixiaomao  
       2024-07-31 16:28:54 +08:00
    截图,发给 gpt
    potatowish
        2
    potatowish  
       2024-07-31 16:29:38 +08:00 via iPhone   1
    我直接把页面截图,在 prompt 稍加描述,发给 claude ,后续再微调就可以了
    abcbuzhiming
        3
    abcbuzhiming  
    OP
       2024-07-31 16:53:32 +08:00
    @caixiaomao
    @potatowish
    我去,真的假的,问题是这不是一个纯静态布局,它有一些可动部分的,比如我说的点击按钮可以隐藏菜单栏,再点一下就会弹出来,这种问题怎么提给大模型?
    potatowish
        4
    potatowish  
       2024-07-31 17:21:58 +08:00 via iPhone
    @abcbuzhiming 在 prompt 中说明一下,或者它给出代码后,你再继续提示它
    linauror
        5
    linauror  
       2024-07-31 18:06:27 +08:00
    直接找个 admin 后台框架呢,很多默认就是你说的这种效果的
    abcbuzhiming
        6
    abcbuzhiming  
    OP
       2024-07-31 18:23:37 +08:00
    @linauror 这类框架往往耦合了它自己一些业务逻辑,主要是 js 代码,改起来很麻烦,我只想要那个 CSS 的部分,js 的部分我有自己的想法
    Felldeadbird
        7
    Felldeadbird  
       2024-07-31 22:06:00 +08:00
    不用抄啊,直接 flex 布局。就像你 header,sidebar,content,footer
    那就 header main footer 一个上下布局。
    main 里面再一个 display flex 左右对齐 包着 sidebar 和 content 。sidebar 设定具体的宽度。剩下 conteng 区域就是展示列表了。
    Felldeadbird
        8
    Felldeadbird  
       2024-07-31 22:07:22 +08:00
    header 你想跟随滚动,flex 布局会自动顶上的。完全不需要担心。

    当然了,这是建立再手撸布局。如果你用第三方库,就用库提供的布局架构写内容就好了。自己顶多就是写点 css ,兼容手机。
    kapr1k0rn
        9
    kapr1k0rn  
       2024-07-31 23:10:04 +08:00 via iPhone
    bootstrap 文档看一天,怎么也会了
    superedlimited
        10
    superedlimited  
       2024-08-01 08:13:05 +08:00 via iPhone
    css 不要怕。看 mdn 文档,记住常用的,如宽、高、字体颜色、字体大小、背景纯色、背景渐变、几种定位( relative absolute fixed sticky )、层级 zindex 、flex 布局( justifycontent alignitem )、几个常用的伪类、伪元素、理解一下 cascade 关系。其他不常用的用到再去查,或者问问 ChatGPT 。
    2333wz
        11
    2333wz  
       2024-08-01 09:35:07 +08:00
    用 IDM 把网站下载下来,删掉你不用的,留下框架部分然后复制。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     907 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 24ms UTC 20:18 PVG 04:18 LAX 13:18 JFK 16:18
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86