faq页面 html csdn,jQuery和css3简单实用的FAQ问答页面模板

如果你的系统需要这样一种用于为用户解答各种问题的FAQ系统，那么这个FAQ模板是你最好的选择。这个FAQ插件是响应式的，使用jQuery和css3制作，同时在不支持JAVASCRIPT的浏览器上也能正常工作。

HTML结构

html结构使用一个section .cd-faq作为wrapper。里面分割为两个部分：.cd-faq-categories和.cd-faq-items。第一个用于导航，第二个用于放置问答列表。每一个.cd-faq-group是一个包含一组问题的无序列表。

Basics
Mobile

Basics
How do I change my password?
How do I sign up?

CSS样式

这个demo的css样式非常简单，你可以下载文件来自行研究，特别需要指出的一点是，CSS样式中使用.no-js class来支持那些不支持javascript的浏览器实现效果。

使这个类工作的方法是：将.no-js放到元素中。Modernizr 将移除这个class并将它更换为.js class。你需要知道：如果Modernizr不工作(因为浏览器不支持javascript)，你使用的是.no-js来制作你的样式。

JAVASCRIPT

对于屏幕小于768像素的浏览器，当用户点击了某一个问题的类别，我们为每一个faq项添加.slide-in类。

对于大屏幕，选项被选择时屏幕平滑的向下滚动。

当屏幕大于1024像素，我们为窗口的滚动绑定updateCategory() 事件。这个方法检测$(window).scrollTop()的值，如果用户滚动到比.cd-faq高的位置，就为.cd-faq-categories设置position: fixed，这样使它们在屏幕上一直处于可见状态。

faq页面 html csdn,jQuery和css3简单实用的FAQ问答页面模板相关推荐

这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）...
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这 ...
3个必看的常见问题解答页面示例，帮您重做产品FAQ页面F
成功的企业都有个共性特点,永远将客户体验放在第一位.95%的消费者认为良好的客户体验对品牌忠诚度很重要. 提供一流的客户体验可能是费时费钱且复杂但确实很有必要执行.但其中有一项被遗忘的客户服务策略是经 ...
jQuery和CSS3炫酷滚动页面内容元素动画特效
jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...
用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果
今天看到淘宝ued博客上左边的菜单导航动画效果不错,就用jQuery和css3做了一个简单的例子,主要是实现运用了jQuery 事件和css3 transition属性. 用一个元素来实现鼠标滑动到某 ...
响应式网站导航html,jQuery和CSS3响应式网站导航幻灯片插件
这是一款即实用又炫酷的jQuery和CSS3响应式网站导航幻灯片插件.该插件将幻灯片制作为网站的hero导航,在幻灯片中展示网站各主要板块的内容,使用户可以非常容易的了解网站的主要信息. 该幻灯片插件 ...
购物车html页面,简单实用的商品购物和添加购物车界面设计
这是一款使用jQuery和CSS3制作的简单实用的商品购物和添加购物车界面设计方案.用户可以在商品购物界面中预览各种型号.颜色.尺寸的商品.然后通过点击添加到购物车按钮就可以将该商品添加到购物车中,操 ...
html滑动逐渐覆盖效果,创意jQuery和CSS3滑动覆盖响应式幻灯片特效
这是一款非常有创意的jQuery和CSS3滑动覆盖响应式幻灯片特效.该幻灯片特效采用响应式设计,在幻灯片切换时使用一个滑动块状区域来进行覆盖,显示新的幻灯片内容,整体效果非常不错. 使用方法 HTML ...
html 可调节进度条控件,jQuery简单实用的轻量级进度条插件
jQMeter是一款简单实用的轻量级进度条jQuery插件,它可以显示为水平或垂直进度条,进度条加载时带有动画特效,你只需要简单的传入一些参数到jQMeter对象的构造函数中就可以完成你想要的进度条效 ...
jQuery与CSS3的选择器
2019独角兽企业重金招聘Python工程师标准>>> jQuery与CSS在选择器方面,有很多的相似之处,本文稍加总结,方便对比使用. 注:本文以jQuery1.9.1版本和CSS ...

faq页面 html csdn,jQuery和css3简单实用的FAQ问答页面模板

Basics

faq页面 html csdn,jQuery和css3简单实用的FAQ问答页面模板相关推荐

最新文章

热门文章