page-centered.html
来自「Visual QuickMenu 6.5汉化版---JS导航栏特效生成器」· HTML 代码 · 共 257 行
HTML
257 行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>QuickMenu Template</title><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<!-- *** QuickMenu copyright (c) 2007, OpenCube Inc. All Rights Reserved.
-This document, the JavaScript source code, and core CSS may not be modified,
re-distributed, or displayed for public consumption.
-This product must be purchased before its official inclusion in any public or
private web site or application.
-This product may not be used in, or redistributed as part of an application whose
purpose is to enhance or create menu systems.
-->
<!--%%%%%%%%%%%% Quick Menu Script %%%%%%%%%%%*-->
<script type="text/JavaScript" src="qm.js"></script>
<!--%%%%%%%%%%%% QuickMenu Styles [Keep in head for full validation!] %%%%%%%%%%%-->
<style type="text/css">
/*!!!!!!!!!!! QuickMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;}.qmmc {position:relative;}.qmmc a {float:left;display:block;white-space:nowrap;}.qmmc div a {float:none;}.qmmc div {visibility:hidden;position:absolute;}
/*!!!!!!!!!!! QuickMenu Styles [Please Modify!] !!!!!!!!!!!*/
/* Remove the comments bleow for vertical mains and change the false value to
true in the qm_create function after the menus structure. */
/*.qmmc a {float:none}*/
/*"""""""" (MAIN) Container """"""""*/
#qm0
{
background-color:transparent;
}
/*"""""""" (MAIN) Items """"""""*/
#qm0 a
{
color:#000000;
background-color:#ffffff;
font-family:Arial;
font-size:.8em;
text-decoration:none;
padding:5px 40px 5px 8px;
border-style:solid;
border-color:#dddddd;
border-width:1px;
text-align:left;
}
/*"""""""" (MAIN) Hover State """"""""*/
#qm0 a:hover
{
background-color:#efefef;
}
/*"""""""" (MAIN) Active State """"""""*/
body #qm0 .qmactive, body #qm0 .qmactive:hover
{
background-color:#efefef;
text-decoration:underline;
}
/*"""""""" (MAIN) Parent Items """"""""*/
#qm0 .qmparent
{
background-image:url(images/arrow_down.gif);
background-repeat:no-repeat;
background-position:95%;
}
/*"""""""" [SUB] Containers """"""""*/
#qm0 div
{
background-color:#efefef;
padding:5px;
border-style:solid;
border-width:1px;
border-color:#cccccc;
margin-top:-1px;
}
/*"""""""" [SUB] Hover State """"""""*/
#qm0 div a:hover
{
text-decoration:underline;
}
/*""""""""[SUB] Active State """"""""*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
background-color:#ffffff;
}
/*"""""""" [SUB] Parent Items """"""""*/
#qm0 div .qmparent
{
background-image:url(images/arrow_right.gif);
}
/*"""""""" [SUB] Items """"""""*/
#qm0 div a
{
background-color:#eeeeee;
padding:2px 40px 2px 5px;
border-width:0px;
border-style:none;
border-color:#000000;
}
</style>
</head>
<body style="margin:40px">
<!-- To center the menu in the page use a dimensionless table. You can also set a fixed width for
the main containers DIV and place the menu in a center tag or div with an align=center attribute. -->
<table align=center><tr><td>
<!--%%%%%%%%%%%% QuickMenu Stucture %%%%%%%%%%%*-->
<div id="qm0" class="qmmc">
<a href="#">Who We Are</a>
<div>
<a href="#">Management</a>
<a href="#">Global Sites</a>
<div style="width:9em">
<a href="#">Asia</a>
<a href="#">South America</a>
<a href="#">Austraila</a>
<a href="#">North America</a>
<a href="#">Europe</a>
<a href="#">Africa</a>
</div>
<a href="#">Investors</a>
<div style="width:9em">
<a href="#">Asia</a>
<a href="#">South America</a>
<a href="#">Austraila</a>
<a href="#">North America</a>
<a href="#">Europe</a>
<a href="#">Africa</a>
</div>
<a href="#">Worldwide</a>
<a href="#">Product Overview</a>
<a href="#">Publicity</a>
</div>
<a href="#">Our Commitment</a>
<div>
<a href="#">Satisfaction</a>
<a href="#">Our Goals</a>
<a href="#">Product Warranty</a>
<a href="#">Future Outlook</a>
<a href="#">Product Quality</a>
<a href="#">Continued Support</a>
</div>
<a href="#">Our Investors</a>
<div>
<a href="#">Annual Meetings</a>
<a href="#">Financial Reports</a>
<a href="#">Nasdaq Quoting</a>
<a href="#">Dividend Information</a>
<a href="#">Future Outlook</a>
<a href="#">CEO Announcements</a>
</div>
<a href="#">Technology</a>
<div>
<a href="#">Satisfaction</a>
<a href="#">Our Goals</a>
<a href="#">Product Warranty</a>
<a href="#">Future Outlook</a>
<a href="#">Product Quality</a>
<a href="#">Continued Support</a>
</div>
<span class="qmclear"> </span></div>
</td></tr></table>
<!--%%%%%%%%%%%% QuickMenu Create Menu (menu id, is vertical, show timer (ms), hide timer (ms), on click) %%%%%%%%%%%*-->
<script type="text/JavaScript">qm_create(0,false,0,500,false)</script>
<!-- Document Content -->
<div style="text-align:left;padding-top:50px;font-family:Arial;font-size:.8em;color:#000000;bacgkground-color:#ff0000;">
<u>Page Centered Menu Example</u>
<br>
<br>
View the source HTML to see first hand how this sample works. To center your menu add the structure to dimensionless table with a center attribute. You can also specify a fixed width for the main containers DIV and add the menu to a <CENTER> tag or div with a center attribute.
<br>
<br>
*Note: Netscape quarks will not allow sub menu to extend beyond the right edge of menus nested in a table. To work around the issue, specify a specific width in the sub menu containers div tag.
</div>
<!-- End Content -->
</body>
</html>⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?