当前位置:千赢国际官网 > 千赢网页手机版登入 > 页面的卡片式提示和翻转特效,全选的例子

页面的卡片式提示和翻转特效,全选的例子

文章作者:千赢网页手机版登入 上传时间:2019-08-17

  这款 jQuery 插件用于实现类似 Google Tips 页面的卡片式提示和翻转的交互特效。你可以根据自己的需要定制动画效果参数,定义回调函数来控制行为。因为使用了 CSS3,所以只支持 Chrome、Firefox、和 Safari 等现代浏览器。

  过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护。得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式。

表单处理时经常会有全选的功能,但是这个功能往往会被忽视一个细节,就是逐个选中 checkBox 直至全选时,经常会忘记修改全选 checkBox 的状态,某知名互联网公司的网盘就会出现这样的问题,问题如图:

您可能感兴趣的相关文章

  不论你是对用CSS建站感兴趣还是仅仅拿它让你的博客更有feel,打好基础才能盖高楼。下面让我们来看看一些对于初学者实用的CSS常识:

图片 1

  • 2013年最受欢迎的10篇前端开发博文
  • 35个让人惊讶的 CSS3 动画效果演示
  • 8个惊艳的 HTML5 和 JavaScript 特效
  • 2014年最值得关注的网页设计流行趋势
  • 小伙伴们惊呆了!8个超炫的 Web 效果

 1、使用reset.css

  火狐和IE这两种不同的浏览器,在绘制CSS样式方法上截然不同。这种情况下,使用reset.css重置所有的基本样式会让你得到一个全新的空样式表。

  这儿有一些常用的reset.css框架——Yahoo Reset CSS、Eric Meyer’s CSS Reset和Tripoli。

扩展阅读

1. Html5的Reset 和Base样式的结合

2. Drupal主题的基础样式—reset、base、layout、print

3. CSS reset的重新审视 – 避免样式重置

4. 目前比较全的CSS重设(reset)方法总结

5. Reset CSS研究(八卦篇)

6. HTML5 Reset Stylesheet

7. normalize.css

8. Reset restarted

9. CSS Frameworks CSS Reset: Design From Scratch

10. Quick Tip: Create Your Own Simple Reset.css File

11. NO CSS RESET

12. 

13. CSS-reset

所以,需要给 checkBox 的点击事件做一下处理:点击时遍历一下除了全选的单选框之外的所有单选框,如果有未选中的,则全选不选中,如果全部都选中了,则修改全选框的状态,以下是我写的一个简单的例子:

  

 2、CSS缩写

  CSS缩写简化了你的CSS代码,更重要的是,它让你的代码更加整洁易懂。

  不是像这样创建CSS

1 2 3 4 5 6 7 .header {   background-color: #fff;   background-image: url(image.gif);   background-repeat: no-repeat;   background-position: top left;   }

  而是像这样创建CSS

1 2 3 .header {   background: #fff url(image.gif) no-repeat top left  }

扩展阅读

1. Introduction to CSS Shorthand

2. Useful CSS shorthand properties

3. CSS Shorthand Guide

4. Efficient CSS with shorthand properties

5. Proper CSS Shorthand

6. Understanding CSS Shorthand

7. CSS shorthand reference

8. 5 CSS shorthand tips and how to optimize CSS

9. 6 CSS Shorthand Tricks Every Developer Should Know

10. Shorthand properties

运行结果:

 

 3、理解class和id

  这两个选择器总是让初学者感到迷惑。在CSS中,Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式,而class是可以重复使用的。

扩展阅读

1. Class vs. ID

2. When to use Class, ID

3. Applying Class and ID together

4. The Difference Between ID and Class

5. Multiple Class / ID and Class Selectors

6. When using IDs can be a pain in the class…

图片 2

您可能感兴趣的相关文章

 4、实用的<li>

  <li>也叫链接列表,在与<ol>或<ul>正确搭配的时候非常好用,尤其是用在导航菜单样式上。

扩展阅读

1. Taming Lists

2. Amazing LI

以下就是例子的全部代码:

  • 期待已久的2013年度最佳 jQuery 插件揭晓
  • 赞!10套精美的免费网站后台管理系统模板
  • 10大流行的 Metro UI 风格 Bootstrap 主题
  • 推荐35款精致的 CSS3 和 HTML5 网页模板
  • 精选12款优秀 jQuery Ajax 分页插件和教程

 5、少用<table>多用<div>

  CSS最大的优势之一是使用<div>达到样式上的灵活多变。不同于<table>,<div>里的内容不会被锁在单元格<td>中。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然,有大量表格内容时,还是用 <table>吧。

扩展阅读

1. Tables are dead

2. Tables Vs. CSS

3. CSS vs tables

4. Table Layouts vs. Div Layouts: From Hell to… Hell?

    爱好(全选)

    足球
    网球
    篮球

 

 6、CSS调试工具

  在设计CSS时,能够得到页面布局的预览对于优化CSS样式和纠错是很有帮助的。这里有一些免费的CSS调试工具推荐给你,你可以把它装在浏览器上:FireFox Web Developer、DOM Inspector、Internet Explorer Developer Toolbar、Firebug

图片 3

一起学习,有问题欢迎拍砖吐槽……

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:页面的卡片式提示和翻转特效,全选的例子

关键词: 千赢国际官网