Javascript 如何在不同浏览器中使标题与navmenu正确对齐？
请原谅此标记中的草率和未使用的属性。这是因为我经常犯错误和胡闹。我将在开发快结束时修复它 由于某些原因，此标记中的标题仅在firefox中正确居中。但是随着safari和chrome的使用，它稍微偏右了一点，我想其他浏览器也一样 我确实使用了左边的填充，但这只适用于firefox。是否有一种通用的方式使它在所有浏览器中都居中Javascript 如何在不同浏览器中使标题与navmenu正确对齐？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,请原谅此标记中的草率和未使用的属性。这是因为我经常犯错误和胡闹。我将在开发快结束时修复它 由于某些原因，此标记中的标题仅在firefox中正确居中。但是随着safari和chrome的使用，它稍微偏右了一点，我想其他浏览器也一样 我确实使用了左边的填充，但这只适用于firefox。是否有一种通用的方式使它在所有浏览器中都居中 <!doctype html> <html> <head> <meta charset="utf-8" /> <s
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.slideshow { height: 0px; width: center; margin: auto }
.slideshow img { padding-top: 40px;}
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var controller = $.superscrollorama({
triggerAtCenter: false,
playoutAnimations: true,
});
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="path/to/your/jquery/script.js"></script>
<div id="logo">
<a href="http://127.0.0.1:8020/Revealedclothing/index.htm">
<h1>
<div id="mainContainer">
<div id="headerContainer">
</div>
</div>
<img src="http://oi40.tinypic.com/iz1ag0.png" width="250" height="134" style=" margin: 0 auto; width: center; padding-top:20px; padding-left:128px;
padding-left:258px;"></h1>
<style></style>
<style>h1 {
color: red;
font-size: 4em;
text-decoration: none;
font-family: ;
margin: 0 auto;
width: center;
padding-left:515px;
padding-bottom:1px;
}
</style>
</div>
<style>
<!-- Use this for future backgrounds (optimum resolution: 1448 - 697) -->
body
{
background:url("");
background-size:0px 0px;
background-repeat:no-repeat;
padding-top:0px;
<!-- Use this for future backgrounds (optimum resolution: 1448 - 697) -->
}
<!--
a:hover{color:none;}
-->
.navLink {
color: #000000;
text-decoration: none !important;}
ul
{
list-style-type:none;
font-size: 85%;
font-family: 'Ubuntu Condensed', sans-serif;
font-weight: lighter;
font-style: regular;}
{
display:inline;
}
</style>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>UNKOWN</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<link rel="stylesheet" type="text/css" href="star-light/star-light.css" media="all">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav-one li").hover(
function(){ $("ul", this).fadeIn("slow"); },
function() { }
);
if (document.all) {
$("#nav-one li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c) {
return this.each(function(){
$(this).hover(
function() { $(this).addClass(c); },
function() { $(this).removeClass(c); }
);
});
};
</script>
<style type="text/css">
/* Navigation */
.nav, .nav ul {
list-style: none;
margin: 0 center;
padding: 0;
width: 100;
img
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.nav {
font-family: 'Ubuntu Condensed', sans-serif;
z-index: 100;
position: relative;
padding-left:110px;
}
.nav li {
border-left: 0px solid #000;
float: left;
margin: 0;
padding: 0;
position: relative;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
font: 1em/25px 'Ubuntu Condensed', sans-serif;
background: #FFFFFF;
color: #000000;
display: block;
padding: 0 14px;
text-transform: Uppercase;
text-decoration: none;
}
.nav li a:hover {
background: #ccc;
color: #000;
}
#nav-one li:hover a,
#nav-one li.sfHover a {
background: #ccc;
color: #000;
}
#nav-one li:hover ul a,
#nav-one li.sfHover ul a {
background: #FFFFFF;
color: #000000;
}
#nav-one li:hover ul a:hover,
#nav-one li.sfHover ul a:hover {
background: #ccc;
color: #000;
}
.nav ul {
background: #FFFFFF;
border-bottom: 0px solid #000;
list-style: none;
margin: 0;
width: 0px;
position: absolute;
top: -999em;
left: -1px;
}
.nav li:hover ul,
.nav li.sfHover ul {
top: 25px;
}
.nav ul li {
border: 0;
float: none;
}
.nav ul a {
border: 0px solid #000;
border-bottom: 0;
padding-right: 20px;
width: 80px;
white-space: nowrap;
}
.nav ul a:hover {
background: #FFFFFF;
color: #000;
}
.nav ul {
width: 25.5%;
margin: 0 auto;
}
ul {
width: 25.5%;
margin: 0 auto;
}
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
</style>
<script>/*
jQuery Waypoints - v1.1.7
Copyright (c) 2011-2012 Caleb Troughton
Dual licensed under the MIT license and GPL license.
https://github.com/imakewebthings/jquery-waypoints/blob/master/MIT-license.txt
https://github.com/imakewebthings/jquery-waypoints/blob/master/GPL-license.txt
*/
(function($,k,m,i,d){var e=$(i),g="waypoint.reached",b=function(o,n){o.element.trigger(g,n);if(o.options.triggerOnce){o.element[k]("destroy")}},h=function(p,o){if(!o){return -1}var n=o.waypoints.length-1;while(n>=0&&o.waypoints[n].element[0]!==p[0]){n-=1}return n},f=[],l=function(n){$.extend(this,{element:$(n),oldScroll:0,waypoints:[],didScroll:false,didResize:false,doScroll:$.proxy(function(){var q=this.element.scrollTop(),p=q>this.oldScroll,s=this,r=$.grep(this.waypoints,function(u,t){return p?(u.offset>s.oldScroll&&u.offset<=q):(u.offset<=s.oldScroll&&u.offset>q)}),o=r.length;if(!this.oldScroll||!q){$[m]("refresh")}this.oldScroll=q;if(!o){return}if(!p){r.reverse()}$.each(r,function(u,t){if(t.options.continuous||u===o-1){b(t,[p?"down":"up"])}})},this)});$(n).bind("scroll.waypoints",$.proxy(function(){if(!this.didScroll){this.didScroll=true;i.setTimeout($.proxy(function(){this.doScroll();this.didScroll=false},this),$[m].settings.scrollThrottle)}},this)).bind("resize.waypoints",$.proxy(function(){if(!this.didResize){this.didResize=true;i.setTimeout($.proxy(function(){$[m]("refresh");this.didResize=false},this),$[m].settings.resizeThrottle)}},this));e.load($.proxy(function(){this.doScroll()},this))},j=function(n){var o=null;$.each(f,function(p,q){if(q.element[0]===n){o=q;return false}});return o},c={init:function(o,n){this.each(function(){var u=$.fn[k].defaults.context,q,t=$(this);if(n&&n.context){u=n.context}if(!$.isWindow(u)){u=t.closest(u)[0]}q=j(u);if(!q){q=new l(u);f.push(q)}var p=h(t,q),s=p<0?$.fn[k].defaults:q.waypoints[p].options,r=$.extend({},s,n);r.offset=r.offset==="bottom-in-view"?function(){var v=$.isWindow(u)?$[m]("viewportHeight"):$(u).height();return v-$(this).outerHeight()}:r.offset;if(p<0){q.waypoints.push({element:t,offset:null,options:r})}else{q.waypoints[p].options=r}if(o){t.bind(g,o)}if(n&&n.handler){t.bind(g,n.handler)}});$[m]("refresh");return this},remove:function(){return this.each(function(o,p){var n=$(p);$.each(f,function(r,s){var q=h(n,s);if(q>=0){s.waypoints.splice(q,1);if(!s.waypoints.length){s.element.unbind("scroll.waypoints resize.waypoints");f.splice(r,1)}}})})},destroy:function(){return this.unbind(g)[k]("remove")}},a={refresh:function(){$.each(f,function(r,s){var q=$.isWindow(s.element[0]),n=q?0:s.element.offset().top,p=q?$[m]("viewportHeight"):s.element.height(),o=q?0:s.element.scrollTop();$.each(s.waypoints,function(u,x){if(!x){return}var t=x.options.offset,w=x.offset;if(typeof x.options.offset==="function"){t=x.options.offset.apply(x.element)}else{if(typeof x.options.offset==="string"){var v=parseFloat(x.options.offset);t=x.options.offset.indexOf("%")?Math.ceil(p*(v/100)):v}}x.offset=x.element.offset().top-n+o-t;if(x.options.onlyOnScroll){return}if(w!==null&&s.oldScroll>w&&s.oldScroll<=x.offset){b(x,["up"])}else{if(w!==null&&s.oldScroll<w&&s.oldScroll>=x.offset){b(x,["down"])}else{if(!w&&s.element.scrollTop()>x.offset){b(x,["down"])}}}});s.waypoints.sort(function(u,t){return u.offset-t.offset})})},viewportHeight:function(){return(i.innerHeight?i.innerHeight:e.height())},aggregate:function(){var n=$();$.each(f,function(o,p){$.each(p.waypoints,function(q,r){n=n.add(r.element)})});return n}};$.fn[k]=function(n){if(c[n]){return c[n].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof n==="function"||!n){return c.init.apply(this,arguments)}else{if(typeof n==="object"){return c.init.apply(this,[null,n])}else{$.error("Method "+n+" does not exist on jQuery "+k)}}}};$.fn[k].defaults={continuous:true,offset:0,triggerOnce:false,context:i};$[m]=function(n){if(a[n]){return a[n].apply(this)}else{return a.aggregate()}};$[m].settings={resizeThrottle:200,scrollThrottle:100};e.load(function(){$[m]("refresh")})})(jQuery,"waypoint","waypoints",window);</script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'scrollLeft',
speed: 270 // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
</head>
<body>
<hr style="border: none; height: 1px; color: #C0C0C0; background: #C0C0C0;"/>
<tr>
<td><ul id="nav-one" class="nav">
<li>
<a href="#item1">MEN'S</a>
<ul style="opacity: 0.9999; display: block;">
<li><a href="#item1.2">New Arrivals</a></li>
<li><a href="http://127.0.0.1:8020/MEN%27S-/INDEX.HTM">Tops</a></li>
<li><a href="#item1.2">Bottoms</a></li>
<li><a href="#item1.3">Outerwear</a></li>
<li><a href="#item1.4">Shoes</a></li>
</ul>
</li>
<li>
<a href="#item2">WOMEN'S</a>
<ul style="opacity: 0.9999; display: none;">
<li><a href="#item1.2">New Arrivals</a></li>
<li><a href="#item1.1">Tops</a></li>
<li><a href="#item1.2">Bottoms</a></li>
<li><a href="#item1.3">Outerwear</a></li>
<li><a href="#item1.4">Bags</a></li>
</ul>
</li>
<li>
<a href="#item3">COLLECTION</a>
<ul style="opacity: 0.9999; display: block;">
<li><a href="#item3.1">SHOWCASE</a></li>
<li><a href="#item3.2">MEN'S</a></li>
<li><a href="#item3.2">WOMEN'S</a></li>
</ul>
</li>
<li>
<a href="#item4">BAGS</a>
<ul style="opacity: 0.9999; display: block;">
</ul>
<li>
<a href="#item4">BLOG</a>
<ul style="opacity: 0.9999; display: block;">
</ul>
</ul>
</td>
</tr>
<tr>
<td><div class="slideshow" style="position: top;">
<img src="http://oi40.tinypic.com/iz1ag0.png" width="1448" height="697" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 100%; height: 697px;">
<img src="http://malsup.github.com/images/beach3.jpg" width="1448" height="697" style="position: center; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 100%; height: 697px;">
<img src="http://malsup.github.com/images/beach3.jpg" width="1448" height="697" style="position: center; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 100%; height: 697px;">
<img src="http://oi40.tinypic.com/iz1ag0.png" width="1448" height="697" style="position: center; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 100%; height: 697px;">
<img src="http://malsup.github.com/images/beach5.jpg" width="1448" height="697" style="position: center; top: 0px; left: 0px; display: block; z-index: 6; opacity: 1;width: 100%; height: 697px;">
</div></td>
</tr>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.slideshow { height: 0px; width: center; margin: auto }
.slideshow img { padding-top: 40px;}
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var controller = $.superscrollorama({
triggerAtCenter: false,
playoutAnimations: true,
});
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="path/to/your/jquery/script.js"></script>
<div id="logo">
<a href="http://127.0.0.1:8020/Revealedclothing/index.htm">
<h1>
<div id="mainContainer">
<div id="headerContainer">
</div>
</div>
<img src="http://oi40.tinypic.com/iz1ag0.png" width="250" height="134" style=" margin: 0 auto; width: center; padding-top:20px; padding-left:128px;
padding-left:258px;"></h1>
<style></style>
<style>h1 {
color: red;
font-size: 4em;
text-decoration: none;
font-family: ;
margin: 0 auto;
width: center;
padding-left:515px;
padding-bottom:1px;
}
</style>
</div>
<style>
<!-- Use this for future backgrounds (optimum resolution: 1448 - 697) -->
body
{
background:url("");
background-size:0px 0px;
background-repeat:no-repeat;
padding-top:0px;
<!-- Use this for future backgrounds (optimum resolution: 1448 - 697) -->
}
<!--
a:hover{color:none;}
-->
.navLink {
color: #000000;
text-decoration: none !important;}
ul
{
list-style-type:none;
font-size: 85%;
font-family: 'Ubuntu Condensed', sans-serif;
font-weight: lighter;
font-style: regular;}
{
display:inline;
}
</style>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>UNKOWN</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<link rel="stylesheet" type="text/css" href="star-light/star-light.css" media="all">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav-one li").hover(
function(){ $("ul", this).fadeIn("slow"); },
function() { }
);
if (document.all) {
$("#nav-one li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c) {
return this.each(function(){
$(this).hover(
function() { $(this).addClass(c); },
function() { $(this).removeClass(c); }
);
});
};
</script>
<style type="text/css">
/* Navigation */
.nav, .nav ul {
list-style: none;
margin: 0 center;
padding: 0;
width: 100;
img
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.nav {
font-family: 'Ubuntu Condensed', sans-serif;
z-index: 100;
position: relative;
padding-left:110px;
}
.nav li {
border-left: 0px solid #000;
float: left;
margin: 0;
padding: 0;
position: relative;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
font: 1em/25px 'Ubuntu Condensed', sans-serif;
background: #FFFFFF;
color: #000000;
display: block;
padding: 0 14px;
text-transform: Uppercase;
text-decoration: none;
}
.nav li a:hover {
background: #ccc;
color: #000;
}
#nav-one li:hover a,
#nav-one li.sfHover a {
background: #ccc;
color: #000;
}
#nav-one li:hover ul a,
#nav-one li.sfHover ul a {
background: #FFFFFF;
color: #000000;
}
#nav-one li:hover ul a:hover,
#nav-one li.sfHover ul a:hover {
background: #ccc;
color: #000;
}
.nav ul {
background: #FFFFFF;
border-bottom: 0px solid #000;
list-style: none;
margin: 0;
width: 0px;
position: absolute;
top: -999em;
left: -1px;
}
.nav li:hover ul,
.nav li.sfHover ul {
top: 25px;
}
.nav ul li {
border: 0;
float: none;
}
.nav ul a {
border: 0px solid #000;
border-bottom: 0;
padding-right: 20px;
width: 80px;
white-space: nowrap;
}
.nav ul a:hover {
background: #FFFFFF;
color: #000;
}
.nav ul {
width: 25.5%;
margin: 0 auto;
}
ul {
width: 25.5%;
margin: 0 auto;
}
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
</style>
<script>/*
jQuery Waypoints - v1.1.7
Copyright (c) 2011-2012 Caleb Troughton
Dual licensed under the MIT license and GPL license.
https://github.com/imakewebthings/jquery-waypoints/blob/master/MIT-license.txt
https://github.com/imakewebthings/jquery-waypoints/blob/master/GPL-license.txt
*/
(function($,k,m,i,d){var e=$(i),g="waypoint.reached",b=function(o,n){o.element.trigger(g,n);if(o.options.triggerOnce){o.element[k]("destroy")}},h=function(p,o){if(!o){return -1}var n=o.waypoints.length-1;while(n>=0&&o.waypoints[n].element[0]!==p[0]){n-=1}return n},f=[],l=function(n){$.extend(this,{element:$(n),oldScroll:0,waypoints:[],didScroll:false,didResize:false,doScroll:$.proxy(function(){var q=this.element.scrollTop(),p=q>this.oldScroll,s=this,r=$.grep(this.waypoints,function(u,t){return p?(u.offset>s.oldScroll&&u.offset<=q):(u.offset<=s.oldScroll&&u.offset>q)}),o=r.length;if(!this.oldScroll||!q){$[m]("refresh")}this.oldScroll=q;if(!o){return}if(!p){r.reverse()}$.each(r,function(u,t){if(t.options.continuous||u===o-1){b(t,[p?"down":"up"])}})},this)});$(n).bind("scroll.waypoints",$.proxy(function(){if(!this.didScroll){this.didScroll=true;i.setTimeout($.proxy(function(){this.doScroll();this.didScroll=false},this),$[m].settings.scrollThrottle)}},this)).bind("resize.waypoints",$.proxy(function(){if(!this.didResize){this.didResize=true;i.setTimeout($.proxy(function(){$[m]("refresh");this.didResize=false},this),$[m].settings.resizeThrottle)}},this));e.load($.proxy(function(){this.doScroll()},this))},j=function(n){var o=null;$.each(f,function(p,q){if(q.element[0]===n){o=q;return false}});return o},c={init:function(o,n){this.each(function(){var u=$.fn[k].defaults.context,q,t=$(this);if(n&&n.context){u=n.context}if(!$.isWindow(u)){u=t.closest(u)[0]}q=j(u);if(!q){q=new l(u);f.push(q)}var p=h(t,q),s=p<0?$.fn[k].defaults:q.waypoints[p].options,r=$.extend({},s,n);r.offset=r.offset==="bottom-in-view"?function(){var v=$.isWindow(u)?$[m]("viewportHeight"):$(u).height();return v-$(this).outerHeight()}:r.offset;if(p<0){q.waypoints.push({element:t,offset:null,options:r})}else{q.waypoints[p].options=r}if(o){t.bind(g,o)}if(n&&n.handler){t.bind(g,n.handler)}});$[m]("refresh");return this},remove:function(){return this.each(function(o,p){var n=$(p);$.each(f,function(r,s){var q=h(n,s);if(q>=0){s.waypoints.splice(q,1);if(!s.waypoints.length){s.element.unbind("scroll.waypoints resize.waypoints");f.splice(r,1)}}})})},destroy:function(){return this.unbind(g)[k]("remove")}},a={refresh:function(){$.each(f,function(r,s){var q=$.isWindow(s.element[0]),n=q?0:s.element.offset().top,p=q?$[m]("viewportHeight"):s.element.height(),o=q?0:s.element.scrollTop();$.each(s.waypoints,function(u,x){if(!x){return}var t=x.options.offset,w=x.offset;if(typeof x.options.offset==="function"){t=x.options.offset.apply(x.element)}else{if(typeof x.options.offset==="string"){var v=parseFloat(x.options.offset);t=x.options.offset.indexOf("%")?Math.ceil(p*(v/100)):v}}x.offset=x.element.offset().top-n+o-t;if(x.options.onlyOnScroll){return}if(w!==null&&s.oldScroll>w&&s.oldScroll<=x.offset){b(x,["up"])}else{if(w!==null&&s.oldScroll<w&&s.oldScroll>=x.offset){b(x,["down"])}else{if(!w&&s.element.scrollTop()>x.offset){b(x,["down"])}}}});s.waypoints.sort(function(u,t){return u.offset-t.offset})})},viewportHeight:function(){return(i.innerHeight?i.innerHeight:e.height())},aggregate:function(){var n=$();$.each(f,function(o,p){$.each(p.waypoints,function(q,r){n=n.add(r.element)})});return n}};$.fn[k]=function(n){if(c[n]){return c[n].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof n==="function"||!n){return c.init.apply(this,arguments)}else{if(typeof n==="object"){return c.init.apply(this,[null,n])}else{$.error("Method "+n+" does not exist on jQuery "+k)}}}};$.fn[k].defaults={continuous:true,offset:0,triggerOnce:false,context:i};$[m]=function(n){if(a[n]){return a[n].apply(this)}else{return a.aggregate()}};$[m].settings={resizeThrottle:200,scrollThrottle:100};e.load(function(){$[m]("refresh")})})(jQuery,"waypoint","waypoints",window);</script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'scrollLeft',
speed: 270 // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
</head>
<body>
<hr style="border: none; height: 1px; color: #C0C0C0; background: #C0C0C0;"/>
<tr>
<td><ul id="nav-one" class="nav">
<li>
<a href="#item1">MEN'S</a>
<ul style="opacity: 0.9999; display: block;">
<li><a href="#item1.2">New Arrivals</a></li>
<li><a href="http://127.0.0.1:8020/MEN%27S-/INDEX.HTM">Tops</a></li>
<li><a href="#item1.2">Bottoms</a></li>
<li><a href="#item1.3">Outerwear</a></li>
<li><a href="#item1.4">Shoes</a></li>
</ul>
</li>
<li>
<a href="#item2">WOMEN'S</a>
<ul style="opacity: 0.9999; display: none;">
<li><a href="#item1.2">New Arrivals</a></li>
<li><a href="#item1.1">Tops</a></li>
<li><a href="#item1.2">Bottoms</a></li>
<li><a href="#item1.3">Outerwear</a></li>
<li><a href="#item1.4">Bags</a></li>
</ul>
</li>
<li>
<a href="#item3">COLLECTION</a>
<ul style="opacity: 0.9999; display: block;">
<li><a href="#item3.1">SHOWCASE</a></li>
<li><a href="#item3.2">MEN'S</a></li>
<li><a href="#item3.2">WOMEN'S</a></li>
</ul>
</li>
<li>
<a href="#item4">BAGS</a>
<ul style="opacity: 0.9999; display: block;">
</ul>
<li>
<a href="#item4">BLOG</a>
<ul style="opacity: 0.9999; display: block;">
</ul>
</ul>
</td>
</tr>
<tr>
<td><div class="slideshow" style="position: top;">
<img src="http://oi40.tinypic.com/iz1ag0.png" width="1448" height="697" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 100%; height: 697px;">
<img src="http://malsup.github.com/images/beach3.jpg" width="1448" height="697" style="position: center; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 100%; height: 697px;">
<img src="http://malsup.github.com/images/beach3.jpg" width="1448" height="697" style="position: center; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 100%; height: 697px;">
<img src="http://oi40.tinypic.com/iz1ag0.png" width="1448" height="697" style="position: center; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 100%; height: 697px;">
<img src="http://malsup.github.com/images/beach5.jpg" width="1448" height="697" style="position: center; top: 0px; left: 0px; display: block; z-index: 6; opacity: 1;width: 100%; height: 697px;">
</div></td>
</tr>
</body>
</html>
.slideshow{高度：0px；宽度：中心；边距：自动}
.slideshow img{padding top:40px；}
$（文档）.ready（函数（）{
变量控制器=$.superscrolama({
triggerAtCenter:false，
playoutAnimations：没错，
});
});
宽度：中心