V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
abcbuzhiming
V2EX  ›  CSS

如何抄人家的布局?

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

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

    当然了,这是建立再手撸布局。如果你用第三方库,就用库提供的布局架构写内容就好了。自己顶多就是写点 css ,兼容手机。
    kapr1k0rn
        9
    kapr1k0rn  
       47 天前 via iPhone
    bootstrap 文档看一天,怎么也会了
    superedlimited
        10
    superedlimited  
       46 天前 via iPhone
    css 不要怕。看 mdn 文档,记住常用的,如宽、高、字体颜色、字体大小、背景纯色、背景渐变、几种定位( relative absolute fixed sticky )、层级 zindex 、flex 布局( justifycontent alignitem )、几个常用的伪类、伪元素、理解一下 cascade 关系。其他不常用的用到再去查,或者问问 ChatGPT 。
    2333wz
        11
    2333wz  
       46 天前
    用 IDM 把网站下载下来,删掉你不用的,留下框架部分然后复制。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   942 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 19:47 · PVG 03:47 · LAX 12:47 · JFK 15:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.