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