CSS 元素的定位
CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动（参见第13课），你将能够创建多种高级而精确的布局。
本课我们将讨论以下内容：
CSS定位的原理
绝对定位
相对定位
CSS定位的原理
把浏览器窗口想象成一个坐标系统：
CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。
假设我们要放置一个标题。通过使用盒状模型（参见第9课），标题将显示如下:
如果我们要把这个标题放置在距文档顶部100像素、左边200像素的地方，我们可以在CSS中输入以下代码：
h1 {
position:absolute;
top: 100px;
left: 200px;
}
得到的显示效果如下：
正如你所看到的，采用CSS定位技术来放置元素是非常精确的。相对于使用表格、透明图像或其他方法而言，CSS定位要简单得多。
绝对定位
一个采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位。
要对元素进行绝对定位，应将position属性的值设为absolute。接着，你可以通过属性left、right、top和bottom来设定将盒子放置在哪里。
举个绝对定位的例子，假如我们要在文档的四个角落各放置一个盒子：
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
显示示例
相对定位
要对元素进行相对定位，应将position属性的值设为relative。绝对定位与相对定位的区别在于计算位置的方式。
采用相对定位的元素，其位置是相对于它在文档中的原始位置计算而来的。这意味着，相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元素会获得相应的空间。
举个相对定位的例子，我们可以相对于三张图片在页面上的原始位置来对它们进行相对定位。注意这些图片将在文档中各自的原始位置处留下空位。
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}
显示范例
转自：http://zh.html.net/tutorials/css/lesson14.asp
相关文档：
内部样式表
内部样式表需要在网页的<head>部分定义，格式如下：
<head>
<style type="text/css">
/*符合CSS语法结构的CSS语句，例如*/
body { background-color: blue; }
</style>
</head>
行内样式表(内嵌样式表)
行内样式表直接在标签内部定义，使用style属性，写法如下：
......
在国内网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。没错，px比em更加容易使用，大部分读者不知道em为何物或者它相当于多少px。国外人士如此重视网� ......
效果图
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Scrollable</title>
<mce:script type="text/javascript"><!--
resizeCallback = function() {
......
兼容IE、FireFox、Chrome
//加载js
function loadJs(){
if (!getObj('script_PlData')){
var scriptObj= document.createElement("script");
//scriptObj.id = 'script_1';
&nb ......
<style type="text/css">
/*
根据input的type来控制css样式
*/
/*
1.用css的expression判断表达式
优点：简单，轻量级
缺点：expression判断表达式FireFox是不支持的。致命的是只能区分出一个（例如例子中就只能区分出text文本框），不要试图设置多个，下面的会将上面的覆盖掉
input
{
background- ......
