10.31

来源：互联网发布：hadoop源码编译编辑：程序博客网时间：2024/06/15 23:08

在做项目的时候，有一堆的问题需要解决，因为我做的是前台页面，所以用的技术活也不算多。但做的时候麻烦事倒是不少，比如div的大小和div的位置和div的放置。

下拉按钮，评价和浮动div的用法等等。

浮动div还可以做进入网页后的登陆等等，比如QQ兑奖等。

下拉按钮：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>下拉菜单示例 - 阿里西西</TITLE>

<style>

BODY {

MARGIN: 0px; COLOR: #000000; BACKGROUND-COLOR: #ffffff

}

BODY {

FONT: 12px Tahoma, Verdana

}

TABLE {

FONT: 12px Tahoma, Verdana

}

INPUT {

FONT: 12px Tahoma, Verdana

}

SELECT {

FONT: 12px Tahoma, Verdana

}

TEXTAREA {

FONT: 12px Tahoma, Verdana

}

.maintable {

FONT: 12px Tahoma, Verdana

}

.button {

FONT: 12px Tahoma, Verdana

}

.altbg1 {

FONT: 12px Tahoma, Verdana

}

.altbg2 {

FONT: 12px Tahoma, Verdana

}

.smalltxt {

FONT: 11px Tahoma, Verdana

}

.category {

FONT: 11px Tahoma, Verdana

}

.percenttxt {

FONT: 11px Tahoma, Verdana

}

.lighttxt {

COLOR: #666666

}

A {

COLOR: #000080; TEXT-DECORATION: none

}

A:hover {

TEXT-DECORATION: underline

}

TABLE {

COLOR: #000000; BORDER-COLLAPSE: collapse; empty-cells: show

}

INPUT {

FONT-WEIGHT: normal; COLOR: #000000

}

SELECT {

FONT-WEIGHT: normal; COLOR: #000000

}

TEXTAREA {

FONT-WEIGHT: normal; COLOR: #000000

}

INPUT {

HEIGHT: 21px

}

FORM {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px

}

LEGEND {

COLOR: #000000

}

.checkbox {

BORDER-RIGHT: 0px; BORDER-TOP: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; VERTICAL-ALIGN: middle; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; HEIGHT: 16px

}

.radio {

BORDER-RIGHT: 0px; BORDER-TOP: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; VERTICAL-ALIGN: middle; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; HEIGHT: 16px

}

.maintable {

WIDTH: 100%

}

.subtable {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0px; TEXT-ALIGN: left

}

.simpletable {

CLEAR: both; BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: #666688 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #ffffff

}

.simpletable .header {

PADDING-BOTTOM: 0px; PADDING-TOP: 7px; HEIGHT: 30px; BACKGROUND-COLOR: #ccccd4

}

.simpletable DIV {

PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px

}

.nav {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 7px; COLOR: #000000; LINE-HEIGHT: normal; PADDING-TOP: 7px; FONT-STYLE: normal; FONT-FAMILY: Tahoma,Verdana; BACKGROUND-COLOR: #ccccd4; FONT-VARIANT: normal; font-size-adjust: none; font-stretch: normal

}

.nav A {

}

.subtable .right {

PADDING-RIGHT: 13px; LINE-HEIGHT: 25px

}

.absmiddle {

VERTICAL-ALIGN: middle

}

.msgbody {

OVERFLOW: hidden; WIDTH: 100%

}

.msgheader {

BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND: #dddde4; PADDING-BOTTOM: 5px; MARGIN: 0px 1em; BORDER-LEFT: #666688 1px solid; COLOR: #000000; PADDING-TOP: 5px; BORDER-BOTTOM: #666688 1px solid

}

.msgborder {

BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: 0px; PADDING-LEFT: 10px; FONT-SIZE: 12px; BACKGROUND: #fdfff2; PADDING-BOTTOM: 10px; MARGIN: 0px 1em; OVERFLOW: hidden; BORDER-LEFT: #666688 1px solid; WIDTH: 100%; PADDING-TOP: 10px; BORDER-BOTTOM: #666688 1px solid; FONT-FAMILY: "Courier New"; WORD-WRAP: break-word

}

.tableborder {

BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; BACKGROUND: white; BORDER-LEFT: #666688 1px solid; BORDER-BOTTOM: #666688 1px solid; outline: 1px solid #666688

}

.spaceborder {

CLEAR: both; BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: #666688 1px solid; WIDTH: 100%; PADDING-TOP: 0px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #ffffff

}

.singleborder {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 1px; PADDING-TOP: 0px; BACKGROUND-COLOR: #f2f3f7

}

.button {

}

.lightbutton {

}

.submitbutton {

MARGIN-TOP: 6px; MARGIN-BOTTOM: 5px; TEXT-ALIGN: center

}

.postsubmit {

BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #666688 1px solid; MARGIN-TOP: 6px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666688 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #dddde4; TEXT-ALIGN: center

}

.bold {

FONT-WEIGHT: bold

}

.header {

PADDING-LEFT: 10px; FONT-WEIGHT: bold; COLOR: #000000; HEIGHT: 30px; BACKGROUND-COLOR: #ccccd4

}

.header TD {

PADDING-LEFT: 10px

}

.header A {

COLOR: #000000

}

.header INPUT {

BACKGROUND: none transparent scroll repeat 0% 0%; VERTICAL-ALIGN: middle; HEIGHT: 16px

}

.category {

FONT-WEIGHT: bold; COLOR: #000000; BACKGROUND-COLOR: #dddde4

}

.category TD {

BORDER-BOTTOM: #666688 1px solid

}

.altbg1 {

BACKGROUND: #f2f3f7

}

TD.altbg1 {

BORDER-BOTTOM: #666688 1px solid

}

.altbg2 {

BACKGROUND: #ffffff

}

TD.altbg2 {

BORDER-BOTTOM: #666688 1px solid

}

.row {

BORDER-RIGHT: medium none; BORDER-TOP: medium none; BACKGROUND: #ffffff; BORDER-LEFT: medium none; WIDTH: 100%; BORDER-BOTTOM: medium none; empty-cells: show

}

.row TD {

PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; BORDER-BOTTOM: #666688 1px solid

}

.row1 {

BORDER-RIGHT: medium none; BORDER-TOP: medium none; BACKGROUND: #f2f3f7; BORDER-LEFT: medium none; WIDTH: 100%; BORDER-BOTTOM: medium none; empty-cells: show

}

.row1 TD {

PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; BORDER-BOTTOM: #666688 1px solid

}

.bottom {

BORDER-BOTTOM: 0px

}

.bottom TD {

BORDER-BOTTOM: 0px

}

TD.bottom {

BORDER-BOTTOM: 0px

}

.spacebottom {

BACKGROUND: #ffffff; PADDING-BOTTOM: 0px; BORDER-BOTTOM: 0px

}

.tdunderline TD {

BORDER-TOP: #666688 1px solid; BORDER-BOTTOM: #666688 1px solid

}

.option {

BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #666688 1px solid; WIDTH: 98%; PADDING-TOP: 1px; BORDER-BOTTOM: #666688 1px solid; HEIGHT: 35px; BACKGROUND-COLOR: #f2f3f7

}

.avatar {

BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #666688 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #dddde4

}

.avatar IMG {

BACKGROUND: #ffffff

}

.left {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-ALIGN: left

}

.right {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-ALIGN: right

}

.line {

BORDER-TOP: #666688 1px solid

}

.percent {

BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; BORDER-LEFT: #666688 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #666688 1px solid; HEIGHT: 12px

}

.percent DIV {

PADDING-RIGHT: 0px; BACKGROUND-POSITION: 0px 50%; PADDING-LEFT: 0px; FONT-SIZE: 0px; PADDING-BOTTOM: 0px; MARGIN: 1px; WIDTH: 100%; LINE-HEIGHT: 0px; PADDING-TOP: 0px; BACKGROUND-REPEAT: repeat-x; HEIGHT: 8px; BACKGROUND-COLOR: #ccccd4

}

.percenttxt {

FONT-WEIGHT: bold; FLOAT: left; PADDING-TOP: 1px

}

.percenttxt U {

FONT-WEIGHT: normal; COLOR: #666666; TEXT-DECORATION: none

}

.mainborder {

CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 0px; PADDING-TOP: 0px; HEIGHT: 8px; BACKGROUND-COLOR: #666688

}

.wysiwyg {

BORDER-RIGHT: #dddddd 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #dddddd 1px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; FONT: 14px Tahoma, Verdana; BORDER-LEFT: #dddddd 1px solid; COLOR: #000000; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #dddddd 1px solid

}

.wysiwyg A {

COLOR: #000080; TEXT-DECORATION: underline

}

.autosave {

BEHAVIOR: url(#default#userdata)

}

#seccode {

MARGIN-BOTTOM: 2px; CURSOR: pointer

}

.logo {

BACKGROUND-COLOR: #ffffff

}

.logo DIV.right {

}

.mainheader {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 5px; COLOR: #fff; PADDING-TOP: 5px

}

.mainheader A {

COLOR: #fff

}

.headermenu_popup {

BORDER-RIGHT: #666688 1px solid; BORDER-TOP: 0px; MARGIN-TOP: 8px! important; BORDER-LEFT: #666688 1px solid; COLOR: #ffffff; BORDER-BOTTOM: #666688 1px solid

}

.headermenu_popup A {

COLOR: #ffffff; TEXT-DECORATION: none

}

.menu {

MARGIN-TOP: 6px; COLOR: #ffffff; HEIGHT: 30px; BACKGROUND-COLOR: #666688

}

.menu DIV {

TEXT-ALIGN: right

}

.menu DIV {

COLOR: #ffffff; PADDING-TOP: 6px

}

.menu A {

COLOR: #ffffff; PADDING-TOP: 6px

}

.menu DIV A {

COLOR: #ffffff; PADDING-TOP: 6px

}

.menu DIV SPAN {

HEIGHT: 5px

}

.footerline {

BORDER-BOTTOM: #666688 1px solid; HEIGHT: 6px

}

.footerline DIV {

RIGHT: 40px; FLOAT: right; POSITION: relative; TOP: 2px; BACKGROUND-COLOR: #ffffff

}

.p_bar {

CLEAR: both; MARGIN: 1px 0px

}

.p_bar A {

PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; TEXT-DECORATION: none

}

.p_input {

BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND: #ffffff; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; WIDTH: 40px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; HEIGHT: 17px

}

.p_total {

BORDER-RIGHT: #666688 0px solid; BORDER-TOP: #666688 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #666688 1px solid; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #f2f3f7

}

.p_pages {

BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; FONT-WEIGHT: bold; VERTICAL-ALIGN: middle; BORDER-LEFT: #666688 1px solid; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #f2f3f7

}

.p_num {

BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; VERTICAL-ALIGN: middle; BORDER-LEFT: #666688 1px solid; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #ffffff

}

A.p_num:hover {

BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; BORDER-LEFT: #666688 1px solid; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #f2f3f7; TEXT-DECORATION: none

}

.p_redirect {

BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; FONT-SIZE: 13px; BORDER-LEFT: #666688 1px solid; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #ffffff

}

A.p_redirect:hover {

BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; BORDER-LEFT: #666688 1px solid; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #f2f3f7; TEXT-DECORATION: none

}

.p_curpage {

BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; FONT-WEIGHT: bold; VERTICAL-ALIGN: middle; BORDER-LEFT: #666688 1px solid; COLOR: #000000; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #dddde4

}

.popupmenu_popup {

BORDER-RIGHT: #666688 1px solid; BORDER-TOP: #666688 1px solid; BORDER-LEFT: #666688 1px solid; COLOR: #000000; BORDER-BOTTOM: #666688 1px solid

}

.popupmenu_option {

PADDING-RIGHT: 8px; PADDING-LEFT: 8px; BACKGROUND: #666688; PADDING-BOTTOM: 3px; COLOR: #ffffff; PADDING-TOP: 3px; WHITE-SPACE: nowrap

}

.popupmenu_option A {

PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 3px; COLOR: #ffffff; PADDING-TOP: 3px; TEXT-DECORATION: none

}

.popupmenu_highlight {

PADDING-RIGHT: 8px; PADDING-LEFT: 8px; BACKGROUND: #8c8ea3; PADDING-BOTTOM: 3px; CURSOR: pointer; COLOR: #ffffff; PADDING-TOP: 3px; WHITE-SPACE: nowrap

}

.popupmenu_highlight A {

PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 3px; COLOR: #ffffff; PADDING-TOP: 3px; TEXT-DECORATION: none

}

.calendar_expire {

COLOR: #999999

}

.calendar_expire A:link {

COLOR: #999999

}

.calendar_expire A:visited {

COLOR: #999999

}

.calendar_default {

COLOR: #000000

}

.calendar_default A:link {

COLOR: #000000

}

.calendar_default A:visited {

COLOR: #000000

}

.calendar_checked {

COLOR: #ff0000

}

.calendar_checked A:link {

COLOR: #ff0000

}

.calendar_checked A:visited {

COLOR: #ff0000

}

.calendar_today {

COLOR: #00bb00

}

.calendar_today A:link {

COLOR: #00bb00

}

.calendar_today A:visited {

COLOR: #00bb00

}

.calendar_header TD {

WIDTH: 30px; HEIGHT: 20px

}

#calendar_year {

DISPLAY: none; Z-INDEX: 10; BACKGROUND: #ffffff; LINE-HEIGHT: 130%; POSITION: absolute

}

#calendar_year .col {

BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 4px; BACKGROUND: #ffffff; FLOAT: left; PADDING-BOTTOM: 4px; MARGIN-LEFT: 1px; BORDER-LEFT: #666688 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #666688 1px solid

}

#calendar_month {

BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #666688 1px solid; DISPLAY: none; PADDING-LEFT: 4px; Z-INDEX: 11; BACKGROUND: #ffffff; PADDING-BOTTOM: 4px; BORDER-LEFT: #666688 1px solid; LINE-HEIGHT: 130%; PADDING-TOP: 4px; BORDER-BOTTOM: #666688 1px solid; POSITION: absolute

}

#announcement {

CLEAR: both; BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #666688 1px solid; DISPLAY: none; PADDING-LEFT: 1px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666688 1px solid; WIDTH: 98%; PADDING-TOP: 5px; BORDER-BOTTOM: #666688 1px solid; BACKGROUND-COLOR: #dddde4

}

.todayposts {

COLOR: #000080

}

.newspecial {

FONT-WEIGHT: bold; FONT-SIZE: 14px; TEXT-ALIGN: center

}

.newspecialmenu {

WIDTH: 88px

}

.f_folder {

TEXT-ALIGN: center

}

.f_icon {

TEXT-ALIGN: center

}

.f_title {

WORD-BREAK: break-all

}

.f_title SPAN {

COLOR: #666666

}

.subject A {

COLOR: #000000

}

.f_title A {

COLOR: #000000

}

.f_author {

BACKGROUND: #f2f3f7; TEXT-ALIGN: center

}

.f_views {

BACKGROUND: #f2f3f7; TEXT-ALIGN: center

}

.f_replies {

TEXT-ALIGN: center

}

.f_last {

BACKGROUND: #f2f3f7

}

.t_row {

MARGIN-TOP: -1px

}

.t_user {

PADDING-LEFT: 8px; BACKGROUND: #f2f3f7; WORD-BREAK: break-all

}

.t_msg {

TABLE-LAYOUT: fixed; BACKGROUND: #ffffff; OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 100%; WORD-WRAP: break-word

}

.t_msg P {

MARGIN: 0px

}

.t_msg TD {

PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px

}

.t_signature {

}

.t_number {

BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 2px; BACKGROUND: #f3f8d7; PADDING-BOTTOM: 2px; MARGIN: 1px; BORDER-LEFT: #666688 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #666688 1px solid

}

.t_infoline {

BACKGROUND: #f3f8d7

}

.t_table {

BORDER-TOP: #666688 1px solid; BORDER-LEFT: #666688 1px solid; border-spacing: 0px

}

.t_table TD {

BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; BORDER-BOTTOM: #666688 1px solid

}

.t_attach {

BORDER-RIGHT: #666688 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #666688 1px solid; PADDING-LEFT: 4px; BACKGROUND: #ffffff; PADDING-BOTTOM: 4px; BORDER-LEFT: #666688 1px solid; WIDTH: 350px; PADDING-TOP: 4px; BORDER-BOTTOM: #666688 1px solid

}

.t_attachlist {

PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; BORDER-BOTTOM: #666688 1px solid

}

.t_msgfont {

FONT-SIZE: 14px

}

.t_msgfont TABLE {

FONT-SIZE: 14px

}

.t_smallfont {

}

.t_smallfont TABLE {

}

.t_bigfont {

}

.t_bigfont TABLE {

}

.leftmenu BR {

LINE-HEIGHT: 5px

}

.leftmenu {

LINE-HEIGHT: 18px

}

</style>

var sPop = null;

var postSubmited = false;

var smdiv = new Array();

var userAgent = navigator.userAgent.toLowerCase();

var is_webtv = userAgent.indexOf('webtv') != -1;

var is_kon = userAgent.indexOf('konqueror') != -1;

var is_mac = userAgent.indexOf('mac') != -1;

var is_saf = userAgent.indexOf('applewebkit') != -1 || navigator.vendor == 'Apple Computer, Inc.';

var is_opera = userAgent.indexOf('opera') != -1 && opera.version();

var is_moz = (navigator.product == 'Gecko' && !is_saf) && userAgent.substr(userAgent.indexOf('firefox') + 8, 3);

var is_ns = userAgent.indexOf('compatible') == -1 && userAgent.indexOf('mozilla') != -1 && !is_opera && !is_webtv && !is_saf;

var is_ie = (userAgent.indexOf('msie') != -1 && !is_opera && !is_saf && !is_webtv) && userAgent.substr(userAgent.indexOf('msie') + 5, 3);

function findtags(parentobj, tag) {

if(!isUndefined(parentobj.getElementsByTagName)) {

return parentobj.getElementsByTagName(tag);

} else if(parentobj.all && parentobj.all.tags) {

return parentobj.all.tags(tag);

} else {

return null;

}

function smileyMenu(ctrl) {

ctrl.style.cursor = 'pointer';

if(ctrl.alt) {

ctrl.pop = ctrl.alt;

ctrl.alt = '';

}

if(ctrl.title) {

ctrl.lw = ctrl.title;

ctrl.title = '';

}

if(!smdiv[ctrl.id]) {

smdiv[ctrl.id] = document.createElement('div');

smdiv[ctrl.id].id = ctrl.id + '_menu';

smdiv[ctrl.id].style.display = 'none';

smdiv[ctrl.id].className = 'popupmenu_popup';

ctrl.parentNode.appendChild(smdiv[ctrl.id]);

}

smdiv[ctrl.id].innerHTML = '<table style="width: 60px;height: 60px;text-align: center;vertical-align: middle;" class="altbg2"><tr><td><img src="' + ctrl.src + '" border="0" width="' + ctrl.lw + '" /></td></tr></table>';

showMenu(ctrl.id, 0, 0, 1, 0);

}

function $(id) {

return document.getElementById(id);

}

function in_array(needle, haystack) {

if(typeof needle == 'string') {

for(var i in haystack) {

if(haystack[i] == needle) {

return true;

}

return false;

}

function trim(str) {

return (str + '').replace(/(\s+)$/g, '').replace(/^\s+/g, '');

}

function isUndefined(variable) {

return typeof variable == 'undefined' ? true : false;

}

function addbookmark(url, site){

if(is_ie) {

window.external.addFavorite(url, site);

} else {

alert('Please press "Ctrl+D" to add bookmark');

}

function doane(event) {

e = event ? event : window.event ;

if(is_ie) {

e.returnValue = false;

e.cancelBubble = true;

} else {

e.stopPropagation();

e.preventDefault();

}

var jsmenu = new Array();

jsmenu['active'] = new Array();

jsmenu['timer'] = new Array();

jsmenu['iframe'] = new Array();

function initCtrl(ctrlobj, click, duration, timeout, layer) {

if(ctrlobj && !ctrlobj.initialized) {

ctrlobj.initialized = true;

ctrlobj.unselectable = true;

ctrlobj.outfunc = typeof ctrlobj.onmouseout == 'function' ? ctrlobj.onmouseout : null;

ctrlobj.onmouseout = function() {

if(this.outfunc) this.outfunc();

if(duration < 3) jsmenu['timer'][ctrlobj.id] = setTimeout('hideMenu(' + layer + ')', timeout);

}

if(click && duration) {

ctrlobj.clickfunc = typeof ctrlobj.onclick == 'function' ? ctrlobj.onclick : null;

ctrlobj.onclick = function (e) {

doane(e);

if(jsmenu['active'][layer] == null || jsmenu['active'][layer].ctrlkey != this.id) {

if(this.clickfunc) this.clickfunc();

else showMenu(this.id, true);

} else {

hideMenu(layer);

}

ctrlobj.overfunc = typeof ctrlobj.onmouseover == 'function' ? ctrlobj.onmouseover : null;

ctrlobj.onmouseover = function(e) {

doane(e);

if(this.overfunc) this.overfunc();

if(click) {

clearTimeout(jsmenu['timer'][this.id]);

} else {

for(var id in jsmenu['timer']) {

if(jsmenu['timer'][id]) clearTimeout(jsmenu['timer'][id]);

}

function initMenu(ctrlid, menuobj, duration, timeout, layer) {

if(menuobj && !menuobj.initialized) {

menuobj.initialized = true;

menuobj.ctrlkey = ctrlid;

menuobj.onclick = ebygum;

menuobj.style.position = 'absolute';

if(duration < 3) {

if(duration > 1) {

menuobj.onmouseover = function() {

clearTimeout(jsmenu['timer'][ctrlid]);

}

if(duration != 1) {

menuobj.onmouseout = function() {

jsmenu['timer'][ctrlid] = setTimeout('hideMenu(' + layer + ')', timeout);

}

menuobj.style.zIndex = 50;

if(is_ie && !is_mac) {

menuobj.style.filter += "progid:DXImageTransform.Microsoft.shadow(direction=135,color=#CCCCCC,strength=2)";

}

initMenuContents(menuobj);

}

function initMenuContents(menuobj) {

if(menuobj.title == 'menu') {

//menuobj.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity=85,finishOpacity=100,style=0)";

//menuobj.style.opacity = 0.85;

menuobj.title = '';

} else {

var tds = findtags(menuobj, 'td');

for(var i = 0; i < tds.length; i++) {

if(tds[i].className == 'popupmenu_option' || tds[i].className == 'editor_colornormal') {

if(is_ie && !is_mac) {

//tds[i].style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity=85,finishOpacity=100,style=0)";

}

//tds[i].style.opacity = 0.85;

if(tds[i].title && tds[i].title == 'nohighlight') {

tds[i].title = '';

} else {

tds[i].ctrlkey = this.ctrlkey;

if(tds[i].className != 'editor_colornormal') {

tds[i].onmouseover = menuoption_onmouseover;

tds[i].onmouseout = menuoption_onmouseout;

}

if(typeof tds[i].onclick == 'function') {

tds[i].clickfunc = tds[i].onclick;

tds[i].onclick = menuoption_onclick_function;

} else {

tds[i].onclick = menuoption_onclick_link;

}

if(!is_saf && !is_kon) {

try {

links = findtags(tds[i], 'a');

for(var j = 0; j < links.length; j++) {

if(isUndefined(links[j].onclick)) {

links[j].onclick = ebygum;

}

catch(e) {}

}

function showMenu(ctrlid, click, offset, duration, timeout, layer, showid, maxh) {

var ctrlobj = $(ctrlid);

if(!ctrlobj) return;

if(isUndefined(click)) click = false;

if(isUndefined(offset)) offset = 0;

if(isUndefined(duration)) duration = 2;

if(isUndefined(timeout)) timeout = 500;

if(isUndefined(layer)) layer = 0;

if(isUndefined(showid)) showid = ctrlid;

var showobj = $(showid);

var menuobj = $(showid + '_menu');

if(!showobj|| !menuobj) return;

if(isUndefined(maxh)) maxh = 400;

hideMenu(layer);

for(var id in jsmenu['timer']) {

if(jsmenu['timer'][id]) clearTimeout(jsmenu['timer'][id]);

}

initCtrl(ctrlobj, click, duration, timeout, layer);

initMenu(ctrlid, menuobj, duration, timeout, layer);

menuobj.style.display = '';

if(!is_opera) {

menuobj.style.clip = 'rect(auto, auto, auto, auto)';

}

var showobj_pos = fetchOffset(showobj);

var showobj_x = showobj_pos['left'];

var showobj_y = showobj_pos['top'];

var showobj_w = showobj.offsetWidth;

var showobj_h = showobj.offsetHeight;

var menuobj_w = menuobj.offsetWidth;

var menuobj_h = menuobj.offsetHeight;

menuobj.style.left = (showobj_x + menuobj_w > document.body.clientWidth) && (showobj_x + showobj_w - menuobj_w >= 0) ? showobj_x + showobj_w - menuobj_w + 'px' : showobj_x + 'px';

menuobj.style.top = offset == 1 ? showobj_y + 'px' : (offset == 2 || ((showobj_y + showobj_h + menuobj_h > document.body.scrollTop + document.body.clientHeight) && (showobj_y - menuobj_h >= 0)) ? (showobj_y - menuobj_h) + 'px' : showobj_y + showobj_h + 'px');

if(menuobj.style.clip && !is_opera) {

menuobj.style.clip = 'rect(auto, auto, auto, auto)';

}

if(is_ie && is_ie < 7) {

if(!jsmenu['iframe'][layer]) {

var iframe = document.createElement('iframe');

iframe.style.display = 'none';

iframe.style.position = 'absolute';

//iframe.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';

$('jsmenu_parent') ? $('jsmenu_parent').appendChild(iframe) : menuobj.parentNode.appendChild(iframe);

jsmenu['iframe'][layer] = iframe;

}

jsmenu['iframe'][layer].style.top = menuobj.style.top;

jsmenu['iframe'][layer].style.left = menuobj.style.left;

jsmenu['iframe'][layer].style.width = menuobj_w;

jsmenu['iframe'][layer].style.height = menuobj_h;

jsmenu['iframe'][layer].style.display = 'block';

}

if(maxh && menuobj.scrollHeight > maxh) {

menuobj.style.height = maxh + 'px';

if(is_opera) {

menuobj.style.overflow = 'auto';

} else {

menuobj.style.overflowY = 'auto';

}

if(!duration) {

setTimeout('hideMenu(' + layer + ')', timeout);

}

jsmenu['active'][layer] = menuobj;

}

function hideMenu(layer) {

if(isUndefined(layer)) layer = 0;

if(jsmenu['active'][layer]) {

clearTimeout(jsmenu['timer'][jsmenu['active'][layer].ctrlkey]);

jsmenu['active'][layer].style.display = 'none';

if(is_ie && is_ie < 7 && jsmenu['iframe'][layer]) {

jsmenu['iframe'][layer].style.display = 'none';

}

jsmenu['active'][layer] = null;

}

function fetchOffset(obj) {

var left_offset = obj.offsetLeft;

var top_offset = obj.offsetTop;

while((obj = obj.offsetParent) != null) {

left_offset += obj.offsetLeft;

top_offset += obj.offsetTop;

}

return { 'left' : left_offset, 'top' : top_offset };

}

function ebygum(eventobj) {

if(!eventobj || is_ie) {

window.event.cancelBubble = true;

return window.event;

} else {

if(eventobj.target.type == 'submit') {

eventobj.target.form.submit();

}

eventobj.stopPropagation();

return eventobj;

}

function menuoption_onclick_function(e) {

this.clickfunc();

hideMenu();

}

function menuoption_onclick_link(e) {

choose(e, this);

}

function menuoption_onmouseover(e) {

this.className = 'popupmenu_highlight';

}

function menuoption_onmouseout(e) {

this.className = 'popupmenu_option';

}

function choose(e, obj) {

var links = findtags(obj, 'a');

if(links[0]) {

if(is_ie) {

links[0].click();

window.event.cancelBubble = true;

} else {

if(e.shiftKey) {

window.open(links[0].href);

e.stopPropagation();

e.preventDefault();

} else {

window.location = links[0].href;

e.stopPropagation();

e.preventDefault();

}

hideMenu();

}

</SCRIPT>

</HEAD>

<BODY>

<div id="newspecialheader" class="right" onMouseOver="showMenu(this.id)"><a

href="#"

><img src="tz3.bmp"></a><a href="###"><img src="http://bbs.blueidea.com/images/blue/newspecial.gif" border="0" alt="" /></a></div>

</table></div>

</td></tr></table></div>

</CENTER>

</BODY>

</HTML>

浮动div的用法只是前台：

function showdiv() {

var mydiv = document.getElementById('mydiv');

if (mydiv.style.display == "none") {

document.getElementById('mydiv').style.display = 'block';

}

else{

document.getElementById('mydiv').style.display = 'none';

}

</script>

</head>

<body>

</div>

</form>

</body>

</html>

评价：

可以用在第一个页面做一个评价按钮和一个页面连接版，用连接版连接第三个页面，再在第二个页面做成评价版，在第二个页面填完评价信息点确定，把信息传到数据库，再在第三个页面把数据显示出来，再传到第一个页面上。