web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
导航菜单
Bootstrap漂亮的垂直手风琴列表效果
分类:
导航菜单
日期:
2024-05-14
点击(4)
评论(0)
演 示
免费下载
简介
在页面中引入bootstrap相关文件。 ```html
``` ##### HTML结构 该垂直手风琴列表的基本HTML结构如下。 ```html
Section 1
....
Section 2
...
Section 3
....
``` ##### CSS样式 该垂直手风琴列表的css样式如下: ```html a:hover,a:focus{ text-decoration: none; outline: none; } #accordion{ padding-right: 24px; padding-left: 24px; z-index: 1; } #accordion .panel{ border: none; box-shadow: none; } #accordion .panel-heading{ padding: 0; border-radius: 0; border: none; } #accordion .panel-title{ padding: 0; } #accordion .panel-title a{ display: block; font-size: 16px; font-weight: bold; background: #e16b47; color: #f7c59f; padding: 15px 25px; position: relative; margin-left: -24px; transition: all 0.3s ease 0s; } #accordion .panel-title a.collapsed{ background: #f7c59f; color: #e16b47; margin-left: 0; transition: all 0.3s ease 0s; } #accordion .panel-title a:before{ content: ""; border-left: 24px solid #e16b47; border-top: 24px solid transparent; border-bottom: 24px solid transparent; position: absolute; top: 0; right: -24px; transition: all 0.3s ease 0s; } #accordion .panel-title a.collapsed:before{ border-left-color: #f7c59f; } #accordion .panel-title a:after{ content: "\f106"; font-family: 'FontAwesome'; position: absolute; top: 30%; right: 15px; font-size: 18px; color: #f7c59f; } #accordion .panel-title a.collapsed:after{ content: "\f107"; color: #e16b47; } #accordion .panel-collapse{ position: relative; } #accordion .panel-collapse.in:before{ content: ""; border-right: 24px solid #f7c59f; border-bottom: 18px solid transparent; position: absolute; top: 0; left: -24px; } #accordion .panel-body{ font-size: 14px; color: #333; background: #e4e4e4; border-top: none; z-index: 1; } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告