请看下面一段代码：
<HTML>
<HEAD>
<style>
#login {font-size:14px;color:blue;}//定义了一个ID
.left{FONT-SIZE=12PX;COLOR=RED;TEXT-ALIGN=CENTER;}//定义了一个类
</style>
<TITLE>中国</TITLE>
<BODY>
<DIV STYLE="FONT-SIZE=12PX;COLOR=RED;TEXT-ALIGN=RIGHT;">TEST</DIV>//直接设置样式
<DIV ID="login">TEST</DIV>//引用ID
<DIV class="left">TEST</DIV>//引用类
<DIV>TEST</DIV>
</BODY>
</HTML>
ID：表示唯一性，并且在这个页面中只会出现一次，我们它来表示布局的结构
CLASS：类，表示一组或一个具有同样性质的元素，它可以共用样式
#LOGIN表示某一个ID层，下面还可以设置类，比如#LOGIN.LEFT{TEXT-ALIGN:CENTER;},这个LEFT类可以在ID为LOGIN的框架中使用，其它地方无效 ......
开发过Android应用的同学们都知道，Android工程-res-layout资源文件夹下存放着控制view布局的xml文件，我们可以同过getViewById(int i)方法，从XML中构造view及其子类，在这个过程当中，XML文件中的一切layout属性也将被赋予这个view。当然，我们也能够通过代码来为某一个view来设置layout，那是后话。通过对集中layout的分析和比较我发现，Android中AbsoluteLayout与CSS的绝对定位很像，TableLayout与HTML的表格定位很像，而RelativeLayout与CSS的相对定位很像。前两者都已经是老生常谈了，我重点比较一下最后一对，即RelativeLayout与CSS的相对定位（Position:relative）。先看一段XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical">
<RadioGroup android:id="@+id/radioGroup"
&n ......
开发过Android应用的同学们都知道，Android工程-res-layout资源文件夹下存放着控制view布局的xml文件，我们可以同过getViewById(int i)方法，从XML中构造view及其子类，在这个过程当中，XML文件中的一切layout属性也将被赋予这个view。当然，我们也能够通过代码来为某一个view来设置layout，那是后话。通过对集中layout的分析和比较我发现，Android中AbsoluteLayout与CSS的绝对定位很像，TableLayout与HTML的表格定位很像，而RelativeLayout与CSS的相对定位很像。前两者都已经是老生常谈了，我重点比较一下最后一对，即RelativeLayout与CSS的相对定位（Position:relative）。先看一段XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical">
<RadioGroup android:id="@+id/radioGroup"
&n ......
一般而言，鼠标以斜向上的箭头显示，移到文本上时变为有头的竖线，移到超级链接上变为手型。但用css可控制鼠标的显示效果，如可使鼠标移到普通文本上也显示成手型。 用css控制的语法如下: span style="cursor:*"文本或其它页面元素/span 把 * 换成如下15个效果的一种：
一般而言，鼠标以斜向上的箭头显示，移到文本上时变为有头的竖线，移到超级链接上变为手型。但用css可控制鼠标的显示效果，如可使鼠标移到普通文本上也显示成手型。
用css控制的语法如下:
<span style="cursor:*">文本或其它页面元素</span>
把 * 换成如下15个效果的一种：
hand、crosshair、text、wait、default、help、e-resize、ne-resize、n-resize、nw-resize、w-resize、sw-resize、s-resize、se-resize和auto。
下面是对这15种效果的解释。移动鼠标到解释上面，看看你的鼠标起了什么变化吧！
hand是手型
crosshair是十字型
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
help是问号
e-size是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的 ......
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
二、万能 float 闭合
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需� ......
静态定位：position:static（为position属性的默认值）。
动态定位：position:relative或position:absolute或position:fixed。
祖元素：任意包含该元素的元素。 父元素：直接包含该元素的祖元素。 同辈元素：拥有共同的父元素的元素。
注：这些概
念为作者自定义，仅用于本文。
引用:
关于同辈元素是个非常关键的词，这里还需要详细解释
一下。
<div>
<div></div>
<div id="a"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div
id="f">
<div></div>
<div
id="b"></div>
......
最新文章 :