在做项目的时候,有一堆的问题需要解决,因为我做的是前台页面,所以用的技术活也不算多。但做的时候麻烦事倒是不少,比如div的大小和div的位置和div的放置。
下拉按钮,评价和浮动div的用法等等。
浮动div还可以做进入网页后的登陆等等,比如QQ兑奖等。
下拉按钮:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>下拉菜单示例 - 阿里西西</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gbk">
<META content="下拉菜单示例" name=keywords>
<META content="经典论坛" name=description>
<META content="MSHTML 6.00.3790.630" name=GENERATOR>
<META content=TRUE name=MSSmartTagsPreventParsing>
<META http-equiv=MSThemeCompatible content=Yes>
<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>
<SCRIPT>
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>
<CENTER>
<div class="right"> <a href="#"><img src="http://bbs.blueidea.com/images/blue/reply.gif" border="0" alt="" /></a></div>
<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>
<div class="popupmenu_popup newspecialmenu" id="newspecialheader_menu" style="display: none">
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td class="popupmenu_option"><div class="newspecial"><a href="#">投票</a></div></td></tr>
<tr><td class="popupmenu_option"><div class="newspecial"><a href="#">交易</a></div></td></tr>
<tr><td class="popupmenu_option"><div class="newspecial"><a href="#">悬赏</a></div></td></tr>
<tr><td class="popupmenu_option"><div class="newspecial"><a href="#">活动</a></div></td></tr>
</table></div>
</td></tr></table></div>
</CENTER>
</BODY>
</HTML>
浮动div的用法只是前台:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
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>
<form id="form1" runat="server">
<div style="height: 287px;background-color:red" ></div>
<div id="mydiv" style="width: 447px; height: 202px; position:absolute; left:200px; top:0px; border-color:Black; background-color:Aqua; display:block">
</div>
<input id="Button1" type="button" value="button" οnclick="showdiv();" />
</form>
</body>
</html>
评价:
可以用在第一个页面做一个评价按钮和一个页面连接版,用连接版连接第三个页面,再在第二个页面做成评价版,在第二个页面填完评价信息点确定,把信息传到数据库,再在第三个页面把数据显示出来,再传到第一个页面上。