演示网站 html推荐套餐产品介绍
编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>推荐套餐</title>
<link rel="stylesheet" href="statics/css/style.css">
<script src="statics/js/jquery.min.js"></script>
</head>
<body>
<div class="recommend-package">
<div class="w1200">
<p class="title">推荐套餐</p>
<div class="clearfix">
<div class="recommend-item active">
<div class="inner">
<div class="title">
入门型
</div>
<div class="box">
<div class="desc">
适用于个人网站初始阶段并发访问量小，经济配置省钱适用，两步购买方便快捷
</div>
<div class=" clearfix">
<div class="config-item">
<div class="config">
1<span class="config-unit">核</span>
</div>
<div class="config-sub">
CPU
</div>
</div>
<div class="config-item">
<div class="config">
1<span class="config-unit">G</span>
</div>
<div class="config-sub">
内存
</div>
</div>
<div class="config-item">
<div class="config">
1<span class="config-unit">M</span>
</div>
<div class="config-sub">
带宽
</div>
</div>
</div>
<div class="price-row">
<span class="price">49</span>元 / 月起
</div>
<div class="buy-button">
<a href="#">立即选购</a>
</div>
</div>
</div>
</div>
<div class="recommend-item">
<div class="inner">
<div class="title">
进阶型
</div>
<div class="box">
<div class="desc">
适合流量适中的网站应用，或简单开发环境、代码存储库等
</div>
<div class=" clearfix">
<div class="config-item">
<div class="config">
2<span class="config-unit">核</span>
</div>
<div class="config-sub">
CPU
</div>
</div>
<div class="config-item">
<div class="config">
2<span class="config-unit">G</span>
</div>
<div class="config-sub">
内存
</div>
</div>
<div class="config-item">
<div class="config">
5<span class="config-unit">M</span>
</div>
<div class="config-sub">
带宽
</div>
</div>
</div>
<div class="price-row">
<span class="price">195</span>元 / 月起
</div>
<div class="buy-button">
<a href="#">立即选购</a>
</div>
</div>
</div>
</div>
<div class="recommend-item">
<div class="inner">
<div class="title">
通用型
</div>
<div class="box">
<div class="desc">
计算能力满足90%云计算使用者需求，适合企业运营活动、并行计算应用
</div>
<div class=" clearfix">
<div class="config-item">
<div class="config">
4<span class="config-unit">核</span>
</div>
<div class="config-sub">
CPU
</div>
</div>
<div class="config-item">
<div class="config">
4<span class="config-unit">G</span>
</div>
<div class="config-sub">
内存
</div>
</div>
<div class="config-item">
<div class="config">
10<span class="config-unit">M</span>
</div>
<div class="config-sub">
带宽
</div>
</div>
</div>
<div class="price-row">
<span class="price">487</span>元 / 月起
</div>
<div class="buy-button">
<a href="#">立即选购</a>
</div>
</div>
</div>
</div>
<div class="recommend-item">
<div class="inner">
<div class="title">
理想型
</div>
<div class="box">
<div class="desc">
适合对计算性能要求较高的应用场景，如企业运营活动、批量处理、分布式分析、游戏app等
</div>
<div class=" clearfix">
<div class="config-item">
<div class="config">
8<span class="config-unit">核</span>
</div>
<div class="config-sub">
CPU
</div>
</div>
<div class="config-item">
<div class="config">
8<span class="config-unit">G</span>
</div>
<div class="config-sub">
内存
</div>
</div>
<div class="config-item">
<div class="config">
10<span class="config-unit">M</span>
</div>
<div class="config-sub">
带宽
</div>
</div>
</div>
<div class="price-row">
<span class="price">681</span>元 / 月起
</div>
<div class="buy-button">
<a href="#">立即选购</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
// 高亮切换
$(".recommend-item").mouseenter(function () {
var $_self = $(this);
var activeClass = "active";
if (!$_self.hasClass(activeClass)) {
$_self.addClass(activeClass).siblings().removeClass(activeClass);
}
});
</script>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
