如何学好java

我在Java论坛看到这篇文章，作者以轻松的语言比喻了java的23种模式，有很好的启发作用，但可惜没有给出具体的意思，我就在后边加上了。这些都是最简单的介绍，要学习的话建议你看一下阎宏博士的《Java与模式》一书。

创建型模式

1、FACTORY—追MM少不了请吃饭了，麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西，虽然口味有所不同，但不管你带MM去麦当劳或肯德基，只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory

工厂模式：客户类和工厂类分开。消费者任何时候需要某种产品，只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时，工厂类也要做相应的修改。如：如何创建及如何向客户端提供。

2、BUILDER—MM最爱听的就是“我爱你”这句话了，见到不同地方的MM,要能够用她们的方言跟她说这句话哦，我有一个多种语言翻译机，上面每种语 言都有一个按键，见到MM我只要按对应的键，它就能够用相应的语言说出“我爱你”这句话了，国外的MM也可以轻松搞掂，这就是我的“我爱 你”builder。（这一定比美军在伊拉克用的翻译机好卖）

建造模式：将产品的内部表象和产品的生成过程分割开来，从而使一个建造过程生成具有不同的内部表象的产品对象。建造模式使得产品内部表象可以独立的变化，客户不必知道产品内部组成的细节。建造模式可以强制实行一种分步骤进行的建造过程。

3、FACTORY METHOD—请MM去麦当劳吃汉堡，不同的MM有不同的口味，要每个都记住是一件烦人的事情，我一般采用Factory Method模式，带着MM到服务员那儿，说“要一个汉堡”，具体要什么样的汉堡呢，让MM直接跟服务员说就行了。

工厂方法模式：核心工厂类不再负责所有产品的创建，而是将具体创建的工作交给子类去做，成为一个抽象工厂角色，仅负责给出具体工厂类必须实现的接口，而不接触哪一个产品类应当被实例化这种细节。

4、PROTOTYPE—跟MM用QQ聊天，一定要说些深情的话语了，我搜集了好多肉麻的情话，需要时只要copy出来放到QQ里面就行了，这就是我的情话prototype了。（100块钱一份，你要不要）

原始模型模式：通过给出一个原型对象来指明所要创建的对象的类型，然后用复制这个原型对象的方法创建出更多同类型的对象。原始模型模式允许动态的增加或减 少产品类，产品类不需要非得有任何事先确定的等级结构，原始模型模式适用于任何的等级结构。缺点是每一个类都必须配备一个克隆方法。

5、SINGLETON—俺有6个漂亮的老婆，她们的老公都是我，我就是我们家里的老公Sigleton，她们只要说道“老公”，都是指的同一个人，那就是我(刚才做了个梦啦，哪有这么好的事)

单例模式：单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例单例模式。单例模式只应在有真正的“单一实例”的需求时才可使用。
结构型模式

6、ADAPTER—在朋友聚会上碰到了一个美女Sarah，从香港来的，可我不会说粤语，她不会说普通话，只好求助于我的朋友kent了，他作为我和Sarah之间的Adapter，让我和Sarah可以相互交谈了(也不知道他会不会耍我)

适配器（变压器）模式：把一个类的接口变换成客户端所期待的另一种接口，从而使原本因接口原因不匹配而无法一起工作的两个类能够一起工作。适配类可以根据参数返还一个合适的实例给客户端。

7、BRIDGE—早上碰到MM，要说早上好，晚上碰到MM，要说晚上好；碰到MM穿了件新衣服，要说你的衣服好漂亮哦，碰到MM新做的发型，要说你的头发好漂亮哦。不要问我“早上碰到MM新做了个发型怎么说”这种问题，自己用BRIDGE组合一下不就行了

桥梁模式：将抽象化与实现化脱耦，使得二者可以独立的变化，也就是说将他们之间的强关联变成弱关联，也就是指在一个软件系统的抽象化和实现化之间使用组合/聚合关系而不是继承关系，从而使两者可以独立的变化。

8、COMPOSITE—Mary今天过生日。“我过生日，你要送我一件礼物。”“嗯，好吧，去商店，你自己挑。”“这件T恤挺漂亮，买，这条裙子好看， 买，这个包也不错，买。”“喂，买了三件了呀，我只答应送一件礼物的哦。”“什么呀，T恤加裙子加包包，正好配成一套呀，小姐，麻烦你包起 来。”“……”，MM都会用Composite模式了，你会了没有？

合成模式：合成模式将对象组织到树结构中，可以用来描述整体与部分的关系。合成模式就是一个处理对象的树结构的模式。合成模式把部分与整体的关系用树结构表示出来。合成模式使得客户端把一个个单独的成分对象和由他们复合而成的合成对象同等看待。

9、DECORATOR—Mary过完轮到Sarly过生日，还是不要叫她自己挑了，不然这个月伙食费肯定玩完，拿出我去年在华山顶上照的照片，在背面写 上“最好的的礼物，就是爱你的Fita”，再到街上礼品店买了个像框（卖礼品的MM也很漂亮哦），再找隔壁搞美术设计的Mike设计了一个漂亮的盒子装起 来……，我们都是Decorator，最终都在修饰我这个人呀，怎么样，看懂了吗？

装饰模式：装饰模式以对客户端透明的方式扩展对象的功能，是继承关系的一个替代方案，提供比继承更多的灵活性。动态给一个对象增加功能，这些功能可以再动态的撤消。增加由一些基本功能的排列组合而产生的非常大量的功能。

10、FACADE—我有一个专业的Nikon相机，我就喜欢自己手动调光圈、快门，这样照出来的照片才专业，但MM可不懂这些，教了半天也不会。幸好相 机有Facade设计模式，把相机调整到自动档，只要对准目标按快门就行了，一切由相机自动调整，这样MM也可以用这个相机给我拍张照片了。

门面模式：外部与一个子系统的通信必须通过一个统一的门面对象进行。门面模式提供一个高层次的接口，使得子系统更易于使用。每一个子系统只有一个门面类，而且此门面类只有一个实例，也就是说它是一个单例模式。但整个系统可以有多个门面类。

11、FLYWEIGHT—每天跟MM发短信，手指都累死了，最近买了个新手机，可以把一些常用的句子存在手机里，要用的时候，直接拿出来，在前面加上 MM的名字就可以发送了，再不用一个字一个字敲了。共享的句子就是Flyweight，MM的名字就是提取出来的外部特征，根据上下文情况使用。

享元模式：FLYWEIGHT在拳击比赛中指最轻量级。享元模式以共享的方式高效的支持大量的细粒度对象。享元模式能做到共享的关键是区分内蕴状态和外蕴 状态。内蕴状态存储在享元内部，不会随环境的改变而有所不同。外蕴状态是随环境的改变而改变的。外蕴状态不能影响内蕴状态，它们是相互独立的。将可以共享 的状态和不可以共享的状态从常规类中区分开来，将不可以共享的状态从类里剔除出去。客户端不可以直接创建被共享的对象，而应当使用一个工厂对象负责创建被 共享的对象。享元模式大幅度的降低内存中对象的数量。

12、PROXY—跟MM在网上聊天，一开头总是“hi,你好”,“你从哪儿来呀？”“你多大了？”“身高多少呀？”这些话，真烦人，写个程序做为我的Proxy吧，凡是接收到这些话都设置好了自动的回答，接收到其他的话时再通知我回答，怎么样，酷吧。

代理模式：代理模式给某一个对象提供一个代理对象，并由代理对象控制对源对象的引用。代理就是一个人或一个机构代表另一个人或者一个机构采取行动。某些情 况下，客户不想或者不能够直接引用一个对象，代理对象可以在客户和目标对象直接起到中介的作用。客户端分辨不出代理主题对象与真实主题对象。代理模式可以 并不知道真正的被代理对象，而仅仅持有一个被代理对象的接口，这时候代理对象不能够创建被代理对象，被代理对象必须有系统的其他角色代为创建并传入。

行为模式

13、CHAIN OF RESPONSIBLEITY—晚上去上英语课，为了好开溜坐到了最后一排，哇，前面坐了好几个漂亮的MM哎，找张纸条，写上“Hi,可以做我的女朋友 吗？如果不愿意请向前传”，纸条就一个接一个的传上去了，糟糕，传到第一排的MM把纸条传给老师了，听说是个老处女呀，快跑!

责任链模式：在责任链模式中，很多对象由每一个对象对其下家的引用而接

起来形成一条链。请求在这个链上传递，直到链上的某一个对象决定处理此请求。客户并不知道链上的哪一个对象最终处理这个请求，系统可以在不影响客户端的情 况下动态的重新组织链和分配责任。处理者有两个选择：承担责任或者把责任推给下家。一个请求可以最终不被任何接收端对象所接受。

14、COMMAND—俺有一个MM家里管得特别严，没法见面，只好借助于她弟弟在我们俩之间传送信息，她对我有什么指示，就写一张纸条让她弟弟带给我。 这不，她弟弟又传送过来一个COMMAND，为了感谢他，我请他吃了碗杂酱面，哪知道他说：“我同时给我姐姐三个男朋友送COMMAND，就数你最小气， 才请我吃面。”，

命令模式：命令模式把一个请求或者操作封装到一个对象中。命令模式把发出命令的责任和执行命令的责任分割开，委派给不同的对象。命令模式允许请求的一方和 发送的一方独立开来，使得请求的一方不必知道接收请求的一方的接口，更不必知道请求是怎么被接收，以及操作是否执行，何时被执行以及是怎么被执行的。系统 支持命令的撤消。

15、INTERPRETER—俺有一个《泡MM真经》，上面有各种泡MM的攻略，比如说去吃西餐的步骤、去看电影的方法等等，跟MM约会时，只要做一个Interpreter，照着上面的脚本执行就可以了。

解释器模式：给定一个语言后，解释器模式可以定义出其文法的一种表示，并同时提供一个解释器。客户端可以使用这个解释器来解释这个语言中的句子。解释器模 式将描述怎样在有了一个简单的文法后，使用模式设计解释这些语句。在解释器模式里面提到的语言是指任何解释器对象能够解释的任何组合。在解释器模式中需要 定义一个代表文法的命令类的等级结构，也就是一系列的组合规则。每一个命令对象都有一个解释方法，代表对命令对象的解释。命令对象的等级结构中的对象的任 何排列组合都是一个语言。

16、ITERATOR—我爱上了Mary，不顾一切的向她求婚。

Mary：“想要我跟你结婚，得答应我的条件”

我：“什么条件我都答应，你说吧”

Mary：“我看上了那个一克拉的钻石”

我：“我买，我买，还有吗？”

Mary：“我看上了湖边的那栋别墅”

我：“我买，我买，还有吗？”

Mary：“我看上那辆法拉利跑车”

我脑袋嗡的一声，坐在椅子上，一咬牙：“我买，我买，还有吗？”

……

迭代子模式：迭代子模式可以顺序访问一个聚集中的元素而不必暴露聚集的内部表象。多个对象聚在一起形成的总体称之为聚集，聚集对象是能够包容一组对象的容 器对象。迭代子模式将迭代逻辑封装到一个独立的子对象中，从而与聚集本身隔开。迭代子模式简化了聚集的界面。每一个聚集对象都可以有一个或一个以上的迭代 子对象，每一个迭代子的迭代状态可以是彼此独立的。迭代算法可以独立于聚集角色变化。

17、MEDIATOR—四个MM打麻将，相互之间谁应该给谁多少钱算不清楚了，幸亏当时我在旁边，按照各自的筹码数算钱，赚了钱的从我这里拿，赔了钱的也付给我，一切就OK啦，俺得到了四个MM的电话。

调停者模式：调停者模式包装了一系列对象相互作用的方式，使得这些对象不必相互明显作用。从而使他们可以松散偶合。当某些对象之间的作用发生改变时，不会 立即影响其他的一些对象之间的作用。保证这些作用可以彼此独立的变化。调停者模式将多对多的相互作用转化为一对多的相互作用。调停者模式将对象的行为和协 作抽象化，把对象在小尺度的行为上与其他对象的相互作用分开处理。

18、MEMENTO—同时跟几个MM聊天时，一定要记清楚刚才跟MM说了些什么话，不然MM发现了会不高兴的哦，幸亏我有个备忘录，刚才与哪个MM说了什么话我都拷贝一份放到备忘录里面保存，这样可以随时察看以前的记录啦。

备忘录模式：备忘录对象是一个用来存储另外一个对象内部状态的快照的对象。备忘录模式的用意是在不破坏封装的条件下，将一个对象的状态捉住，并外部化，存储起来，从而可以在将来合适的时候把这个对象还原到存储起来的状态。

19、OBSERVER—想知道咱们公司最新MM情报吗？加入公司的MM情报邮件组就行了，tom负责搜集情报，他发现的新情报不用一个一个通知我们，直接发布给邮件组，我们作为订阅者（观察者）就可以及时收到情报啦

观察者模式：观察者模式定义了一种一队多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态上发生变化时，会通知所有观察者对象，使他们能够自动更新自己。

20、STATE—跟MM交往时，一定要注意她的状态哦，在不同的状态时她的行为会有不同，比如你约她今天晚上去看电影，对你没兴趣的MM就会说“有事情 啦”，对你不讨厌但还没喜欢上的MM就会说“好啊，不过可以带上我同事么？”，已经喜欢上你的MM就会说“几点钟？看完电影再去泡吧怎么样？”，当然你看 电影过程中表现良好的话，也可以把MM的状态从不讨厌不喜欢变成喜欢哦。

状态模式：状态模式允许一个对象在其内部状态改变的时候改变行为。这个对象看上去象是改变了它的类一样。状态模式把所研究的对象的行为包装在不同的状态对 象里，每一个状态对象都属于一个抽象状态类的一个子类。状态模式的意图是让一个对象在其内部状态改变的时候，其行为也随之改变。状态模式需要对每一个系统 可能取得的状态创立一个状态类的子类。当系统的状态变化时，系统便改变所选的子类。

21、STRATEGY—跟不同类型的MM约会，要用不同的策略，有的请电影比较好，有的则去吃小吃效果不错，有的去海边浪漫最合适，单目的都是为了得到MM的芳心，我的追MM锦囊中有好多Strategy哦。

策略模式：策略模式针对一组算法，将每一个算法封装到具有共同接口的独立的类中，从而使得它们可以相互替换。策略模式使得算法可以在不影响到客户端的情况 下发生变化。策略模式把行为和环境分开。环境类负责维持和查询行为类，各种算法在具体的策略类中提供。由于算法和环境独立开来，算法的增减，修改都不会影 响到环境和客户端。

22、TEMPLATE METHOD——看过《如何说服女生上床》这部经典文章吗？女生从认识到上床的不变的步骤分为巧遇、打破僵局、展开追求、接吻、前戏、动手、爱抚、进去八 大步骤(Template method)，但每个步骤针对不同的情况，都有不一样的做法，这就要看你随机应变啦(具体实现)；

模板方法模式：模板方法模式准备一个抽象类，将部分逻辑以具体方法以及具体构造子的形式实现，然后声明一些抽象方法来迫使子类实现剩余的逻辑。不同的子类 可以以不同的方式实现这些抽象方法，从而对剩余的逻辑有不同的实现。先制定一个顶级逻辑框架，而将逻辑的细节留给具体的子类去实现。

23、VISITOR—情人节到了，要给每个MM送一束鲜花和一张卡片，可是每个MM送的花都要针对她个人的特点，每张卡片也要根据个人的特点来挑，我一 个人哪搞得清楚，还是找花店老板和礼品店老板做一下Visitor，让花店老板根据MM的特点选一束花，让礼品店老板也根据每个人特点选一张卡，这样就轻 松多了；

访问者模式：访问者模式的目的是封装一些施加于某种数据结构元素之上的操作。一旦这些操作需要修改的话，接受这个操作的数据结构可以保持不变。访问者模式 适用于数据结构相对未定的系统，它把数据结构和作用于结构上的操作之间的耦合解脱开，使得操作集合可以相对自由的演化。访问者模式使得增加新的操作变的很 容易，就是增加一个新的访问者类。访问者模式将有关的行为集中到一个访问者对象中，而不是分散到一个个的节点类中。当使用访问者模式时，要将尽可能多的对 象浏览逻辑放在访问者类中，而不是放到它的子类中。访问者模式可以跨过几个类的等级结构访问属于不同的等级结构的成员类。

CSS方法解决IE6最小高度，IE6最小宽度，IE6最大高度，IE6最大宽度，
兼容IE6/' target='_blank'>兼容IE6/IE7/IE8/火狐
====================
IE6最小高度
.min_height{
  min-height:200px;
  _height:expression(this.scrollHeight < 200 ? "200px" : "auto");
}
--------------------------------
IE6最大高度
.max_height{
  max-height:400px;
  _height:expression(this.scrollHeight > 400 ? "400px" : "auto");
}
--------------------------------
IE6最小宽度
max-width: 600px;
 _width:expression(document.body.clientWidth > 600 ? "600px" : "auto");
 /*_width:expression(document.body.clientWidth < 300 ? "300px" : "auto"); 这是min-width */
--------------------------------
IE6最大最小宽度
.min_and_max_width{
  min-width:300px;
  max-width:600px;
  _width: expression(
    document.body.clientWidth < 300 ? "300px" :
       ( document.body.clientWidth > 600 ? "600px" : "auto")
  );
}
--------------------------------
IE6最大最小高度
.min_and_max_height{
  min-height:200px;
  max-height:400px;
  _height: expression(
    this.scrollHeight < 200 ? "200px" :
      ( this.scrollHeight > 400 ? "400px" : "auto")
  );
}

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML+CSS水平居中其实很简</title>
    <style>
    body,p{ 
    padding:0px; 
    margin:0px; 
    padding-top:20px; 
    font-size:10pt; 
    font-family:"宋体"; 
    } 
    .demo{ 
        width:800px; 
        height:400px; 
        margin:0 auto;/*CSS才是水平居中全靠他了*/ 
        border: 1px solid #999999; 
    } 
    p{ 
    width:90%; 
    height:auto; 
    margin:20px 0px 0px 20px;} 
    
    </style>
    </head>
    
    <body>
    <div class="demo">
        <p>哈哈DIV水平居中了哦</p>
        <p>margin:0 auto;/*CSS才是水平居中全靠他了*/  你可以测试兼容目前的各种主流浏览器，如有不兼容现象欢迎留言讨论</p>
        <p>CSS body,p{}是为了清理页面边距和各种浏览器的差异</p>
        <p>当然，所谓HTML+CSS就是说所有的html标签都是可以使用的，不一定要是DIV。</p>
    </div>
    </body>
    </html>

1)cookie和session的作用以及他们的应用场合
两者都是记录用户访问网站信息，但他们的保持状态不同，cookie是采用客户端保持，而session是采用服务端保持，一般来说cookie不是很安 全，因为别人可以分析本地的cookie进行cookie欺骗，考虑到安全的问题应该使用session，session是保持在服务端，但当访问增多 时，会增加服务器的压力。
在应用场合中，建议建用户登录，交易重要信息存放session，其他信息可以存放在cookie中，根据实际需求两者可以交替搭配使用。

2)怎样让jvm加载一个Class的同时执行一段代码
使用Class.forName()动态加载类（题目中有"同时"，是否启用另一线程？）

3)post和get区别
从http动词协议来看，get是从服务器获取数据，post是向服务器上传数据
get方式会把数据出现在url中，post则不会
get提交的数据有大小限制，post则无

4)事务的属性有哪些？写出spring或jdbc管理事务的例子
有原子性，一致性，隔离性，持久性
spring提供了丰富的事务模型，主要是针对jdbc事务，jta事务，还有一些自定义事务（如果有人能从一张白纸写出spring transaction的例子，那真是佩服之极）
还是写一个简单jdbc事务
try{
class.forName("***");
...
conn=DriverManager.getConnection(url,user,password);
conn.createStartement().executeUpdate("****");//更新操作
conn.commit();//事务提交
}catch(Exception e){
..
conn.rollback();//事务回滚
..
}

5)实现一个高并发、高性能的hashmap。写出伪代码
什么叫做高性能，高并发的hashmap? 是要考hashmap的数据结构??

6)解析一段xml，拼接成一个url
xml,url???这两者有什么联系吗?

7)怎么解决并发？怎么解决集群环境下的并发?
（有很多点可以并发，web请求可以并发，数据库请求可以并发，怎么那么空泛）
高并发最重要的还是考虑到锁的问题，如数据库该用表锁用表锁，该用排他锁用排它锁，程序中要注意非线程安全的问题
高并发还有带来性能问题，缓存，负载均衡，这些看情况而定

8)java GC的原理.
又来，不回答你

9)mysql支持事务吗？mysql存储引擎有哪些？
支持，常用的是inndb和myisam

10)数据库数据查找比较慢的时候，如何解决？
假如是mysql
1.漏了索引,用explain看看查询语句是不是没使用索引或者索引使用有问题
2.使用show processlist看看是不是有sql卡住了
3.还有一种情况就是sql写得过于复杂，如goroupby，多表关联等等，使用desc来进行分析
4.还有就是配置的问题，如key_buffer等参数，这个看文档吧
5.最后一种就是机器负荷过高，调整结构来解决吧，比如使用mysql-proxy代理等等

11)学生 课程 选课的一个sql语句书写
??

12)查找日志文件中某一个信息出现的次数
cat 日志 | grep 信息 | wc -l

13) 32位linux操作系统中，最多支持多少个线程？
上网查了，写得很复杂，附上文章
http://www.517sou.net/Article/Linux-maximum-number-of-threads-and-the-maximum-number-of-processes.aspx

14)关于TreeMap操作的
TreeMap就是一颗平衡排序二叉树，操作的。。后面是什么??

15)重写类A的equals和hascode方法。类A有个属性private B b；
??

16)实现一个mysql的sequence
mysql的last_insert_id()大致可以满足，如果不行就写触发器吧

<!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">
<head>
<title>jQuery插件实现感应鼠标的图片遮罩动画效果丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
html, body, div,ul, li {
 margin: 0;
 padding: 0;
}
div.examples_body {
     width: 750px;
  margin: 0px auto;
  clear: both;
  overflow: hidden;
}
/* The main banner unordered list */
.bannerHolder {
 width: 726px;
 margin: 20px 0 15px 0;
 padding: 20px 10px 20px 10px;
 background-color: #f7f7f7;
 border: 1px solid #eee;
 overflow: hidden;
 /* CSS3 rounded corners */
 -moz-border-radius:12px;
 -webkit-border-radius:12px;
 border-radius:12px;
}
/* Hiding the bullets of the li elements: */
.bannerHolder li {
 list-style: none;
 display: inline;
}
/* The banner divs */
.banner {
 position: relative;
 width: 125px;
 height: 125px;
 overflow: hidden;
 float: left;
 display: inline;
 margin: 0 10px
}
/* The banner divs */
.banner img {
 display: block;
 border: none;
}
/* The dark animated divs */
.banner div {
 position: absolute;
 z-index: 100;
 background-color: #222;
 width: 60px;
 height: 60px;
 cursor: pointer;
 /* Setting a really big value for border-radius
 will make the divs perfect circles */
 -moz-border-radius:100px;
 -webkit-border-radius:100px;
 border-radius:100px;
}
/* Positioning the animated divs outside the
corners of the visible banner area: */
.banner .cornerTL {
 left:-63px;
 top:-63px;
}
.banner .cornerTR {
 right:-63px;
 top:-63px;
}
.banner .cornerBL {
 left:-63px;
 bottom:-63px;
}
.banner .cornerBR {
 right:-63px;
 bottom:-63px;
}
/* The "Visit Company" text */
.banner p {
 display: none; /* hidden by default */
 left: 0;
 top: 57px;
 width: 100%;
 z-index: 200;
 position: absolute;
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 color: #FFF;
 font-size: 11px;
 text-align: center;
 cursor: pointer;
}
</style>
<script type="text/javascript" src="http://www.blogjava.net/images/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Lowering the opacity of all slide in divs
$('.banner div').css('opacity',0.4);
// Using the hover method
$('.banner').hover(function(){
  // Executed on mouseenter
  var el = $(this);
  // Find all the divs inside the banner div,
  // and animate them with the new size
  el.find('div').stop().animate({width:200,height:200},'slow',function(){
   // Show the "Visit Company" text:
   el.find('p').fadeIn('fast');
  });
},function(){
  // Executed on moseleave
  var el = $(this);
  // Hiding the text
  el.find('p').stop(true,true).hide();
  // Animating the divs
  el.find('div').stop().animate({width:60,height:60},'fast');
}).click(function(){
  // When clicked, open a tab with the address of the hyperlink
  window.open($(this).find('a').attr('href'));
});
});
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div class="examples_body">
 <ul class="bannerHolder">
  <li>
   <div class="banner">
    <a href="http://www.csrcode.cn" target="_blank"><img height="125" width="125" alt="红叶传情" src="http://www.blogjava.net/images/m01.jpg"></a>
    <p class="companyInfo">红叶传情</p>
    <div class="cornerTL"></div>
    <div class="cornerTR"></div>
    <div class="cornerBL"></div>
    <div class="cornerBR"></div>
   </div>
  </li>
  <li>
   <div class="banner">
    <a href="http://www.33567.cn" target="_blank"><img height="125" width="125" alt="野花绽放" src="http://www.blogjava.net/images/m02.jpg"></a>
    <p class="companyInfo">野花绽放</p>
    <div class="cornerTL"></div>
    <div class="cornerTR"></div>
    <div class="cornerBL"></div>
    <div class="cornerBR"></div>
   </div>
  </li>
  <li>
   <div class="banner">
    <a href="http://www.7caidy.com" target="_blank"><img height="125" width="125" alt="往事如茶" src="http://www.blogjava.net/images/m03.jpg"></a>
    <p class="companyInfo">往事如茶</p>
    <div class="cornerTL"></div>
    <div class="cornerTR"></div>
    <div class="cornerBL"></div>
    <div class="cornerBR"></div>
   </div>
  </li>
  <li>
   <div class="banner">
    <a href="http://ww.33567.cn" target="_blank"><img height="125" width="125" alt="油菜花开" src="http://www.blogjava.net/images/m04.jpg"></a>
    <p class="companyInfo">油菜花开</p>
    <div class="cornerTL"></div>
    <div class="cornerTR"></div>
    <div class="cornerBL"></div>
    <div class="cornerBR"></div>
   </div>
  </li>
  <li>
   <div class="banner">
    <a href="http://changshi.csrcode.cn" target="_blank"><img height="125" width="125" alt="玫瑰情思" src="http://www.blogjava.net/images/m05.jpg"></a>
    <p class="companyInfo">玫瑰情思</p>
    <div class="cornerTL"></div>
    <div class="cornerTR"></div>
    <div class="cornerBL"></div>
    <div class="cornerBR"></div>
   </div>
  </li>
 </ul>
</div>
</body>
</html>

<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：中国站长天空</font></p>

http://www.51xuediannao.com/JS/texiao/up_gundong.html

http://www.csrcode.cn/html/txdm/txtx/3078.htm

http://www.yesky.com/imagesnew/software/jscript/index.html

jquery网页特效

<!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">
<head>
<title>嵌套DIV层的css定位实现丨芯晴网页特效丨CsrCode.Cn</title>
<style>
#box1 {
 position: absolute;
 top: 100px;
 left: 100px;
 width: 400px;
 height: 300px;
 background-color: #B0C4DE;
 border: 2px solid #34537D
}
#box2 {
 position: absolute;
 bottom: 2em;
 right: 2em;
 width: 150px;
 background-color: #FFFAFA;
 border: 2px solid #CD5C5C;
}
</style>
</head>
<body>
<div id="box1">This is box one. It is positioned 100 pixels from the top and 100 pixels from the left of the viewport
 <div id="box2">This is box two. It is positioned 2 em from the bottom and 2 em from the right of the parent element - box1</div>
</div>
</body>
</html>

 <p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p><hr>

http://www.w3school.com.cn/example/jseg_examples.asp

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery插件实现鼠标滑过表格行变色效果丨芯晴网页特效丨CsrCode.Cn</title>
<script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
<!--将jQuery引用进来-->
<script type="text/javascript">
$(document).ready(function(){  //这个就是传说的ready
        $(".stripe tr").mouseover(function(){ 
                //如果鼠标移到class为stripe的表格的tr上时，执行函数
        $(this).addClass("over");})

        $(".stripe tr").mouseout(function(){  //给这行添加class值为over，并且当鼠标一出该行时执行函数
        $(this).removeClass("over");})  //移除该行的class
     
});
</script>
<style>
th {
        background:#0066FF;
        color:#FFFFFF;
        line-height:20px;
        height:30px;
}
 
td {
        padding:6px 11px;
        border-bottom:1px solid #95bce2;
        vertical-align:top;
        text-align:center;
}
 
td * {
        padding:6px 11px;
}
 
tr.alt td {
        background:#ecf6fc;  /*这行将给所有的tr加上背景色*/
}
 
tr.over td {
        background:#bcd4ec;  /*这个将是鼠标高亮行的背景色*/
}
 
</style>
</head>
 
<body>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>QQ</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>加拿大</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>俄罗斯</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>意大利</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>新加坡</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
</tbody>
</table>
</body>
</html>

<font color=red> <br><br>请先刷新本页 预览显示效果<br><hr><p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>

2.1.3   先模仿后进步

前面所讲的这种查看源文件的方法，正是提供了一种模仿的途径，我们可以在碰到认为效果不错的网页时，查看源文件，分析其中CSS的使用，从而提高自己的水平。不过，不能抄袭别人的样式表，毕竟那是辛勤的劳动成果，我们所要做的就是从中学到知识。

由于国外CSS技术应用比较成熟，有必要在学习的过程中以分析模仿国外优秀网站为主，同时还可
以提高自己的英文水平。下面列出了一些比较好的学习钻研CSS技术的站点。

http://www.w3.org/Style/CSS/ 这是CSS的老家，CSS的官方站点，是从出版信息到具体技术非常全面的英文站点。

http://www.csszengarden.com/ 经典的CSS Zen Garden网站。Zen在日语里就是禅的意思，我们姑且称这个网站为CSS禅意花园吧。网站主要目的就是为了探索CSS所能做到的各种视觉效果，具有探索性质，适合英文阅读能力强，对CSS有兴趣，且有一定基础的读者，是英文站点。

http://www.cssbeauty.com/ 美丽的CSS。该网站列出了一些使用CSS比较出色的站点，配合它们的首页图片。类似的网站还有http://www.cssartillery.com/。

www.blueidea.com 蓝色理想。这是一个中文的设计类网站，在它的前台栏目和论坛中有一些CSS的文章、求助的帖子等。同时，它还有很多其他关于设计、编程的栏目和文章。

学习CSS主要还是通过看书、实际编写来进行，在有了一定基础后，要多浏览应用得好的网站，从中可以学习到更多的东西。

一、先来看一个简单的例子：
        下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。 
        
        frame.html 由上(top.html)下(bottom.html)两个页面组成，代码如下：

 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
 2<HTML> 
 3<HEAD> 
 4<TITLE> frame </TITLE> 
 5</HEAD> 
 6<frameset rows="50%,50%"> 
 7   <frame name=top src="top.html"> 
 8   <frame name=bottom src="bottom.html"> 
 9</frameset> 
10</HTML> 

     
        现在假设top.html (即上面的页面) 有七个button来实现对bottom.html (即下面的页面) 的刷新，可以用以下七种语句，哪个好用自己看着办了。      

 1top.html 页面的代码如下： 
 2
 3<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
 4<HTML> 
 5<HEAD> 
 6<TITLE> top.html </TITLE> 
 7</HEAD> 
 8<BODY> 
 9  <input type=button value="刷新1" onclick="window.parent.frames[1].location.reload()"><br> 
10  <input type=button value="刷新2" onclick="window.parent.frames.bottom.location.reload()"><br> 
11  <input type=button value="刷新3" onclick="window.parent.frames['bottom'].location.reload()"><br>  
12  <input type=button value="刷新4" onclick="window.parent.frames.item(1).location.reload()"><br> 
13  <input type=button value="刷新5" onclick="window.parent.frames.item('bottom').location.reload()"><br> 
14  <input type=button value="刷新6" onclick="window.parent.bottom.location.reload()"><br> 
15  <input type=button value="刷新7" onclick="window.parent['bottom'].location.reload()"><br> 
16</BODY> 
17</HTML> 
18

          
           下面是bottom.html页面源代码，为了证明下方页面的确被刷新了，在装载完页面弹出一个对话框。  

 1
 2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
 3<HTML> 
 4<HEAD> 
 5<TITLE> bottom.html </TITLE> 
 6</HEAD> 
 7<BODY onload="alert('我被加载了！')"> 
 8   <h1>This is the content in bottom.html.</h1> 
 9</BODY> 
10</HTML> 

              解释一下：

1.window指代的是当前页面，例如对于此例它指的是top.html页面。 
2.parent指的是当前页面的父页面，也就是包含它的框架页面。例如对于此例它指的是framedemo.html。 
3.frames是window对象，是一个数组。代表着该框架内所有子页面。 
4.item是方法。返回数组里面的元素。 
5.如果子页面也是个框架页面，里面还是其它的子页面，那么上面的有些方法可能不行。 

附： 

Javascript刷新页面的几种方法： 
1 history.go(0) 
2 location.reload() 
3 location=location 
4 location.assign(location) 
5 document.execCommand('Refresh') 
6 window.navigate(location) 
7 location.replace(location) 
8 document.URL=location.href 

二、自动刷新页面
        1.页面自动刷新：把如下代码加入<head>区域中       

<meta http-equiv="refresh" content="20"> 
其中20指每隔20秒刷新一次页面. 

       2.页面自动跳转：把如下代码加入<head>区域中

<meta http-equiv="refresh" content="20;url=http://xcp.blogjava.net"> 
其中20指隔20秒后跳转到http://xcp.blogjava.net页面 

      3.页面自动刷新js版

<script language="JavaScript"> 
    function myrefresh() 
    { 
           window.location.reload(); 
    } 
    setTimeout('myrefresh()',1000); //指定1秒刷新一次 
</script> 

三、java在写Servler,Action等程序时，要操作返回页面的话（如谈出了窗口，操作完成以后，关闭当前页面，刷新父页面）

1        PrintWriter out = response.getWriter();
2        out.write("<script  type=\"text/javascript\">");
3         ////子窗口刷新父窗口 
4         out.write("self.opener.location.reload();"); 
5         //关闭窗口
6         out.write("window.opener=null;");
7         out.write("window.close();");
8         out.write("</script>");

四、JS刷新框架的脚本语句
        1.如何刷新包含该框架的页面用

<script language=JavaScript> 
  parent.location.reload(); 
</script> 

      
       2.子窗口刷新父窗口

<script language=JavaScript> 
    self.opener.location.reload(); 
</script> 

     
       3.如何刷新另一个框架的页面用 （上面的实例以说明了）

语句1. window.parent.frames[1].location.reload(); 
语句2. window.parent.frames.bottom.location.reload(); 
语句3. window.parent.frames["bottom"].location.reload(); 
语句4. window.parent.frames.item(1).location.reload(); 
语句5. window.parent.frames.item('bottom').location.reload(); 
语句6. window.parent.bottom.location.reload(); 
语句7. window.parent['bottom'].location.reload(); 

    
       4.如果想关闭窗口时刷新或者想开窗时刷新的话，在<body>中调用以下语句即可。 

<body onload="opener.location.reload()"> 开窗时刷新 
<body onUnload="opener.location.reload()"> 关闭时刷新 
<script language="javascript"> 
    window.opener.document.location.reload() 
</script>