纯CSS打造自适应表格

<!DOCTYPE html>
<html>
	<head>

		<style type="text/css">
			body {
			    font-family: arial;
			  }

			  table {
			    border: 1px solid #ccc;
			    width: 100%;
			    margin:0;
			    padding:0;
			    border-collapse: collapse;
			    border-spacing: 0;
			  }

			  table tr {
			    border: 1px solid #ddd;
			    padding: 5px;
			  }

			  table th, table td {
			    padding: 10px;
			    text-align: center;
			  }

			  table th {
			    text-transform: uppercase;
			    font-size: 14px;
			    letter-spacing: 1px;
			  }

			  @media screen and (max-width: 600px) {

			    table {
			      border: 0;
			    }

			    table thead {
			      display: none;
			    }

			    table tr {
			      margin-bottom: 10px;
			      display: block;
			      border-bottom: 2px solid #ddd;
			    }

			    table td {
			      display: block;
			      text-align: right;
			      font-size: 13px;
			      border-bottom: 1px dotted #ccc;
			    }

			    table td:last-child {
			      border-bottom: 0;
			    }

			    table td:before {
			      content: attr(data-label);
			      float: left;
			      text-transform: uppercase;
			      font-weight: bold;
			    }
			  }
		</style>

	</head>
	<body>
		<table>
		  <thead>
		    <tr>
		      <th>Payment</th>
		      <th>Issue Date</th>
		      <th>Amount</th>
		      <th>Period</th>
		    </tr>
		  </thead>
		  <tbody>
		    <tr>
		      <td data-label="Payment">Payment #1</td>
		      <td data-label="Issue Date">02/01/2015</td>
		      <td data-label="Amount">$2,311</td>
		      <td data-label="Period">01/01/2015 - 01/31/2015</td>
		    </tr>
		    <tr>
		      <td data-label="Payment">Payment #2</td>
		      <td data-label="Issue Date">03/01/2015</td>
		      <td data-label="Amount">$3,211</td>
		      <td data-label="Period">02/01/2015 - 02/28/2015</td>
		    </tr>
		  </tbody>
		</table>
	</body>
</html>

原始尺寸表格效果
自适应表格CSS原始大小
代码主要运用到了@media来判断调用的样式,伪元素:before,:after来匹配相关内容,以及用content: attr(data-label)来获取自定属性中的值,缩放及手机效果,
自适应表格CSS手机效果

HTML+CSS常见问题

常用技巧和经验

CSS HACK

各元素在浏览器的样式尽可能的与新标准保持一到处:

https://github.com/necolas/normalize.css
针对IE,其中的edge表示按照可用的最新模式显示

<meta http-equiv="X-UA-Compatible" content="IE-edge, chrome=1">

按窗口大小显示

<meta name="viewport" content="width=device-width, initial-scale=1">

如何去除iPhone上视频默认的播放按钮

在应用html5的video标签时,明明加了autoplay=”true”,可是在iPhone上打开时还会出现播放按钮,这时需要加一段CSS来进行去除(视频在具体的class或id内的请自行加入):

video::-webkit-media-controls {display: none !important}

清除样式和浮动

在书写代码过程中,很多元素可能在不同浏览器中会自带margin,padding等样式以及自带浮动,可能过建立一个类似下面这样的通用的CSS代码来进行统一处理,避免实际展现效果出现偏差。

清除浮动可采取两种方法, clear:both或width:100%; overflow:hidden;

/*样式清除*/
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,id,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none; border:none; background:none;}
textarea{resize:none;}
a{text-decoration:none; color:#656565;}

/*清除浮动*/

.clearfix:after{content:""; display:block;clear:both;}
.clearfix{zoom:1;}

/*小技巧解决浮动问题*/
.fl{float:left;}
.fr{float:right;}

针对IE的小技巧

IE系列尤其是IE 6经常会出现样式问题,可通过IE Tester来进行查看,CSS Hack中一个重要的技术是可通过\9来将特别的样式仅对IE系列生效,如line-height:35px\9可用于解决IE 6中默认输入框(input)中文字垂直不居中问题,其中\9代表所有的IE系列浏览器

解决IE6对PNG透明度不支持的问题

IE6是不支持PNG图片的的透明度的,网上有很多方式来解决这一兼容性问题,这里介绍其中的一种,通过以下链接下载js修复文件

http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js

然后新建一个js文件来处理需要修复的标签或class,id名如

DD_belatedPNG.fix('div,ul,ol,li,dt,dd,dl,span,img,a,em,strong,h1,h2,h3,h4,h5,h6,p')

假设以上的文件名为ie6Fixpng.js并和修复文件一并放在js文件下,则在待修复文件头部加入如下代码:

<!--[if IE 6]>
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2FDD_belatedPNG_0.0.8a-min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fie6Fixpng.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<![endif]-->

这样png文件在IE6中也可以透明显示了。

HTML中文乱码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

通过getContext操作Canvas对象返回空

在使用JS操作Canvas时出现如下报错
TypeError: null is not an object (evaluating ‘canvas.getContext’) Safari
Uncaught TypeError: Cannot read property ‘getContext’ of null  Chrome
这通常是由于多次重复使用了getContext或者是在DOM加载完成前调用了getContext方法
对于后一种,可以把JS代码放到body的后半部分,也可以封装到一个函数,如init,并通过如下两种中的一种方法调用

	window.onload=init;
	window.addEventListener("load", init, true);

注:如果使用window.onload=init(),将会出现同样的报错

如何判断是否微信浏览器

window.onload = function(){
    if(isWeiXin()){
        ... ...
    }
}
function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }else{
        return false;
    }
}

PHP代码

function is_weixin(){ 
	if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false ) {
			return true;
	}	
	return false;
}

如何去除iPhone, iPad上视频的默认播放按钮?

在iPhone, iPad的Safari浏览器中视频默认会出现一个播放按钮,想要去除这个按钮只需通过伪元素来设置即可(*代表所有标签,也可设置video)

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none
}

DIV+CSS页面布局

使用“DIV+CSS”对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格(table)定位方式的区别。因为现在的网站设计标准中,已经不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。通过使用div盒子模型结构将各部分内容划分到不同的区块,然后用css来定义盒子模型的位置、大小、边框、内外边距、排列方式等。简单地说,div用于搭建网站结构(框架)、css用于创建网站表现(样式/美化)。该标准简化了HTML页面代码,获得一个较优秀的网站结构,有利于日后网站维护、协同工作并便于搜索引擎抓取。当然并不是所有的网页都需要用div布局,例如数据页面、报表之类的页面,还是使用HTML的表格会比较方便,web标准里并没有说要抛弃table。

DIV+CSS标准的优点

  • 表现和内容相分离
  • 代码简洁,提高页面浏览速度
  • 易于维护和改版
  • 提高搜索引擎对网页的索引效率

不同浏览器间的差异

考虑到不同浏览器间存在差异,最好安装多种浏览器(如IE和Firefox,对不同版本的IE测试可使用IETester),对比差异进行调试。另外可以在Firefox浏览器中安装Firebug,Firebug 为您的Firefox 集成了浏览网页的同时随手可得的丰富开发工具。您可以对任何网页的 CSS、HTML 和 JavaScript 进行实时编辑、调试和监控。即便在不同的浏览器中效果不完全一致,也要做到大概一致。

“无意义”的元素div和span

HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签p创建段落,h1标签创建标题等等)的,然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式,所以当样式表失效时它就没有任何的作用。
div和span标签被用来组合成一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的,用在一小块的内联HTML中。而div(division)元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码,为HTML 文档内大块的内容提供结构和背景的元素,可以包含段落、标题、表格甚至其他部分,这使div便于建立不同集成的类。
div的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由div标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

盒子模型

每个HTML元素都可以看作一个装了东西的盒子,盒子具有宽度(width)高度(height),盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)。具体的关系如下图所示:

盒子模型

布局中的主要样式有:font,line-height,color,margin,padding,border,text-align,background,width,height,float,clear,display。

定位属性

属 性 描 述
Position 用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定)
Top 层距离顶点纵坐标的距离
Left 层距离顶点横坐标的距离
Width 层的宽度,可以用一个长度或“auto”值来指定其宽度,不允许使用负值
Height 层的高度,可以用一个长度或“auto”值来指定其高度,不允许使用负值
z-index 决定层的先后顺序和覆盖关系,值高的元素会覆盖值比较低的元素
Display 是一个显示属性,设定block值是以块状显示,在元素后面添加换行符,即其他元素不能在其后面并列显示。如果设定inline值则内联显示,在元素后面删除换行符,多个元素可以在一行内并列显示。使用值none将关闭指定元素及其子元素的显示
Visibility 这个属性是针对嵌套层的设置,如果存在嵌套的层(子层)和被嵌套的层(父层)时,可以使用inherit值设置子层继承父层的可见性,如果父层可见,子层也可见。当使用visible值时,无论父层是否可见,子层都可见。而值为hidden时,无论父层是否可见,子层都隐藏
Overflow 用于设置层内的内容超出层所能容纳的范围处理方式,为该属性设置visible值时,无论层的大小,内容都会显示出来。当设置hidden值时,会隐藏超出层大小的内容。当设置值为scroll时,不管内容是否超出层的范围,选中此项都会为层添加滚动条。而值使用auto值时,只在内容超出层的范围时才显示滚动条

区块属性(区块模型)

属 性 描 述
Margin 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度、百分比或者auto,百分比值参考上级元素的宽度,允许使用负值边际。如果四个值都给出了,它们分别被应用于上、右、下和左边界。如果只给出一个值,它被应用于所有边界。如果两个或三个值给出了,省略了的值与对边相等。注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值。而水平方向则不会。也可以选择使用上边界margin-top、下边界margin-bottom、左边界margin-left和右边界margin-right属性分别设置与上级元素的外边距。
padding 用于设置区块的内边距属性,是边框和元素内容之间的间隔距离。与margin属性相反,但使用的是相同属性值。是上补白padding-top、右补白padding-right、下补白padding-bottom和左补白padding-left属性的略写
float 设置区块漂浮属性,允许网页制作者将文本环绕在一个元素的周围,可以使用左漂浮left值,右漂浮right值
clear 清除属性指定一个元素是否允许有元素漂浮在它的旁边。值left移动元素到在其左边的漂浮的元素的下面;同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值,和移动元素到其两边的漂浮的元素的下面的both值

区块框浮动

虽然使用绝对定位可以实现页面布局,但由于调整某个区块框时其它区块的位置并不会跟随着改变,所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动,直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流中,所以文档的普通流中的区块框表现得就像浮动框不存在一样。通过设置float属性可以让原区块脱离普通的文档流,进而实现所需的排列样式。以下是3个区块分别使用不同的float属性的演示图:

文档浮动

行框和清理

在进行页面布局时,经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性,再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时,就会在行框中留出一定的宽度,而下面的某个区块框又恰好满足这个宽度,则很可能会向上提,和上一行并列的区块框在同一行排列。而这不并是我们想要的结果,所以可以使用clear属性解决这一问题,该属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。

使用区块框设计页面布局

  • 区块居中设计
    • 高度和宽度固定的区块居中(position)
    • 高度和宽度可变的区块居中(margin)
    • 布局页面局中
  • 设置两列浮动的布局
  • 设置三列浮动的布局
  • 设置多列浮动的布局

IE和Firefox之间的差异

IE和火狐居中不一样(当指定主体内容的margin-left,margin-right为auto时,在火狐中主体内容居中,而IE中不居中,可以通过将body的text-align指定为left解决);
IE指定的最小高度为18px,因而在IE中小于18px的高度将会按照18px进行显示(可通过添加overflow属性并赋值为hidden来解决);
IE会自动调整高度,而Firefox不会,将按指定高度显示(如果框体或div内内容较多,可取消对该版块高度的指定);
IE和FF在列表有区别(可通过设置ul的padding和margin为0来解决)
Heading(H1,H2..)不一样,默认在IE中标题带有边框,因而可通过设置padding和margin为0来解决;
Border计算方法不同:IE=内容+框(例如div宽度为400px,边框为2px,则总宽度仍为400px), Firefox边框单独计算(例如div宽度为400px,边框为2px,则总宽度仍为404px),要解决这一问题可以为该div设定两个宽度,然后在其中一个后面加上优先级!important,本例中使用类似这样的css:
.divclass{
width:396px !important;
width:400px;
border:2px;
}
这样做是因为!important对IE并不起作用。

CSS层叠样式表学习笔记

CSS(Cascading Style Sheets)即层叠样式表,它除了可以轻松设置网页元素的显示位置和格式外,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果。
通常任何标签都可以添加id, class, name, style这四个属性,其中style就是一种将样式写在标签内的css。比如下面是为段落标签中的文本设置红色字体,黄色背景色,2em大小文字,2px蓝色实体边框并设置文本居中的内置css:

可以看出css的基础语法格式是“属性(如color):值(如red)”的形式,在属性和值之间以冒号分隔,在属性与属性之间用分号分隔。

常见的颜色值有十六进制的#rgb(如#ccc)和#rrggbb(如#cccccc)的形式,十六种基本颜色(如red, green等,参见HTML和CSS概述及HTML基本语法一节),rgb(x,x,x)(如rgb(255,255,255))。常见的大小单位有em, px, pt, %, pc, cm, mm, in等。

css注释使用/*Insert your comment here*/的形式。css有四种设置方式:

  • 内联样式表:在HTML元素标签中使用style属性内联(见上面的例子),每个HTML标签都可以添加样式,虽然灵活,但缺点是需要对每个标签添加样式。
  • 嵌入样式表:通过HTML的<style>标签将CSS嵌入到HTML中使用,可以控制当前页面的所有样式。同样这种方式也会要求对每个页面添加一次样式,但相对内联样式表而言要少一些工作量。基本语法类似:

  • 外部样式表:将样式单独定义在一个后缀名为.css的文件中,并在HTML中通过link元素连接到HTML中使用。这样多个页面都可以使用,这是目前较多采用的方式。<link>的基本语法类似:

  • 输入样式表:是指将一个样式文件输入到另外一个样式文件中,或将一个样式文件输入到<style>元素中,导入的基本语法类似(@import url(css文件路径);):

上述四者的优先级别为:内联样式表优先级别高于其它的, 其它的三种和加载的顺序有关。
说到css,就不得不提到一些概念:
样式选择器(Selector):当定义一条样式规则时,必须指定受这条样式规则作用的网页元素,在一条规则中定义的网页元素就是selector(选择器),也就是选择该样式规则作用于的网页元素。

CSS的选择器通常对应的有

  • HTML样式选择器:即html中的标签和元素,如a,p,h1,div等:
  • 类样式选择器:同一个选择器可以有不同的类,因而允许同一个元素有不同的样式,定义的方式是元素名.类名,如p.class1  (类名是自定义的,如果不加元素名则代表所有HTML元素),就用此类样式时,直接在标签内添加class=””即可,而若要添加多个类的样式时,直接在类名中间使用空格分开即可,如<h1 class=”class1 class2″>。
  • ID样式选择器:在HTML页面中, ID属性指定了某个单一元素,ID属性就用来对单一元素定义单独样式。但要注意在一个HTML页面中,ID属性值要唯一。定义的方式是#idname,调用该样式的标签中应该包含id=””,如<p id=”id1″>。
  • 关联样式选择器:关联选择器是一个用空格隔开的两个或更多的单一选择器组成的字符串(如 div #id1 .class1 p{ })。因为层叠顺序的规则,它们的优先级别比单一的选择符高,必须按关联关系使用,且顺序不能写反。只要能保持关联关系就可以,而不管是在标签内的多少层。
  • 组合样式选择器:为了减少样式表的重复声明,可以使用组合样式,只需将英文逗号(,)分隔开每个选择符就可以了,比如div,#id1,.class1,h1。
  • 伪元素样式选择器:伪元素样式选择器是指对同一个HTML元素在不同的状态下的一种定义方式。目前只有a和p两个HTML元素可以使用伪元素。使用的语法为标签:伪元素或标签.类名:伪元素,例如:
a:link            没有任何动作前的状态
a:hover         光标移动到到超链接上的状态
a:active:       选中超链接的状态
a:visited        访问过超链接的状态
p:first-letter   一个段落中首个字母的状态
p:first-line    一个段落中首行的状态
此外还有样式继承的规则则为所有嵌套在某个HTML标签内的HTML标签都会继承外层标签设置的样式规则。样式规则的优先级顺序为关联选择器>ID选择器>类选择器>HTML选择器。

HTML和CSS概述及HTML基本语法

HTML(Hypertext Markup Language超文本标记语言)是WEB页面的描述性语言,而CSS(Cascading Style Sheets层叠样式表)用于定义网页的外观和布局(字体、背景、文本、位置、边缘、列表等),JavaScript用来实现客户端的交互,PHP(Hypertext Preprocessor)是服务器端脚本语言,用于实现动态网页的功能,CSS和JavaScript以及PHP都可以嵌入在HTML中应用。
HTML文件通常有两种后缀名.html和.htm,一个典型的HTML文件由多个成对的开启<**>和闭合标签</**>加上相应内容组成(并非所有的标签都是成对的,如<br />),CSS文件的后缀名为.css,对外单独存取的css文件可通过类似<link href=”style.css” rel=”stylesheet” type=”text/css”/>的语句来调用,也可写在html的head中,如下所示

在有些情况下,可以直接将属性嵌入到标签中来实现对样式的定义,属性的值(不管什么类型)可以使用单引号、双引号、不加引号(W3C的标准是使用双引号),属性是对标记功能的扩展或行为的修饰,多个属性中间用空格分开,每个属性几乎都是可选的。

不论是HTML的标签还是属性都是不区分大小写的,但是推荐使用小写字母。HTML文档的注释格式为 <!–  注释内容  –>,在注释中不能再包含注释,在注释时要保证成对存在的标签保持完整。

在HTML源代码中,空格和换行将会被忽略。HTML中要显示一部分内容有时需使用字符实体,通常包含三部分:即以&开头,中间用一个实体名或是使用#号和一个编号,后面以分号;结束,如小于号<可以用 &lt;或 &#60;大于号>可以用&gt;  或&#62; 来进行显示。

HTML颜色的设置:设置颜色时可以是一个关键字(如Red, Blue)或RGB的数字格式(如#cccccc),下图为w3c(World Wide Web Consortium)所支持直接使用的16种颜色名以及对应的RGB16进制值,6位16进制的值是这样分配的,前两个代表R即Red,中间两个代表G,即Green,后面两个代表,B即Blue,两位16进制值可以从00到FF,即0到255,也就是这种方法可标识256*256*256=16777216种颜色
Color names and sRGB values
black = “#000000” green = “#008000”
silver = “#C0C0C0” lime = “#00FF00”
gray = “#808080” olive = “#808000”
white = “#FFFFFF” yellow = “#FFFF00”
maroon = “#800000” navy = “#000080”
red = “#FF0000” blue = “#0000FF”
purple = “#800080” teal = “#008080”
fuchsia = “#FF00FF” aqua = “#00FFFF”

HTML的主体标记包括三部分:

网页文件的最外层标签<html>

头部标签<head>,头部信息是不会显示在浏览器的内容中,可包含基本的描述如标题<title>,网页的公共属性如样式<style>等,其中还有<base />,<link />,<meta>,<title></title>用于定义网页标题,显示在浏览器的标题栏中,有助于搜索引擎优化(SEO);<base href=”” />为基底网址标记,用于设定浏览器中文件的默认绝对路径,如果设定,网页中的其它文件只需写入相对地址即可 ; <link rel=”” type=”” href=”” />用于设置所调用外部文件的链接,并确定当前页面与外部资源之间的关系;元标签meta有两种:<meta name=”” content=””>和<meta http-equiv=”” content=””>,前者用于在网页中加一些描述信息,如keywords, description, robots(值包含index, noindex, follow, nofollow, all, none), author, copyright,后者用于在HTML文档中模拟HTTP协议响应的消息头,例如告知浏览器有关缓存模式、字符集等信息,如Content-Type(字符集), refresh(设置刷新频率), expires(设置缓存时间), Windows-Target(分帧显示位置), Page-Enter,Page-Exit(进入页面和退出页面的物资)。

正文部分<body>标签,包含文本、图片、链接、表单等主体内容,也就是浏览器中显示的所有内容。body体中可指定多种属性,如bgcolor, alink, vlink, margin, padding,但这些通常通过css来进行控制,还有些其它通用属性:id, name, class, style。

除这三个部分,还有一个定义语法规则的DTD(Document Type Definition)即文档类型定义,如下面所示的内容