legs+ 发表于 2025-6-30 11:22:34

推荐一个css框架：

Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
Bulma 是一个免费的开源框架，它提供了可立即使用的前端组件，您可以轻松组合这些组件来构建响应式 Web 界面。

https://bulma.io/（不知道是否要科学上网）

legs+ 发表于 2025-6-30 14:01:37





上面是阿里的通用大模型，蛮好用的，大家可以试试

legs+ 发表于 2025-6-30 14:05:04

我的经验是这样：

css堆积起来的一定是屎山代码，不出问题，大家不用理会，一旦出问题，哪里样式有变化改哪里就是了

legs+ 发表于 2025-6-30 14:11:21


legs+ 发表于 2025-6-30 22:04:40




上面是uikit框架写的一个背景图片


代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.4/dist/css/uikit.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.19.4/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.19.4/dist/js/uikit-icons.min.js"></script>
    <title>uikit图像</title>
</head>

<body>
    <div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light"
      data-src="https://picsum.photos/600/800" uk-img>
      <h1>Background Image</h1>
    </div>
</body>

</html>

legs+ 发表于 2025-6-30 22:07:14

为了证实上面的效果，我把英文文字改为中文









是不是很so easy！

legs+ 发表于 2025-7-2 10:09:37

刚刚写了一个手风琴效果，效果如下奉上




legs+ 发表于 2025-7-2 10:53:57

原始效果：





美化以后的效果：



legs+ 发表于 2025-7-2 11:04:32

文章原始代码：






文章美化以后的代码效果：



页: [1]
查看完整版本: 推荐一个css框架：