css布局是吸纳商品服务tab选项卡切换效果代码
代码语言：html
所属分类：选项卡
代码描述：css布局是吸纳商品服务tab选项卡切换效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!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>
<style>
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
text-decoration: none;
color: inherit;
font-weight: 400;
font-family: "微软雅黑";
box-sizing: border-box;
font-style: normal;
outline: 0;
-webkit-tap-highlight-color: transparent
}
body {
width: 100%;
overflow-x: hidden;
background: #151827;
}
img {
vertical-align: middle;
max-width: 100%
}
.clearfix:after,.clearfix:before {
display: table;
line-height: 0;
content: ""
}
/* 通用类 */
.left {
float: left
}
.mgt20 {
margin-top: 20px
}
.mgt50 {
margin-top: 50px
}
.w1200 {
margin: 0 auto;
width: 1200px;
}
/* 背景标题 */
.product {
background: url(//repo.bfw.wiki/bfwrepo/image/60dffe2631ade.png) no-repeat top center;
background-size: 100%;
height: 846px;
width: 100%;
}
.product .title {
color: #fff;
height: 148px;
line-height: 148px;
font-size: 32px;
position: relative;
text-align: center
}
/* 左侧分类 */
.product-left {
width: 165px
}
.prod-item {
width: 165px;
height: 65px;
line-height: 65px;
border-top: 1px solid #3c3d40;
margin-bottom: 1px;
background: #2e3035 no-repeat 30px center;
color: #fff;
font-size: 16px;
text-align: center;
text-indent: 2em;
cursor: pointer
}
.prod-item.active,.prod-item:hover {
background-color: #27282c;
color: #0af
}
.prodprod-calculate {
background-image: url(//repo.bfw.wiki/bfwrepo/image/60dffe8891a06.png)
}
.prodprod-calculate.active,.prodprod-calculate:hover {
background-image: url(//repo.bfw.wiki/bfwrepo/image/60dfffe93e4e9.png)
}
.prprod-save {
background-image: url(//repo.bfw.wiki/bfwrepo/image/60dfff5c8233c.png)
}
.prprod-save.active,.prprod-save:hover {
background-image: url(//repo.bfw.wiki/bfwrepo/image/60dffe9865c20.png)
}
.prod-manage {
background-image: url(//repo.bfw.wiki/bfwrepo/image/60dffee516c26.png)
}
.prod-manage.active,.prod-manage:hover {
background-image: url(//repo.bfw.wiki/bfwrepo/image/60e0003543d77.png)
}
.prod-network {
background-image: url(//repo.bfw.wiki/bfwrepo/image/60dfff901e7b3.png)
}
.prod-network.active,.prod-network:hover {
background-image: url(//repo.bfw.wiki/bfwrepo/image/60e000a6671bc.png)
}
.prod-safety {
background-image: url(//repo.bfw.wiki/bfwrepo/image/60dffefc74803.png)
}
.prod-safety.active,.prod-safety:hover {
background-image: url(//repo.bfw.wiki/bfwrepo/image/60e0007e6b354.png)
}
/* 右侧部分 */
.product-main {
position: relative;
background: url(//repo.bfw.wiki/bfwrepo/image/60dffe5a4b667.png);
width: 1033px;
height: 604px;
padding: 70px 40px 0 70px;
color: #ccc;
font-size: 14px
}
.product-detail {
display: none
}
.product-detail.active {
display: block
}
.product-main .p-d-title {
line-height: 30px;
background: url(//repo.bfw.wiki/bfwrepo/image/60e000e2dd063.png) no-repeat left center;
padding-left: 48px;
color: #fff;
font-size: 16px
}
.product-main .p-d-mini {
line-height: 2em;
font-size: 12px;
color: #909091
}
.product-main .p-d-link {
color: #088acf;
font-size: 12px
}
.p-d-content {
line-height: 1.8em;
padding-left: 48px
}
.p-d-content table {
text-align: center
}
.p-d-content table td,.p-d-content table th {
line-height: 53px;
border: 1px solid #575757
}
.p-d-content table th {
font-weight: 400;
color: #ccc;
background: #4a4b4d
}
.p-d-content table td {
border-top: none;
min-width: 250px
}
.p-d-content table td:first-child,.p-d-content table th:first-child {
border-right: none
}
.p-d-sub {
padding: 5px;
border-bottom: 1px dashed #444547
}
.d-sub-first {
border-top: 1px dashed #444547
}
.p-d-sub-title {
font-size: 14px;
padding-left: 28px;
background: url(//repo.bfw.wiki/bfwrepo/image/60e00117c73b3.png) no-repeat left center
}
.p-d-sub-text {
font-size: 12px;
color: #9b9b9c
}
.sub-title-only {
padding: 20px
}
/* 顶部和底部蓝色渐隐效果 */
.upper-shadow {
position: absolute;
top: -30px;
left: 50%;
margin-left: -270px;
width: 546px;
height: 30px;
background: url(//repo.bfw.wiki/bfwrepo/image/60dfff19a2f4e.png) no-repeat center;
animation: shadow-breath 3s ease infinite
}
.bottom-shadow {
position: absolute;
bottom: -47px;
left: 50%;
margin-left: -392px;
width: 784px;
height: 47px;
background: url(//repo.bfw.wiki/bfwrepo/image/60dffdd96152e.png);
animation: shadow-breath 3s ease infinite
}
@keyframes shadow-breath {
0% {
opacity: 1
}
50% {
opacity: .2
}
100% {
opacity: 1
}
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="product">
<div class="w1200">
<p class="title">
产品功能
</p>
<div class="clearfix">
<div class="left product-left">
<div class="prod-item prprod-save active" data-id="1">
储存
</div>
<div class="prod-item prodprod-calculate" data-id="2">
计算
</div>
<div class="prod-item prod-manage" data-id="3">
管理
</div>
<div class="prod-item prod-network" data-id="4">
网络
</div>
<div class="prod-item prod-safety" data-id="5">
安全
</div>
</div>
<div class="left product-main">
<div class="upper-shadow"></div>
<div class="bottom-shadow"></div>
<div class="product-detail active" id="prodDetail1">
<div class="p-d-title">
SSD存储，满足不同I/O性能要求
</div>
<div class="p-d-content mgt20">
<div>
云服务器可搭配云磁盘使用，以获得高可靠存储能力。您可以单独购买云磁盘挂载到云服务器上。 <br>
（17云全线产品均采用纯SSD架构，拥有处理海量且复杂的硬件计算能力）
</div>
<div class="mgt20">
<a class="p-d-link" href="#">了解更多磁盘信息 >> <br>
</a>
</div>
</div>
<div class="p-d-content mgt20">
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>云硬盘性能数据表参数</th>
<th>SSD磁盘</th>
</tr>
</thead>
<tbody>
<tr>
<td>单盘最大容量</td>
<td>1000G</td>
</tr>
<tr>
<td>最大 IOPS/磁盘</td>
<td>50000</td>
</tr>
<tr>
<td>最大吞吐量/磁盘</td>
<td>800MBps</td>
</tr>
<tr>
<td>时延</td>
<td>0.2~0.5ms</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="product-detail" id="prodDetail2">
<div class="p-d-title">
基础云产品满足云端一切所需
</div>
<div class="p-d-content mgt20">
<div>
我们提供了多种规格云服务器供用户选择：
</div>
<div class="p-d-mini mgt20">
CPU支持1核—16核 <br>
内存支持1G—64G <br>
CPU与内存的资源配比为1：1；1：2；1：4；1：8
</div>
<div class="mgt20">
带宽升级不影响业务正常运行，CPU内存升级仅数分钟，高可用性为您保驾护航。
</div>
<div class="mgt20">
<a class="p-d-link" href="#">了解更多规格及价格 >> <br>
</a>
</div>
</div>
<div class="p-d-title mg.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0