CSS基础4

本节大纲

  • CSS html js hack
  • 栅格
  • 典型布局

课程内容

CSShack

可参考大而全且权威的hack

CSS hack由于不同的浏览器,比如IE6,IE7,chrome等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样。使用CSShack让不同浏览器效果一致。

  1. IE条件注释

只在IE下生效
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->

只在IE6下生效
<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->

只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
qq
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
  1. CSS属性Hack

    • 属性以下划线开头,只有ie6生效 _margin-left: 10px; /* ie6 only */
    • 属性以星号开头,只在ie6 ie7生效 *color: red;
    • 以\9结尾,所有的ie生效 color: black\9;
    • 以\0结尾,ie8, 9, 10 color: white\0;
  2. js判断ie版本

// 是否小于等于ie8
var isIE = '\v'=='v'; 

// 判断ie版本
var ieVersion = (function() { if (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) { return parseFloat( RegExp.$1 ); } else { return false; } })();

栅格

参考bootstrap栅格 把网页分成一定数量(9个或者12个)格子,每个格子固定(百分比),用不同的class代表不同的宽度,方便布局。

典型布局

参考常见布局

  • 头-内容-尾,宽度100%;demo
  • 头-侧边栏-内容-尾, 宽度100%;demo
  • 头-两侧侧边栏-内容-尾;demo
  • 侧边栏自适应中间高度;demo
  • 非全屏,两侧侧边栏高度自适应;demo
  • 固定宽度,多方块并列;demo
  • 三角符号;demo

.caret-down {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

课下练习

  1. 收集常见IE bug(不少于五个), 并给出解决方案