本站 html+css 常用样式备忘集
本文提供HTML+CSS常用样式备忘，包括图片格式和卡片样式，旨在方便开发者快速查阅和复用。
本文最后由 荒野孤灯 更新于 2023 年 11 月 20 日 09 时 15 分，已有 524 天未更新。今日被查阅 2 次，若内容或图片资源失效，请留言反馈，谢谢！
摘要由 AI 智能生成
本文存储本站常用样式，备忘用！！！
图片格式
门口的广州塔
<style>
.PostContent .pic-container {
margin-left: 1px;
margin-right: auto;
text-align: center;
margin-bottom: 15px;
}
.PostContent .typecho-caption {
border: 1px dashed #ddd;
text-align: center;
line-height: 14px;
display: inline-block;
margin-left: -1px;
margin-top: -1px;
background: #999;
}
.PostContent .typecho-caption img {
margin: 0;
padding: 0;
}
.PostContent .typecho-caption p {
line-height: 14px;
font-size: 12px;
padding: 5px 20px 5px 20px;
margin: 0px;
border-top: 1px dashed #ddd;
color: #ccc;
background: #999;
}
.typecho-caption-text{
text-align:center;
}
</style>
<!-- 单张图片 -->
<div class="PostContent" id="PostContent">
<p>
<div class="pic-container">
<div class="typecho-caption aligncenter" style="max-width: 680px">
<div style="margin: 5px">
<a href="https://kexue.fm/usr/uploads/2018/05/1668273303.jpg" title="点击查看原图" target="_blank"><img src="https://kexue.fm/usr/uploads/2018/05/1668273303.jpg" style="max-width: 100%" alt="门口的广州塔" /></a>
</div>
<p class="typecho-caption-text">门口的广州塔</p>
</div>
</div><!--more-->
</p>
</div>
<!-- 两张张图片 -->
<div class="PostContent" id="PostContent">
<p>
<div class="pic-container">
<div class="typecho-caption aligncenter" style="max-width: 338px">
<div style="margin: 5px">
<a href="https://kexue.fm/usr/uploads/2018/05/1668273303.jpg" title="点击查看原图" target="_blank"><img src="https://kexue.fm/usr/uploads/2018/05/1668273303.jpg" style="max-width: 100%" alt="门口的广州塔" /></a>
</div>
<p class="typecho-caption-text">门口的广州塔1</p>
</div>
<div class="typecho-caption aligncenter" style="max-width: 338px">
<div style="margin: 5px">
<a href="https://kexue.fm/usr/uploads/2018/05/1668273303.jpg" title="点击查看原图" target="_blank"><img src="https://kexue.fm/usr/uploads/2018/05/1668273303.jpg" style="max-width: 100%" alt="门口的广州塔" /></a>
</div>
<p class="typecho-caption-text">门口的广州塔2</p>
</div>
</div><!--more-->
</p>
</div>卡片样式
<style>
.top-widget-grid {
padding-bottom: 10px;
display: inline-block;
float: left;
width: 100%;
}
.top-widget-single:first-of-type {
margin-left: 0px;
}
.top-widget-single:last-of-type {
margin-right: 0px;
}
.top-widget-single {
display: inline-block;
float: left;
max-width: 30%;
margin: 0px 1.5% 10px 0.5%;
text-align: center;
color: #989898;
font-size: 14px;
padding: 10px;
background: #999;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
.top-widget-wrapper {
display: inline-block;
float: left;
width: 100%;
}
.top-widget-single h3 {
margin-bottom: 10px;
}
.top-widget-single h3 a {
color: #ccc;
}
@media (max-width: 767px) {
.top-widget-single {
width: 32%;
max-width: 32%;
}
}
@media only screen and (max-width: 767px) {
.top-widget-single {
width: 32%;
max-width: 32%;
}
}
@media only screen and (max-width: 481px) {
.top-widget-single {
width: 47%;
max-width: 47%;
}
.textwidget{
padding-top:10px;
}
}
</style>
<div class="row1">
<div class="top-widget-wrapper">
<!--块开始-->
<div class="top-widget-grid">
<div class="top-widget-single">
<div class="top-widgets">
<h3><a href="https://ziyuan.baidu.com/linksubmit/url" rel="external nofollow noopener noreferrer" target="_blank">百度</a></h3>
<div class="textwidget">
<p style="text-align:center"><img src="https://pic.yxjnotes.top/usr/uploads/others/百度提交入口.jpg" alt="百度提交入口"></p>
<p style="text-align:center"><strong>百度提交入口</strong></p>
<p style="text-align:center"><a href="https://ziyuan.baidu.com/linksubmit/url" rel="external nofollow noopener noreferrer" target="_blank">百度搜索引擎提交</a></p>
</div>
</div>
</div>
<div class="top-widget-single">
<div class="top-widgets">
<h3><a href="https://www.google.com/webmasters/tools/submit-url" rel="external nofollow noopener noreferrer" target="_blank">谷歌</a></h3>
<div class="textwidget">
<p style="text-align:center"><img src="https://pic.yxjnotes.top/usr/uploads/others/谷歌提交入口.jpg" alt="谷歌提交入口"></p>
<p style="text-align:center"><strong>谷歌提交入口</strong></p>
<p style="text-align:center"><a href="https://www.google.com/webmasters/tools/submit-url" rel="external nofollow noopener noreferrer" target="_blank">谷歌搜索引擎提交</a></p>
</div>
</div>
</div>
<div class="top-widget-single">
<div class="top-widgets">
<h3><a href="https://www.bing.com/webmasters/homepage" rel="external nofollow noopener noreferrer" target="_blank">必应</a></h3>
<div class="textwidget">
<p style="text-align:center"><img src="https://pic.yxjnotes.top/usr/uploads/others/必应提交入口.jpg" alt="必应提交入口"></p>
<p style="text-align:center"><strong>必应提交入口</strong></p>
<p style="text-align:center"><a href="https://www.bing.com/webmasters/homepage" rel="external nofollow noopener noreferrer" target="_blank">必应搜索引擎提交</a></p>
</div>
</div>
</div>
<!--/块结束-->
</div>
</div>
文章标题：本站 html+css 常用样式备忘集
分类标签：折腾，备忘，文章样式
文章链接：https://www.80srz.com/posts/470.html
许可协议： 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
分类标签：折腾，备忘，文章样式
文章链接：https://www.80srz.com/posts/470.html
许可协议： 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)