缩略图部分

macbook_100.png
这部分完全是手工完成,先把网站截图 png 保存,再使用 psd 文件导入 photoshop 中替换截图图层,再导出 png 文件。类似的 mockups 非常多,可以到 www.ananyiyi.com 去下载。

缩略图psd文件
mockups 文件 psd 格式 photoshop 专用

VPS方案页面

此处为VPS方案按颜色分类背景 gray,yellow,blue,dablue,red,green 等区分

panel-gray
  • 核心:核CPU
  • 内存:B
  • 硬盘:GB
  • 流量:B
  • 端口:bps
  • 架构:
  • 价格:元/月
  • 传送:购买链接
panel-blue
  • 核心:核CPU
  • 内存:B
  • 硬盘:GB
  • 流量:B
  • 端口:bps
  • 架构:
  • 价格:元/月
  • 传送:购买链接
panel-dablue
  • 核心:核CPU
  • 内存:B
  • 硬盘:GB
  • 流量:B
  • 端口:bps
  • 架构:
  • 价格:元/月
  • 传送:购买链接
panel-red
  • 核心:核CPU
  • 内存:B
  • 硬盘:GB
  • 流量:B
  • 端口:bps
  • 架构:
  • 价格:元/月
  • 传送:购买链接
panel-yellow
  • 核心:核CPU
  • 内存:B
  • 硬盘:GB
  • 流量:B
  • 端口:bps
  • 架构:
  • 价格:元/月
  • 传送:购买链接
panel-green
  • 核心:核CPU
  • 内存:B
  • 硬盘:GB
  • 流量:B
  • 端口:bps
  • 架构:
  • 价格:元/月
  • 传送:购买链接

VPS方案页面

此处为VPS方案按bs4基础颜色分类及背景 default,success,info,warning,danger 等区别

panel-default
  • 核心:核CPU
  • 内存:B
  • 硬盘:GB
  • 流量:B
  • 端口:bps
  • 架构:
  • 价格:元/月
  • 传送:购买链接
panel-success
  • 核心:核CPU
  • 内存:B
  • 硬盘:GB
  • 流量:B
  • 端口:bps
  • 架构:
  • 价格:元/月
  • 传送:购买链接
panel-info
  • 核心:核CPU
  • 内存:B
  • 硬盘:GB
  • 流量:B
  • 端口:bps
  • 架构:
  • 价格:元/月
  • 传送:购买链接
panel-warning
  • 核心:核CPU
  • 内存:B
  • 硬盘:GB
  • 流量:B
  • 端口:bps
  • 架构:
  • 价格:元/月
  • 传送:购买链接
panel-danger
  • 核心:核CPU
  • 内存:B
  • 硬盘:GB
  • 流量:B
  • 端口:bps
  • 架构:
  • 价格:元/月
  • 传送:购买链接

VPS方案代码

这个是bs4自适应代码 col-md-4 一排三列 col-md-6 一排二列

<div class="row mb-3 cloud-plan">
    <div class="col-md-6">
        <div class="panel panel-gray">
            <div class="panel-heading">
                 H
            </div>
            <div class="panel-body">
                <ul>
                    <li>核心:核CPU</li>
                    <li>内存:B</li>
                    <li>硬盘:GB</li>
                    <li>流量:B</li>
                    <li>端口:bps</li>
                    <li>架构:</li>
                    <li>价格:元/月</li>
                    <li>传送:<a href="https://locbb.com/go/" target="_blank" rel="external nofloow">购买链接</a></li>
                </ul>
            </div>
        </div>
    </div>

</div>

警告标识行

相关代码:

<div class="alert alert-primary" role="alert">A simple primary alert—check it out!</div>
<div class="alert alert-secondary" role="alert">A simple secondary alert—check it out!</div>
<div class="alert alert-success" role="alert">A simple success alert—check it out!</div>
<div class="alert alert-danger" role="alert">A simple danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">A simple warning alert—check it out!</div>
<div class="alert alert-info" role="alert">A simple info alert—check it out!</div>
<div class="alert alert-light" role="alert">A simple light alert—check it out!</div>
<div class="alert alert-dark" role="alert">A simple dark alert—check it out!</div>

按钮链接

PrimarySecondarySuccessdangerwarninginfolightdark

<a class="btn btn-primary" href="https://locbb.com/go/Iw==">Primary</a>
<a class="btn btn-secondary" href="https://locbb.com/go/Iw==">Secondary</a>
<a class="btn btn-success" href="https://locbb.com/go/Iw==">Success</a>
<a class="btn btn-danger" href="https://locbb.com/go/Iw==">danger</a>
<a class="btn btn-warning" href="https://locbb.com/go/Iw==">warning</a>
<a class="btn btn-info" href="https://locbb.com/go/Iw==">info</a>
<a class="btn btn-light" href="https://locbb.com/go/Iw==">light</a>
<a class="btn btn-dark" href="https://locbb.com/go/Iw==">dark</a>

标题样式

h1 Simple default styles for headings

h2 Simple default styles for headings

h3 Simple default styles for headings

h4 Simple default styles for headings

h5 Simple default styles for headings
h6 Simple default styles for headings
<h1>Simple default styles for headings</h1>
<h2>Simple default styles for headings</h2>
<h3>Simple default styles for headings</h3>
<h4>Simple default styles for headings</h4>
<h5>Simple default styles for headings</h5>
<h6>Simple default styles for headings</h6>

自定义CSS部分

.panel{margin-bottom:10px;margin-top:10px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
.panel ul{margin:0 0 0 25px}
.panel ul li{margin:10px 0}
.panel-body{padding:10px 10px 10px 20px}
.panel-heading{padding:10px 25px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-heading>.dropdown .dropdown-toggle{color:inherit}
.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}
.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit}
.panel-default{border-color:#ddd}
.panel-default>.panel-heading{color:#333;background-color:#f6f6f6;border-color:#eee}
.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#eee}
.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#eee}
.panel-success{border-color:#d6e9c6}
.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}
.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}
.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}
.post-content .panel-success a{color:#3c763d}
.panel-info{border-color:#bce8f1}
.panel-info>.panel-heading{color:#31708f;background-color:#d1ecf1;border-color:#bee5eb}
.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bee5eb}
.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#bee5eb}
.panel-warning{border-color:#faebcc}
.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc}
.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc}
.post-content .panel-warning a{color:#8a6d3b}
.panel-danger{border-color:#ebccd1}
.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}
.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}
.post-content .panel-danger a{color:#a94442}
.panel-gray{border-color:#f6f6f6;border-radius:3px}
.panel-gray>.panel-heading{color:#333;background-color:#f6f6f6;border-color:#f6f6f6;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-gray>.panel-heading+.panel-collapse>.panel-body{border-top-color:#f6f6f6}
.panel-green{border-color:#28a745;border-radius:3px}
.panel-green>.panel-heading{color:#fff;background-color:#28a745;border-color:#28a745;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-green>.panel-heading+.panel-collapse>.panel-body{border-top-color:#28a745}
.post-content .panel-green a{color:#28a745}
.panel-blue{border-color:#00a2ff;border-radius:3px}
.panel-blue>.panel-heading{color:#fff;background-color:#00a2ff;border-color:#00a2ff;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-blue>.panel-heading+.panel-collapse>.panel-body{border-top-color:#00a2ff}
.post-content .panel-blue a{color:#00a2ff}
.panel-yellow{border-color:#ffc107;border-radius:3px}
.panel-yellow>.panel-heading{color:#fff;background-color:#ffc107;border-color:#ffc107;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-yellow>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ffc107}
.post-content .panel-yellow a{color:#ffc107}
.panel-red{border-color:#dc3545;border-radius:3px}
.panel-red>.panel-heading{color:#fff;background-color:#dc3545;border-color:#dc3545;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-red>.panel-heading+.panel-collapse>.panel-body{border-top-color:#dc3545}
.post-content .panel-red a{color:#dc3545}
.panel-dablue{border-color:#17a2b8;border-radius:3px}
.panel-dablue>.panel-heading{color:#fff;background-color:#17a2b8;border-color:#17a2b8;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-dablue>.panel-heading+.panel-collapse>.panel-body{border-top-color:#17a2b8}
.post-content .panel-dablue a{color:#17a2b8}

其它

大概平时用的就这些