推荐一个css框架：

legs+

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

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| 字数 23

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

legs+ · 发表于 2025-6-30 14:05:04| 字数 55

我的经验是这样：

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

legs+ · 发表于 2025-6-30 14:11:21| 字数 0

legs+ · 发表于 2025-6-30 22:04:40| 字数 856

上面是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| 字数 31

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

是不是很so easy！

legs+ · 发表于 2025-7-2 10:09:37| 字数 18

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

legs+ · 发表于 2025-7-2 10:53:57| 字数 13

原始效果：

美化以后的效果：

legs+ · 发表于 2025-7-2 11:04:32| 字数 19

文章原始代码：

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

推荐一个css框架：

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

浏览过的版块