CSS实现常用组件特效（不依赖JS）

【CSS实现常用组件特效（不依赖JS）】的更多相关文章

CSS实现常用组件特效（不依赖JS）

我们已经习惯用 JavaScript 实现常见的 UI 功能组件,如手风琴.工具提示.文本截断等.但是随着 HTML 和 CSS 新特性的推出,不用再支持旧浏览器,我们可以越来越少用 JavaScript 来创建 UI 组件,更多地集中在代码的逻辑部分(验证.数据处理等). 有些实现方案确实感觉有点剑走偏锋,也不太灵活,但它们对于小型项目里的单例组件还是有用的.为什么非得在网站里用 JavaScript(或者怀旧点用 jQuery)实现一个只用一次的手风琴组件?这就是我在给自己的移动端个人网站页…

amazeui学习笔记--css（常用组件12）--面板Panel

amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容放在 .am-panel-bd 里面. <div class="am-panel am-panel-default"> <div class="am-panel-bd">这是一个基本的面板组件.</div> </div>…

amazeui学习笔记--css（常用组件9）--导航nav

amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的宽度,可以结合网格使用.还是ul包li的形式. <ul class="am-nav"> <li class="am-active"><a href="#">首页</a></li> <l…

amazeui学习笔记--css（常用组件7）--输入框组Input-group

amazeui学习笔记--css(常用组件7)--输入框组Input-group 一.总结 1.使用:Input group 基于 Form 组件和 Button 组件扩展,依赖这两个组件.在容器上添加 .am-input-group,在标签文字上添加 .am-input-group-label 2.Icon组件及添加文字: <div class="am-input-group"> <span class="am-input-group-label"…

amazeui学习笔记--css（常用组件16）--文章页Article

amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .am-article-hd 文章头部,包含标题.元数据等 .am-article-title 文章标题 .am-article-meta 文章元数据,如作者.发布日期等 .am-article-bd 文章正文部分 .am-article-lead 文章摘要.导读等信息 .am-article-divi…

amazeui学习笔记--css（常用组件15）--CSS动画Animation

amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-animation-fade 淡入 .am-animation-scale-up 逐渐放大 .am-animation-scale-down 逐渐缩小 .am-animation-slide-top 顶部滑入 .am-animation-slide-bottom 底部滑入 .am-animation-sli…