HY!
我不知道如何集中Nav-Bar请帮忙!
HTML:
<html>
<script src="jquery-1.6.1.min.js"></script>
<script src='jquery.divslideshow-1.2-min.js' type='text/javascript'></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div id="page-wrap">
<table>
<tr>
<td><img src="images/logo.png"/></td>
<td> <div id="slideshow">
<img src="/images/trompete.jpg" alt="Slideshow Image 1" class="active" />
<img src="/images/floete.jpg" alt="Slideshow Image 1" />
</div></td>
</tr>
</table>
<div class="container">
<ul id="minitabs">
<li><a href="#" class="active">News</a></li>
<li><a href="#" >Fotos</a></li>
<li><a href="#">Mitglieder</a></li>
<li><a href="#">Jugend</a></li>
<li><a href="#">Gästebuch</a></li>
<li><a href="#">Intern</a></li>
</ul>
</div>
<br/>
<div><p>Pellentesque habitant morbi</p>
</div>
</div>
</body>
</head>
</html>
的CSS:
#page-wrap { position: relative; width: 1024px;
margin: 50px auto; padding: 20px;
background: white; -moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black; -webkit-border-radius:30px;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 10px 56px;
text-decoration: none;
font-weight: bold;
color: #069;
}
#nav li a:hover {
color: #c00;
background-color: #fff; }
p { font: 15px/2 Georgia, Serif; margin: 0 0 30p x 0; text-indent: 5px; }
#slideshow {
position:relative;
height:165px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
height:146px;
width: 650px;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
.container {
padding: 1px;
margin: 40px 0px 40px 0;
background: #fff;
}
#minitabs {
margin: 0;
padding: 0 0 40px 10px;
border-bottom: 1px solid #587DC6;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a:link, #minitabs a:visited {
float: left;
font-size: 40px;
line-height: 10px;
font-weight: bold;
margin: 0 10px 4px 10px;
padding-bottom: 2px;
text-decoration: none;
color: #C6C6C6;
}
#minitabs a.active:link, #minitabs a.active:visited, #minitabs a:hover {
border-bottom: 4px solid #B80028;
padding-bottom: 20px;
background: #fff;
color: #587DC6;
}
答案 0 :(得分:0)
要使导航器居中,您需要执行以下操作:
<强> CSS:强>
#minitabs
分配
text-align:center;
#minitabs a:link, #minitabs a:visited
删除或评论float:left;
这应该是你的导航中心。您必须在导航中调整一些样式才能使其看起来与以前一样,但至少它应该是您的起点。
查看JSfiddle上的实时链接:http://jsfiddle.net/AvavN/