css实现大气业务介绍解决方案选项卡悬浮切换效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现大气业务介绍解决方案选项卡悬浮切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@charset "utf-8";
* {
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Arial";
color:#6F7479;
font-weight:normal
}
:after,:before {
box-sizing:inherit
}
a {
text-decoration:none;
color:inherit
}
ul {
list-style:none
}
/*背景*/
.bg-blue {
background:url("//repo.bfw.wiki/bfwrepo/image/60723a0eef86f.png") no-repeat center;
background-size:cover
}
.developer-solution-block {
position:relative;
max-width:none;
padding:50px 0;
text-align:center;
clear:both;
margin:0 auto
}
/*大标题*/
.titleBar .caption {
font-size:36px;
color:#252b3a;
letter-spacing:0;
text-align:center;
line-height:46px;
margin-bottom:10px
}
.descript {
margin-bottom:40px;
font-size:16px;
color:#A0A2A8
}
.developer-solution-block .titleBar {
max-width:1200px;
margin:0 auto;
text-align:center
}
.developer-solution-block .titleBar .caption,.developer-solution-block .titleBar .descript {
color:#fff
}
.developer-solution-block .developer-solution {
max-width:1180px;
margin:0 auto;
padding:0 60px;
background:none
}
/*左边分类*/
.developer-solution .solution-tab {
font-size:18px;
color:#ffffff;
line-height:28px;
text-align:center;
display:inline-block;
width:300px;
margin-right:100px;
float:left
}
.developer-solution .solution-tab ul {
padding:20px 0;
background:rgba(255,255,255,0.20);
opacity:1;
box-shadow:-18px 6px 8px 0 rgba(0,0,0,0.20);
border-radius:2px;
width:260px
}
.solution-tab ul li {
padding:20px 30px;
width:260px;
text-align:left;
color:#ffffff
}
.solution-tab ul li.active {
width:300px;
background:#f66f6a;
box-shadow:0 8px 16px 0 rgba(227,24,31,0.30);
border-radius:2px;
margin-left:-20px;
padding-left:50px
}
.solution-tab li:hover {
cursor:pointer;
}
/*右边内容标题详情*/
.developer-solution .solution-detail {
width:calc(100% - 400px);
display:inline-block;
vertical-align:top;
height:270px;
padding-top:50px;
text-align:left
}
.developer-solution .solution-detail ul li {
display:none
}
.developer-solution .solution-detail ul li.active {
display:block
}
.solution-detail li .title {
font-size:22px;
color:#ffffff;
line-height:28px;
text-align:left;
margin-bottom:14px
}
.solution-detail li .detail {
font-size:14px;
color:#ffffff;
line-height:22px;
text-align:left
}
/*产.........完整代码请登录后点击上方下载按钮下载查看
网友评论0