2005年1月7日            作者： 赖小年

安装uPortal_rel-2-5-1过程中会碰到许多的一问题，希望把按装的心得和问题的解决方法，希望和大家一起分享

1.uPortal简介：

(JA-SIG)开发的uPortal基于的Java, XML, and XSL项目， 发行版包括WEB服务频道，权限，用户组管理等等。UPortal让你可以自己

增加你的机构需要的新特性。它着眼于高等教育机构，一些商业组织也用它来作为构建协同社区的框架。这种框架包括插入式的被成

为频道的组件，它提供用户感兴趣的信息。用户可以根据其在机构中角色选择关心的频道，同时还可以定制自己站点喜欢的样式。
  Sun Microsystems公司是高度评价开放源uPortal码的第一家平台供应商，认为uPortal码拥有Java开发的最佳实践和设计方案，能

够确保高等院校异种机环境中系统的优异性能。Sun此举进一步展示了它在为教育市场提供先进的、开放的和基于标准的解决方案方面

所做的努力。基于uPortal架构在教育市场具有很好的开拓潜力，Sun公司加强了它对JA-SIG的支持，以便促进高等教育机构间的协作

和优秀应用软件的共享。
　　　　Sun还将与JA-SIG进一步合作，使uPortal下一版本满足JSR-168条款(JSR-168是Java技术规范第68款，它是业界的第一个门户

API标准)。这样，就能使uPortal基于门户程序的各种内容和应用集成在一起，并用于门户服务。通过关键的Java 标准的提供，Sun

ONE门户服务器和uPortal间将实现兼容。

2.下载
上http://www.uportal.org/index.html下载最新版本，你可以在Download页面中Release2.5.1的最新版本，他包含2.5.1 GA

QuickStart 和2.5.1 uPortal-only 两个版本，可以把两个版本都下载下来试试

3.安装QuickStart 版
    把uPortal_rel-2-5-1-quick-start.zip包解压，确保你的电脑上装了jdk-1_5_0_05-windows-i586-p.exe(没有的话去

http://java.sun.com/下载)，用命令行进入uPortal_rel-2-5-1-quick-start目录下，很简单，先执行命令ant hsql,然后再开个命令

行窗口，进入这个目录下执行ant tomcatstart命令 。这样数据库和tomcat都启动了，可以在ie中用http://localhost:8080/uPortal

登陆了
  注意的问题：这个步骤中注意关掉自己的防火墙，不然的话hsql就会启不动，还要注意机器的jdk是5.0版的，而且要设置JAVA_HOME

4.安装uPortal_rel-2-5-1版
  首先，装Ant_1-6-5，最简单的就是把uPortal_rel-2-5-1-quick-start里的拷到uPortal_rel-2-5-1解压后的目录下，还要装上了MS

SQL Server和apache-tomcat-5.5.12
  然后，修改配置，把你的数据库驱动放到lib目录下，我用的是公司以打包的sql驱动msjdbc.jar（如果你没有的话可以问我要

qq:89062647）,然后修改build.properties文件里的server.home为你的tomcat的目录，把jdbcDriver.jar参数改成msjdbc.jar。修改

properties目录里的rdbm.properties文件加上你自己的驱动，例如：
jdbcDriver=com.microsoft.jdbc.sqlserver.SQLServerDriver
jdbcUrl=jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=uportal;SelectMethod=Cursor;
jdbcUse还要在数据库里建好一个uportal数据库
这样你就可以开始编译和部署你的uportal了,至于网上说的修改PersonDirs.xml和dbloader.xml文件，对于2.5.1的版本都可以按他默

认的去装，也可以运行起来。
在命令行下输入ant compile编译，等编译完成，再输入ant initportal初始化命令，这个步骤包括了deploy，db等命令，好了，所有动作都已完成
注意问题：jdbcDriver.jar上可能会当你只设mssqlserver.jar会出错，说找不到驱动。你可以先按deploy，db命令等步骤，先那样执行看看出什么结果
5.修改tomcat配置，如果你按照apache-tomcat-5.5.12默认的设置，运行不了，因为没有把数据连接池设为全局的，必须在conf文件夹下的context.xml文件中的前面加上：

uPortal 何许人也，当然它是一个开源的Portal产品，那么在众多的Portal中为什么它能吸引我的眼球呢？原来在近期研究CAS的过程中发现了它。uPortal的单点登录部分采用了CAS的Proxy架构，而且它也是一个由美国众高校开发研制和维护的产品，本文简述了uPortal的安装与配置过程。对其的深入研究还需一定时日。

uPortal is a free, sharable portal under development by institutions of higher-education. This group sees an institutional portal as an abridged and customized version of the institutional Web presence... a "pocket-sized" version of the campus Web. Portal technology adds "customization" and "community" to the campus Web presence. Customization allows each user to define a unique and personal view of the campus Web. Community tools, such as chat, forums, survey, and so on, build relationships among campus constituencies.

uPortal is an open-standard effort using Java, XML, JSP and J2EE. It is a collaborative development project with the effort shared among several of the JA-SIG member institutions. You may download uPortal and use it on your site at no cost.

uPortal的发行版有两种，Quick Start版和Only uPortal版，顾名思义，前者是一个包含了Servlet容器在内的可直接运行的程序，而后者则需要进行编译和部署到现有的Web容器中，这里我当然用的是后者（前者实在太无聊了）。需要使用ant对其源码进行编译。具体步骤如下：

uPortal Only Distribution

What is included?

The uPortal-only distribution is downloaded as a zip file which extracts to directory called uPortal_rel-2-4-2.zip . The directory contains the following...

• docs - directory containing documentation about uPortal.
• src - directory hierarchy containing the source code for uPortal.
• lib - directory containing necessary jar files for the Java API's used by uPortal.
• webpages - hierarchy which contains stylesheets, image files, java servlet pages, and other necessary files for uPortal.
• properties - directory which contains properties and configuration files used by uPortal.

...and the following files

• build.xml - build file for use by Ant.
• build.properies - properties file for use by Ant.

What do you need to know?

Use of this distribution requires knowledge of J2EE environments and the Ant tool from the Apache Jakarta project.

Requirements

• The Java Development Kit (JDK) version 1.3 or higher must be installed.
• JAVA_HOME environment variable must be set.
• The Jakarta-Ant build tool (version 1.5.3 or later).
• A web application environment such as Tomcat or IBM Websphere
• An SQL database such as HypersonicSQL, Oracle, or PostgreSQL

Setting up a Web Application Environment

The uPortal web application requires a web application enviroment such as Tomcat or IBM Webshere . If you already have a web application environment installed on a server, the uPortal context can just be deployed to that environment, otherwise you will have to install one. The build files for uPortal have been set up such that it can be easily deployed into Tomcat. The Jakarta-Tomcat servlet container can be downloaded from: http://jakarta.apache.org/tomcat/index.html . Version 4.1.24 is recommended.

Compiling and Deploying uPortal

Compiling and deploying uPortal is managed using the Jakarta Ant build environment. It is highly recommended that anyone implementing uPortal or developing channels become familiar with the Ant build tool. Documentation for Ant is available at Jakarta-Ant web site

For detailed instructions on how to compile and deploy uPortal go to the documentation page at:

Building uPortal.

Building and Deploying uPortal

Overview

Compiling and deploying uPortal is managed using the Ant build tool. Ant uses a file called build.xml for managing what is compiled and copies all necessary files into the uPortal context. The uPortal context can then be deployed as a complete web application running in a servlet container such as Tomcat or IBM Websphere. The build.xml file uses several properties defined in a file called build.properties. Both of these files can be found in the uPortal_rel-2-1-3 directory.

Obtaining the Ant build tool

If using the uPortal-only release you will need to download the Ant build tool. It is available from http://jakarta.apache.org/ant. Once the archive is downloaded, uncompress it and update the operating system environment such that it is available form the standard search path. It is recommended that an ANT_HOME environment be set, and ANT_HOME/bin added to the PATH environment variable.

Obtaining external dependency libraries

If using the uPortal-only release you will have to obtain all of the necessary external dependency libraries before attempting to compile uPortal.

1. First create a directory for downloading the necessary packages, for example /usr/local/java (unix) or C:\usr\local\java (Windows).
2. Refer to the build.xml for a complete list of all packages you will need to obtain. Look for the comment section labeled "External Dependencies".
3. Download each of the packages from the location specifed. For example, the xalan jar files are available from http://xml.apache.org/xalan-j. It is recommended that the required version specified in the build.xml file be downloaded.
4. Each package typically contains jar files, documentation, and other related files in an compressed archive (zip, gzipped tar file). Uncompress each of the packages into the download directory. Most of the packages will created a subdirectory for the package with lib, doc, and other directories within that directory.
5. Edit the build.properties file and change the property values to point to the location of all the required jar files.

   For example, change:

   xalan.jar=./lib/xalan.jar
   to
   xalan.jar=/usr/local/java/xalan-j_2_4_0/bin/xalan.jar

6. Note that there are some additional properties in build.properties which may be modified. Leave them alone for now. Typically you should not need to modify the build.xml file at all.

Compiling uPortal

Now your ready to compile uPortal. Go to the uPortal_rel-2-1-3 directory and just type ant. Ant will first create a build directory, then invoke the java compiler and store all of the compiled class files into build/WEB-INF/classes. It will also copy many other files into the build directory including stylesheet files, images, and property files. If everything worked you should see a message which reads:

BUILD SUCCESSFUL

If something went wrong, it is most likely due to Ant being unable to find one or more of the external dependencies. Check the build.properties file and try again.

Deploying uPortal

The Ant build tool also manages the deployment of the uPortal application into a servlet container. It will copy everything that it compiled and stored in the build directory into a directory specified in the build.properties files as deploy.home.

If using the uPortal-only release you will first need to obtain a servlet container. The Tomcat servlet container is recommended. Tomcat can be downloaded from http://jakarta.apache.org/tomcat. Uncompress the archive file to a location where the web application server will run. For example, on Unix, extracting the Tomcat version 4.1.24 zip file into the /usr/local directory will create a directory called /usr/local/jakarta-tomcat-4.1.24 which is usually refered to with an environment variable called TOMCAT_HOME.

Before deploying uPortal you may need to modify the build.properties. Edit the file and find the deploy.home property. Change the value such that it points to the location where uPortal will be deployed. For a Tomcat servlet container that would typically be $TOMCAT_HOME/webapps/{app.name}, for example:

deploy.home=/usr/local/jakarta-tomcat-4.0.4/webapps/uPortal

Note: if you are working with the quick-start release, the deployment directory is relative to the uPortal_rel-2-1-3 directory (../tomcat-4.1.24/webapps/uPortal) and should not be changed.

Now you're ready to deploy uPortal to the servlet container. Simply type "ant deploy" to invoke the "deploy" target. If everything worked correctly you will see a BUILD SUCCESSFULL message.

Setting up A Database

The uPortal system can be deployed such that a database from several different vendors may be used. Installation and configuration information about databases can be found in the:

Database Installation and Configuration Document

Setting up A Oracle Database

About Oracle

Oracle is a commercial database available from http://www.oracle.com

Obtaining the Driver

A Oracle JDBC driver is also available through http://www.oracle.com. Versions for Oracle 8i and Oracle 9i are available. The driver downloads as a single "zip" file (for example, classes12.zip). The file should be stored in a directory where it will be accessible from the uPortal build environment (for example /usr/local/java/oracle/lib/classes12.zip)

See Issues section about possible issues using this driver.

Properties Configuration

The uPortal build.properties will need to be modifed. Find the property called jdbcDriver and change it to point to the Oracle zip/jar file, for example:

jdbcDriver.jar=/usr/local/java/lib/classes12.zip

The uPortal rdbm.properties file (in the properties directory) will need to modified to specify the driver properties. First, comment out the property definitions which are currently defined (most likely, for HypersonicSQL). The rdbm.properties file contains several sample entries. Uncomment the lines for the Oracle database and make whatever changes necessary to match your local database installation, For example:

##### Oracle - example
jdbcDriver=oracle.jdbc.driver.OracleDriver
jdbcUrl=jdbc:oracle:thin:@localhost:1521:uportal
jdbcUser=test
jdbcPassword=mypass

The dbloader.xml properties file (also in the properties directory) may also need to be modified. This file is used by the DbLoader tool to create the uPortal database tables and populate the database. It contains several sample entries which create db-type-mappings for different databases. Find the tags for an Oracle database and modify the db-version, driver-name, and driver-version as necessary. For example:

<db-type-mapping>
  <db-name>Oracle</db-name>
  <!-- Line break has to be here -->
  <db-version>Oracle8 Enterprise Edition Release 8.0.6.2.0 - Production
  PL/SQL Release 8.0.6.2.0 - Production</db-version>
  <driver-name>Oracle JDBC driver</driver-name>
  <driver-version>8.1.6.0.0</driver-version>
  <type><generic>TIMESTAMP</generic><local>DATE</local></type>
  <!-- map more types here -->
</db-type-mapping>

The PersonDirs.xml file (also in the properties directory) may need to be modified; This file is used if the database is to be used to provide user directory information.

<!-- JDBC Properties -->
<driver>oracle.jdbc.driver.OracleDriver</driver>
<url>jdbc:oracle:thin:@localhost:1521:uportal</url>
<logonid>test</logonid>
<logonpassword>mypass</logonpassword>,
<uidquery>SELECT FIRST_NAME||' '||LAST_NAME AS FIRST_LAST,
FIRST_NAME, LAST_NAME, EMAIL FROM UP_PERSON_DIR WHERE USER_NAME=?></uidquery>

Loading the Database

Loading the database requires a couple of steps

• Create the database: Refer to the Oracle database documentation for instructions regarding how to create an Oracle database instances. The database name (or in this case, the Oracle SID), port number, and driver information must reflect what was defined in the rdbm.properties file
• Create the tables and populate the database: From the uPortal build directory, run "ant db" to execute the ant target which loads the database. The ant target uses the Dbloader tool.

Complete the Installation

Once you have compiled and deployed uPortal and setup a database for it to utilize, you still need to publish the channel fragments and internationalize the database. This can be done in one step by issuing the `ant initportal` command. Once this command completes without errors, your uPortal instance should be fully functional.

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=46067

  2.   继承的第二种方式:  prototype方式.
        把父类对象赋给 子类的prototype属性.
        把我们的子类改一下:
        function child()
        {
                     this.second = childSecond;
         }
         加入   child.prototype = new parent;这一行语句,执行,发现和第一种方式得到同样的结果.
        用prototype 方式继承比调用构造函数方式更灵活.用prototype方式可以实现动态继承,比如你用prototype方式给父类动态增加一个属性或者方法,那么子类自动就会获得这个属性或者方法.  
           在javascript中你可以随意的给对象增加属性或者方法,但是当你给一个实例化的对象增加属性的时候,这个增加的属性只属于这个实例,例如:
   var newClass = new subClass();
  newClass.addprop = "新增属性";
如果想为该类的所有实例都增加一个属性或者方法,要用prototype,  例子
   var newClass = new child();
  child.prototype.addprop = "新增属性";
  这样newClass里就会有addprop这个属性了.
这也是我们给javascript内部对象增加属性或者方法的方式,比如 String.prototype.toString={return "aaa";},不过javascript的内部对象的prototype属性都是只读的,所以只能增加内部对象的属性,不能修改.
      突然感觉倒 prototype,用处原来如此之多,上边写的不过是其中一小步分啊.

2、getElementsByName(name) 
返回名字是name的元素数组，在IE6中元素ID匹配这个名字的话，这个元素也将包括在内，而且getElementsByName()仅用于象input,radio,checkbox等元素对象。 
象下面例子中georges数组的长度应该是0。 
<body> 
<div name="george">f</div> 
<div name="george">f</div> 
<script type="text/javascript"> 
var georges=document.getElementsByName("george"); 
alert(georges.length); 
</script> 
</body> 
3、getElementsByTagName(tagname) 
getElementByTagName 可以用于DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表（数组）。你可以遍历这个数组获得每一个单独的子元素。当处理很大的DOM结构，使用这种方法可以很容易的所有缩小范围。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>

<style type="text/css">

body{
 font-family: Arial, sans-serif;
 color: #ECE9D8;
 line-height: 1.6; 
 margin: 0px;
 padding: 0px;
}
 
#topMailList {
 FONT-SIZE: 93%;
 FLOAT: left;
 WIDTH: 100%;
 LINE-HEIGHT: normal;
 background-color: #FFFFFF;
}
#topMailList UL {
 PADDING-RIGHT: 10px;
 PADDING-LEFT: 50px;
 PADDING-BOTTOM: 0px;
 MARGIN: 0px;
 PADDING-TOP: 10px;
 LIST-STYLE-TYPE: none
 FLOAT: left;
 position: fixed;
 height: auto;
 width: auto;
}

#topMailList LI {
 PADDING-RIGHT: 0px;
 DISPLAY: inline;
 PADDING-LEFT: 0px;
 PADDING-BOTTOM: 0px;
 MARGIN: 0px;
 PADDING-TOP: 0px;
 height: 1.6px;
 width: 100px;
 color: #0000FF;
 z-index: auto;
}

#topMailList INPUT{
 FLOAT: left;
 }

#topMailList A {
 PADDING-RIGHT: 0px;
 PADDING-LEFT: 4px;
 BACKGROUND: url(images/tableft.gif) no-repeat left top;
 FLOAT: left;
 PADDING-BOTTOM: 0px;
 MARGIN: 0px;
 PADDING-TOP: 0px;
 TEXT-DECORATION: none;
 position: inherit;
 width: 30%;
 white-space: nowrap;
 overflow: hidden;
}

#topMailList li span A{
 PADDING-RIGHT: 0px;
 DISPLAY: inline;
 PADDING-LEFT: 0px;
 PADDING-BOTTOM: 0px;
 MARGIN: 0px;
 PADDING-TOP: 0px;
 height: 1.6px;
 width: 100px;
 color: #0000FF;
 z-index: auto;

}

 /* 邮件条目 */

.mailItem {
 FONT-SIZE: 93%;
 FLOAT: left;
 WIDTH: 100%;
 LINE-HEIGHT: normal;
 background-color: #FFFFFF;
}
.mailItem UL {
 PADDING-RIGHT: 10px;
 PADDING-LEFT: 50px;
 PADDING-BOTTOM: 0px;
 MARGIN: 0px;
 PADDING-TOP: 10px;
 LIST-STYLE-TYPE: none
 FLOAT: left;
 position: fixed;
 height: auto;
 width: auto;
}

.mailItem LI {
 PADDING-RIGHT: 0px;
 DISPLAY: inline;
 PADDING-LEFT: 0px;
 PADDING-BOTTOM: 0px;
 MARGIN: 0px;
 PADDING-TOP: 0px;
 height: 1.6px;
 width: 100px;
 color: #0000FF;
 z-index: auto;
}

.mailItem INPUT{
 FLOAT: left;
 }

.mailItem A {
 PADDING-RIGHT: 0px;
 PADDING-LEFT: 4px;
 BACKGROUND: url(images/tableft.gif) no-repeat left top;
 FLOAT: left;
 PADDING-BOTTOM: 0px;
 MARGIN: 0px;
 PADDING-TOP: 0px;
 TEXT-DECORATION: none;
 position: inherit;
 width: 30%;
 white-space: nowrap;
 overflow: hidden;
}
/* 邮件列表 */
#mailItems{
 float: left;
 width: auto;
 height: 256px;
 overflow-y:scroll;
 margin: 0  2 0 0 ;
}

#mailDetail{
 float: left;
 width: 100%;
 height: 422px;
 overflow-y:scroll;
 color: #990000;
 font-family: "宋体";
 margin: 2 0 0 0;
 text-align: left;
}
#right{
 width:80%;
 float: left;
 height: auto;
 margin:0 auto;
 position:absolute;
 
}

a{
 color: #006699;
 text-decoration: none;
}

a:link{
 color: #006699;
 text-decoration: none;
}

a:visited{
 color: #006699;
 text-decoration: none;
}

a:hover{
 color: #FF0000;
 text-decoration: underline;
}

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h2{
 font-family: Arial,sans-serif;
 font-size: 114%;
 color: #006699;
 margin: 0px;
 padding: 0px;
}

h3{
 font-family: Arial,sans-serif;
 font-size: 100%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h4{
 font-family: Arial,sans-serif;
 font-size: 100%;
 font-weight: normal;
 color: #333333;
 margin: 0px;
 padding: 0px;
}

h5{
 font-family: Verdana,Arial,sans-serif;
 font-size: 100%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

ul{
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

label{
 font-family: Arial,sans-serif;
 font-size: 100%;
 font-weight: bold;
 color: #334d55;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/

#masthead{
 padding: 10px 0px 0px 0px;
 border-bottom: 1px solid #cccccc;
 width: 100%;
}

#navBar{
 float: left;
 width: 200px;
 margin: 0px;
 padding: 0px;
 background-color: #eeeeee;
 border-right: 1px solid #cccccc;
    bottom: 1px solid #cccccc;
 height: 80%;
}

#headlines{
  float:right;
 width: 20%;
 border-left: 1px solid #cccccc;
 border-bottom: 1px solid #cccccc;
 padding-right: 10px;
}

#content{
 float: left;
 width: auto;
 height: 250px;
 overflow-y:scroll
}

/***********************************************/
/* Components                                  */
/***********************************************/

#siteName{
 margin: 0;
 padding: 0 0 0 10px;
 height: 10%;
}

/************* #globalNav styles **************/

#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: 1px solid #CCC;
color: #cccccc;
}

#globalNav img{
 display: block;
}

#globalNav a {
 font-size: 90%;
 padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

#pageName{
 margin: 0px;
 padding: 0px 0px 0px 10px;
}

/************* #breadCrumb styles *************/

#breadCrumb{
 font-size: 80%;
 padding: 2px 0px 0 10px;
}

/************** .feature styles ***************/

.feature{
 padding: 0px 0px 10px 10px;
 font-size: 80%;
 height: 100px;
}

.feature h3{
 padding: 30px 0px 5px 0px;
 text-align: center;
}

.feature img{
 float: left;
 padding: 10px 10px 0px 0px;
}

/************** .story styles *****************/

.story{
 clear: both;
 padding: 10px 0px 0px 10px;
 font-size: 80%;
}

.story p{
 padding: 0px 0px 10px 0px;
}

/************* #siteInfo styles ***************/

#siteInfo{
 clear: both;
 border: 1px solid #cccccc;
 font-size: 75%;
 color: #cccccc;
 padding: 10px 10px 10px 10px;
 position:absolute;
 bottom:0;
 width: 100%;
}

#siteInfo img{
 padding: 4px 4px 4px 10px;
 vertical-align: middle;
}

/************* #search styles ***************/

#search{
 padding: 5px 0px 5px 10px;
 border-bottom: 1px solid #cccccc;
 font-size: 90%;
}

#search form{
 margin: 0px;
 padding: 0px;
}

#search label{
 display: block;
 margin: 0px;
 padding: 0px;
}

/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

/*********** #sectionLinks styles ***********/

#sectionLinks{
 position: relative;
 margin: 0px;
 padding: 0px;
 border-bottom: 1px solid #cccccc;
 font-size: 90%;
}

#sectionLinks h3{
 padding: 10px 0px 2px 10px;
}

#sectionLinks a {
 display: block;
 border-top: 1px solid #cccccc;
 padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
 background-color: #dddddd;
}

/*********** .relatedLinks styles ***********/

.relatedLinks{
 position: relative;
 margin: 0px;
 padding: 0px 0px 10px 10px;
 font-size: 90%;
}

.relatedLinks h3{
 padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
 display: block;
}

/************** #advert styles **************/

#advert{
 padding: 30px 0px 10px;
}

#advert img{
 display: block;
}

/************** #headlines styles **************/

#headlines{
 margin: 0px;
 padding: 10px 0px 20px 10px;
 font-size: 80%;
}

#headlines p{
 padding: 5px 0px 5px 0px;
}

.STYLE1 {font-size: xx-large}
</style>
<script type="text/javascript">
function _resize(){
 var _h = Pia.isIE ? (document.body.clientHeight - 50) : ((document.body.clientHeight - 60));
 if(_h > 0){
  document.getElementById("container").style.height = _h;
 }
}
</script>

</head>
<body>

<div id="masthead">
  <h1 class="STYLE1" id="siteName">Title tab </h1>
</div>
<div>
<div id="navBar">
  <div id="search">
    <form action="#">
      <label>search</label>
      <input name="searchFor" type="text" size="10" />
      <input name="goButton" type="submit" value="go" />
    </form>
  </div>
  <div id="sectionLinks">
    <h3>链接</h3>
    <ul>
      <li><a href="#">  Link1</a></li>
      <li><a href="#">  Link2</a></li>
 
    </ul>
  </div>
  <div class="relatedLinks">
    <h3>Related Link Category</h3>
    <ul>
      <li><a href="#">Related Link</a></li>
      <li><a href="#">Related Link</a></li>
 
    </ul>
  </div>
  <div class="relatedLinks">
    <h3>Related Link Category</h3>
    <ul>
      <li><a href="#">Related Link</a></li>
      <li><a href="#">Related Link</a></li>
 
    </ul>
  </div>
</div>

<!--end headlines -->
<div id="right">

     <div id=mailItems>
            <div id=topMailList>
              <ul>
                <li>
                <input name="checkbox" type="checkbox" onclick="selectall(this.checked)" value="Check All" />
                </li>
                <li> <a href="?page=1&sortby=from&ascent=true&folder=inbox">发件人</a></li>
                <li> <a href="?page=1&sortby=subject&ascent=true&folder=inbox">主题</a></li>
                <li> <img /></li>
                <li><span><a href="?page=1&sortby=date&ascent=true&folder=inbox">接收时间</a></span></li>
                <li><span><a href="?page=1&sortby=size&ascent=true&folder=inbox">大小</a></span></li>
              </ul>
           </div>

        
  
           <div class=mailItem>
              <ul>
                <li>
                  <input type="checkbox" name="uid" id="uid_167abe78922a1c4768b79fb3b242a1e6.153" value="167abe78922a1c4768b79fb3b242a1e6.153" />
                </li>
                <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.153');"> 用户服务中心&nbsp;&lt;serv@scut.edu.cn&gt; </a></li>
                <li> <a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" > 请及时更新病毒库！ </a></li>
                <li> <img /> </li>
                <li> 2007/07/06 15:14:25  </li>
                <li>  1.68 KB  </li>
    </ul>
           </div>
    
    
     <div class=mailItem>
              <ul>
                <li>
                  <input type="checkbox" name="uid" id="uid_167abe78922a1c4768b79fb3b242a1e6.153" value="167abe78922a1c4768b79fb3b242a1e6.153" />
                </li>
                <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.153');"> 用户服务中心&nbsp;&lt;serv@scut.edu.cn&gt; </a></li>
                <li> <a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" > 请及时更新病毒库！ </a></li>
                <li> <img /> </li>
                <li> 2007/07/06 15:14:25  </li>
                <li>  1.68 KB  </li>
    </ul>
           </div>
                <div class=mailItem>
              <ul>
                <li>
                  <input type="checkbox" name="uid" id="uid_167abe78922a1c4768b79fb3b242a1e6.153" value="167abe78922a1c4768b79fb3b242a1e6.153" />
                </li>
                <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.153');"> 用户服务中心&nbsp;&lt;serv@scut.edu.cn&gt; </a></li>
                <li> <a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" > 请及时更新病毒库！ </a></li>
                <li> <img /> </li>
                <li> 2007/07/06 15:14:25  </li>
                <li>  1.68 KB  </li>
    </ul>
           </div>
    
                <div class=mailItem>
              <ul>
                <li>
                  <input type="checkbox" name="uid" id="uid_167abe78922a1c4768b79fb3b242a1e6.153" value="167abe78922a1c4768b79fb3b242a1e6.153" />
                </li>
                <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.153');"> 用户服务中心&nbsp;&lt;serv@scut.edu.cn&gt; </a></li>
                <li> <a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" > 请及时更新病毒库！ </a></li>
                <li> <img /> </li>
                <li> 2007/07/06 15:14:25  </li>
                <li>  1.68 KB  </li>
    </ul>
           </div>
    
                <div class=mailItem>
              <ul>
                <li>
                  <input type="checkbox" name="uid" id="uid_167abe78922a1c4768b79fb3b242a1e6.153" value="167abe78922a1c4768b79fb3b242a1e6.153" />
                </li>
                <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.153');"> 用户服务中心&nbsp;&lt;serv@scut.edu.cn&gt; </a></li>
                <li> <a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" > 请及时更新病毒库！ </a></li>
                <li> <img /> </li>
                <li> 2007/07/06 15:14:25  </li>
                <li>  1.68 KB  </li>
    </ul>
           </div>
    
       
             <div class=mailItem>
              <ul>
                <li>
                  <input type="checkbox" name="uid" id="uid_167abe78922a1c4768b79fb3b242a1e6.152" value="167abe78922a1c4768b79fb3b242a1e6.152" />
                </li>
                <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.152"   onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.152');">H.Yuan&nbsp;&lt;hyuan@scut.edu.cn&gt;</a></li>
                <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.152" title="j啦啦啦" target="content" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.152');" style="white-space: nowrap;overflow: hidden;">just&nbsp;for&nbsp;a&nbsp;look </a></li>
                <li> <img /> </li>
                <li>2007/07/04 11:21:31 </li>
                <li> 9.80 KB </li>
              </ul>
             </div>
             
             <div class=mailItem>
              <ul>
                <li>
                  <input type="checkbox" name="uid" id="uid_167abe78922a1c4768b79fb3b242a1e6.153" value="167abe78922a1c4768b79fb3b242a1e6.153" />
                </li>
                <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.153');">用户服务中心&nbsp;&lt;serv@scut.edu.cn&gt; </a></li>
                <li> <a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" > 请及时更新病毒库！ </a></li>
                <li> <img /></li>
                <li> 2007/07/0615:14:25 </li>
                <li> 1.68 KB  </li>
              </ul>
            </div>
 
         
    </div>
  
  
   <div id="mailDetail">
  
   2.空间定位

　　在这一节里，我们来看一个利用z-index定位的例子，这个例子的效果在这里。

　　　　这里利用了CSS定位的z-index属性，代码如下：
 

　　通过这两节的例子，我们可以看到CSS定位具有强大的功能，至于其他的一些定位属性，您可以自己尝试一下，很简单的。

　　　　利用好了CSS的定位功能，会使您的页面更加精致，更加富有动感。

　　　　下一章我将带您进入CSS滤镜的精彩世界。
  2.空间定位

　　在这一节里，我们来看一个利用z-index定位的例子，这个例子的效果在这里。

　　　　这里利用了CSS定位的z-index属性，代码如下：
 

　　通过这两节的例子，我们可以看到CSS定位具有强大的功能，至于其他的一些定位属性，您可以自己尝试一下，很简单的。

　　　　利用好了CSS的定位功能，会使您的页面更加精致，更加富有动感。

　　　　下一章我将带您进入CSS滤镜的精彩世界。  2.空间定位

　　在这一节里，我们来看一个利用z-index定位的例子，这个例子的效果在这里。

　　　　这里利用了CSS定位的z-index属性，代码如下：
 

　　通过这两节的例子，我们可以看到CSS定位具有强大的功能，至于其他的一些定位属性，您可以自己尝试一下，很简单的。

　　　　利用好了CSS的定位功能，会使您的页面更加精致，更加富有动感。

　　　　下一章我将带您进入CSS滤镜的精彩世界。  2.空间定位

　　在这一节里，我们来看一个利用z-index定位的例子，这个例子的效果在这里。

　　　　这里利用了CSS定位的z-index属性，代码如下：
 
 
 
 

　　通过这两节的例子，我们可以看到CSS定位具有强大的功能，至于其他的一些定位属性，您可以自己尝试一下，很简单的。

　　　　利用好了CSS的定位功能，会使您的页面更加精致，更加富有动感。

　　　　下一章我将带您进入CSS滤镜的精彩世界。  2.空间定位

　　在这一节里，我们来看一个利用z-index定位的例子，这个例子的效果在这里。

　　　　这里利用了CSS定位的z-index属性，代码如下：
 

　　通过这两节的例子，我们可以看到CSS定位具有强大的功能，至于其他的一些定位属性，您可以自己尝试一下，很简单的。

　　　　利用好了CSS的定位功能，会使您的页面更加精致，更加富有动感。
  </div> 
</div>
</div>

<!--end content -->
<div id="siteInfo"><img src="" width="44" height="22" /><a href="#">About Us</a> | <a href="#">Site Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | &copy; sadadada </div>
<br />
</body>
</html>

自适应高度布局

主页 > HTMLDog指南 > CSS高级指南 > 显示属性

h1 { display: inline; font-size: 2em; } #header p { display: inline; font-size: 0.9em; padding-left: 2em; } 

#navigation, #seeAlso, #comments, #standards { display: none; } 

伪类

主页 > HTMLDog指南 > CSS中级指南 > 伪类

a.snowman:link { color: blue; } a.snowman:visited { color: purple; } a.snowman:active { color: red; } a.snowman:hover { text-decoration: none; color: blue; background-color: yellow; } 

标准要点

主页 > HTMLDog指南 > HTML高级指南 > 标准要点

不良标签

主页 > HTMLDog指南 > HTML中级指南 > 不良标签