网页代码大全可复制

写页面时最烦的可复就是——明明记得某个布局怎么写，但就是网页想不起具体属性值。翻收藏夹？代码大全太慢。重新查文档？可复又得筛掉一堆过时内容。干脆自己攒一份“即粘即用”的网页代码库，存成书签或者本地HTML，代码大全需要时秒开。可复下面这些片段全是网页我在真实项目里反复用到的，每个都验证过，代码大全复制走就能跑。可复

先来个最基础的网页：一个自适应卡片，带轻微阴影和圆角。代码大全不用flex，可复也不用grid，单靠margin和padding就能让它在手机和电脑上都舒服。注意看box-sizing，我习惯全局设成border-box，省得算宽度时骂人。

<div class="card"> <h3>标题写这里</h3> <p>正文内容，随便写点。</p> </div> <style> * {  box-sizing: border-box; } .card {  background: #fff; border-radius: 16px; padding: 1.4rem 1.6rem; margin: 1rem 0; box-shadow: 0 6px 16px rgba(0,0,0,0.06); border: 1px solid #efefef; max-width: 100%; } </style>

如果你要居中一个块级元素，别再用margin: 0 auto配width了——万一父容器是flex，它反而会失效。更稳的做法是给父容器加display: flex; justify-content: center;，或者直接用margin-inline: auto。这两个我都常用，看场景。

再放一个“粘性页脚”的经典写法。以前用position: fixed会挡住内容，现在用flex让主体撑开，页脚自然沉底。注意min-height: 100vh和flex: 1的配合，这俩是核心。

<body style="display: flex; flex-direction: column; min-height: 100vh; margin: 0;"> <header>顶部</header> <main style="flex: 1;">中间内容，少的时候页脚也在底部</main> <footer>底部</footer> </body>

表单输入框的样式，浏览器默认丑得各有千秋。我一般会重置一下：去掉outline，加一点内阴影和过渡。下面这段直接复制，输入框立刻变得“现代”起来。

input, textarea, select {  font: inherit; padding: 0.6rem 0.9rem; border: 1px solid #ccc; border-radius: 8px; background: #fff; transition: border 0.15s, box-shadow 0.15s; width: 100%; max-width: 400px; } input:focus, textarea:focus {  outline: none; border-color: #0a6b7c; box-shadow: 0 0 0 3px rgba(10,107,124,0.15); }

还有那个老生常谈的“清除浮动”。现在虽然用得少，但万一你维护老项目，还是得备着。我习惯用display: flow-root，比伪元素干净，一行搞定。

.clearfix {  display: flow-root; }

响应式图片，别只写width: 100%，那样图片可能被拉伸变形。加上height: auto和object-fit: cover（如果用在固定比例容器里），效果更稳。

img {  max-width: 100%; height: auto; display: block; } .cover-img {  width: 100%; height: 200px; object-fit: cover; border-radius: 12px; }

有时候需要隐藏滚动条但保留滚动功能——比如横向滚动的标签栏。用::-webkit-scrollbar把宽度设为0，再配合scrollbar-width: none给Firefox。亲测有效。

.hide-scrollbar {  scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ overflow: auto; } .hide-scrollbar::-webkit-scrollbar {  display: none; /* Chrome/Safari */ }

最后提一嘴：这些代码片段我都是直接放在一个本地HTML文件里，用的时候打开，选中，复制。比翻GitHub gist快多了。你也可以建个自己的“代码大全”，按功能分类，比如布局、表单、动画、工具类。时间一长，那就是你的私人武器库。

哦对了，别迷信“大全”两个字——网上很多所谓大全其实塞了一堆废弃属性。上面这些都是我筛过的，能跑，不闹心。如果你有更妙的片段，欢迎交换。