当前位置：首页 > wzjs >正文

网页美工设计教案安徽seo

wzjs 2025/8/7 6:58:24

网页美工设计教案,安徽seo,企业官网的重要性,企业vi设计模板概述小红书有个博主自己搞的笔记排版工具叫“流光卡片”，类似的还有个Markdown排版工具叫MD2Card。我这个版本类似，但是自己写的东西，控制性更好。初期就写了个静态页面，后期结合Godot快速生成，并可能结合JS库&a…

概述

小红书有个博主自己搞的笔记排版工具叫“流光卡片”，类似的还有个Markdown排版工具叫MD2Card。

我这个版本类似，但是自己写的东西，控制性更好。

初期就写了个静态页面，后期结合Godot快速生成，并可能结合JS库（例如html2canvas）实现生成页面转图片以及批量下载。

初期代码

因为这篇写于CSS原子化那篇之前，所以样式还是不太够简洁和复用。后续采用原子化设计。这里只做记录。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style>
*{padding:0px;margin: 0px;}
body{padding-top: 20px;}
h1,h2{margin: 10px 0px;}
p{line-height: 1.8em;text-indent: 2em;font-size: 14px;
}
img{max-width: 100%;margin: 5px 0px;border-radius: 5px;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.out_box{color: #a3a3a3;height: 500px;aspect-ratio: 3/4;/* background:linear-gradient(to right, rgba(0, 179, 255, 0.434), rgba(0, 81, 255, 0.603)); */background:url(bg.png);margin: 0px auto;padding: 20px;
}
.inner_box{aspect-ratio: 3/4;border-radius: 10px;border: 1px solid rgb(22, 67, 67,0.1);padding: 10px;
}
span.date{font-size: 12px;border-bottom: 1px solid #6c8bcc;color: #6c8bcc;
}
.glass{background-color:rgba(255, 255, 255, 0.05);backdrop-filter:blur(10px);
}.shadow{box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="out_box"><div class="inner_box glass shadow"><h1>自制流光卡片</h1><span class="date">2025-2-24</span><h2>概述</h2><p>基于网页实现的4:3页面效果。用于截图后发小红书。模仿小红书“流光卡片”作者。</p><img src="1.png" alt="" srcset=""><p>后续由MarkDown直接生成</p></div>
</div>
</body>
</html>