1、兼容所有浏览器显示半透明效果的方法

<div class="transparent"></div>


.transparent {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: .5;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: url("../img/pic.jpg");
}

站点： 前端开发文档
原文： CSS选择器
原文： CSS继承属性
原文： CSS3核心模块
原文： CSS盒子模型
原文： CSS背景图像
原文： CSS清除浮动
原文： CSS定位

CSS选择器

在最近开发移动端页面，遇到这么一个情况：当页面宽度 100% 时，高度为宽度一半，并随手机宽度变化依然是一半。

于是我们就需要实现一个 宽度自适应，高度为宽度一半的容器 。

这里先以高度为宽度一半为例，也可以是其他任意比例 。

一、思考如何实现

这个问题类似于：我们在移动端页面，上面有一张宽度 100% 的图片，如果我们没设置高度，则图片会根据原有尺寸，等比缩放。

我们可以借助这个想法，根据元素高度，来为元素设置一个相应比例的高度即可。

二、实现方法1 - 通过 vw 视口单位实现

• 实现三栏布局，中间自适应（margin负值法）

  middle
  left
  right

  body { margin: 0; padding: 0; }

  .left, .right { height: 300px; width: 200px; float: left; }

  .right { margin-left: -200px; background-color: red; }

  .left { margin-left: -100%; background-color: #00ff00; }

  .middle { height: 300px; width: 100%; float: left; background-color: blue; }

• 首尾高度固定、中间自适应的DIV布局（兼容IE6）

  头部

  • 中间置顶
  • 中间
  ...
  • 中间到底

  尾部

  html, body { margin: 0; /padding: 0;/ height: 100%; overflow: hidden; }

  .top, .bottom { width: 100%; height: 50px; position: absolute; }

  /** { margin: 0; padding: 0; }

  html, body, .container { height: 100%; width: 100%; }

  div { position: absolute; }

  .top, .bottom { width: 100%; height: 100px; z-index: 5; }*/

  .top { background: red; top: 0; }

  .bottom { background: #00ff00; bottom: 0; }

  .middle { width: 100%; top: 50px; bottom: 50px; background: #a7fad7; overflow: auto; position: absolute; /针对ie6设定的hack/ _height: 100%; _border-top: -100px solid #eee; _border-bottom: -100px solid #eee; _top: 0; }

• flex-box布局

  Main Content

  I'm first in the source order.

  The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. Fry, we have a crate to deliver. Hey, guess what you're accessories to.

  I'll get my kit! That's not soon enough! Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man.

  body { padding: 2em; }

  • { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

  h1, h2 { font: bold 2em Sans-serif; margin: 0 0 1em 0; }

  h2 { font-size: 1.5em; }

  p { margin: 0 0 1em 0; }

  .page-wrap { display: flex; display: -webkit-flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; }

  .main-content, .main-sidebar, .main-nav { padding: 1em; }

  .main-content { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; width: 60%; -moz-box-flex: 1; background: white; }

  .main-nav { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; -webkit-box-flex: 1; -moz-box-flex: 1; width: 20%; -webkit-flex: 1; -ms-flex: 1; flex: 1; background: #ccc; }

  .main-sidebar { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; order: 3; -webkit-box-flex: 1; -moz-box-flex: 1; width: 20%; -ms-flex: 1; -webkit-flex: 1; flex: 1; background: #ccc; }

• 粘连 Footer 置于底部-方法一

  HTML

  在 wrapper 上用负的 margin-bottom

  Add Content

  CSS

  html, body { height: 100%; margin: 0; }

  .content { min-height: 100%; padding: 20px; margin: 0 auto -50px; }

  .footer, .push { height: 50px; padding: 20px; }

  JS

  $("#add").on("click", function () { $("

  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

  ").insertBefore(".push"); });

• 粘连 Footer 置于底部-方法二

  HTML

  在 footer 上用负的 margin-top

  Add Content

  CSS

  html, body { height: 100%; margin: 0; }

  .content { min-height: 100%; }

  .content-inside { padding: 20px; padding-bottom: 50px; }

  .footer { height: 50px; margin-top: -50px; }

  JS

  $("#add").on("click", function () { $("

  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

  ").appendTo(".content-inside"); });

原文链接： 前端插件库
站点： 前端开发文档
博客： 前端插件库

前端插件库

DataTables

官网： https://www.datatables.net/

DataTables是jQuery的JavaScript函数库，目的是强化表格操作（如搜索、排序），并自动加入组件引入表格中，使用非常灵活简便。