缩略图部分

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

缩略图psd文件
https://pi.143614.xyz/wp-content/uploads/idc/macbook_100.psd

新的SVG方案页面

四川雅安高防100G
cpu4 Cores
ram1GB
disk256GB SSD
bandwidth500GB
port100Mbps
sales32元/月
立即购买
四川雅安高防100G
cpu4 Cores
ram1GB
disk256GB SSD
bandwidth500GB
port100Mbps
sales32元/月
立即购买
四川雅安高防100G
cpu4 Cores
ram1GB
disk256GB SSD
bandwidth500GB
port100Mbps
sales32元/月
立即购买

新的ICON优惠方案

H
c
r
s
h
y
b
p
i
d
a
v
元/月
立即购买
H
c
r
s
h
y
b
p
i
d
a
v
元/月
立即购买
H
c
r
s
h
y
b
p
i
d
a
v
元/月
立即购买

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
  • 架构：
  • 价格：元/月
  • 传送：购买链接
panel-pro
  • 核心：核CPU
  • 内存：B
  • 硬盘：GB
  • 流量：B
  • 端口：bps
  • 架构：
  • 价格：元/月
  • 传送：购买链接

VPS方案代码

<div class="row cloud-plan mm-plan mb-3">
    <div class="col-xl-4">
    <table class="table mmtable">
        <tr><td colspan="2" class="mmheader"><i class="iconfont icon-minus"></i> 四川雅安高防100G <i class="iconfont icon-minus"></i></td></tr>
        <tr><td class="mmicon"><img src="https://img.vpshu.com/wp-content/themes/vpsmm/images/cpu.svg" alt="cpu"></td><td>4 Cores</td></tr>
        <tr><td class="mmicon"><img src="https://img.vpshu.com/wp-content/themes/vpsmm/images/ram-memory.svg" alt="ram"></td><td>1GB</td></tr>
        <tr><td class="mmicon"><img src="https://img.vpshu.com/wp-content/themes/vpsmm/images/hard-disk.svg" alt="disk"></td><td>256GB SSD</td></tr>
        <tr><td class="mmicon"><img src="https://img.vpshu.com/wp-content/themes/vpsmm/images/cable.svg" alt="bandwidth"></td><td>500GB</td></tr>
        <tr><td class="mmicon"><img src="https://img.vpshu.com/wp-content/themes/vpsmm/images/speedometer.svg" alt="port"></td><td>100Mbps</td></tr>
        <tr><td class="mmicon"><img src="https://img.vpshu.com/wp-content/themes/vpsmm/images/price-tag.svg" alt="sales"></td><td>32元/月</td></tr>
        <tr><td colspan="2" class="mmorder"><a href="https://www.vpshu.com/go/">立即购买</a></td></tr>
    </table>
    </div>
    
</div>

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://www.vpshu.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://www.vpshu.com/go/Iw==">Primary</a>
<a class="btn btn-secondary" href="https://www.vpshu.com/go/Iw==">Secondary</a>
<a class="btn btn-success" href="https://www.vpshu.com/go/Iw==">Success</a>
<a class="btn btn-danger" href="https://www.vpshu.com/go/Iw==">danger</a>
<a class="btn btn-warning" href="https://www.vpshu.com/go/Iw==">warning</a>
<a class="btn btn-info" href="https://www.vpshu.com/go/Iw==">info</a>
<a class="btn btn-light" href="https://www.vpshu.com/go/Iw==">light</a>
<a class="btn btn-dark" href="https://www.vpshu.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}

其它

大概平时用的就这些