我有点麻烦让我的导航栏设置我想要的样式。出于某种原因,我的导航栏失去了它的底部边框,当我尝试CSS导航背景时它没有任何效果,如果我使用边距(底部),那么Wowslider会变得疯狂,当它改变图像时它变得非常大。
它必须在我的CSS中,但我会发布我的HTML和CSS。我希望导航栏看起来像是
但我需要首先解决上述问题(甚至不确定导航栏的类型是否可行)
HTML
<?php include 'header.php';?>
<div class="logo"> Darthvix Custom Sabers specializes in custom lightsabers and conversions to create a unique lightsaber specific to you're desires.<P></P></div>
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/dsc01061.jpg" alt="DSC01061" title="DSC01061" id="wows1_0"/></li>
<li><img src="data1/images/dsc01069.jpg" alt="DSC01069" title="DSC01069" id="wows1_1"/></li>
<li><img src="data1/images/dsc01114.jpg" alt="DSC01114" title="DSC01114" id="wows1_2"/></li>
<li><img src="data1/images/dsc01140.jpg" alt="DSC01140" title="DSC01140" id="wows1_3"/></li>
<li><img src="data1/images/dsc01273.jpg" alt="DSC01273" title="DSC01273" id="wows1_4"/></li>
<li><img src="data1/images/dsc01285.jpg" alt="DSC01285" title="DSC01285" id="wows1_5"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="DSC01061"><img src="data1/tooltips/dsc01061.jpg" alt="DSC01061"/>1</a>
<a href="#" title="DSC01069"><img src="data1/tooltips/dsc01069.jpg" alt="DSC01069"/>2</a>
<a href="#" title="DSC01114"><img src="data1/tooltips/dsc01114.jpg" alt="DSC01114"/>3</a>
<a href="#" title="DSC01140"><img src="data1/tooltips/dsc01140.jpg" alt="DSC01140"/>4</a>
<a href="#" title="DSC01273"><img src="data1/tooltips/dsc01273.jpg" alt="DSC01273"/>5</a>
<a href="#" title="DSC01285"><img src="data1/tooltips/dsc01285.jpg" alt="DSC01285"/>6</a>
</div></div><span class="wsl"><a href="http://wowslider.com">slideshow</a> by WOWSlider.com v5.6m</span>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
<?php include 'footer.php';?>
</body>
</html>
CSS
body {
width:100%;
overflow-x:hidden;
/* This image will be displayed fullscreen */
background:url('../images/background.jpg') no-repeat center center;
/* The Magic */
background-size:4000px 4000px;
}
div.entire {
width:85%;
background-color: #383838;
margin:auto;
color:#33FF00 ;
min-height:100%;
}
a {
color: #33FF00;
}
a.visited, a.hover {
color: #33FF00 ;
}
div.logo {
font-size:150%;
text-align:center;
}
div.wowslider {
width:100%;
}
#navbar {
background-color:#505050;
}
#menu {
width: 100%;
margin: 0 0 2em 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #ccc;
border-top: 3px solid #ccc;
font-size: 150%;
box-shadow: 8px 8px 8px #888888;
background-color:#505050;
}
#menu a {
text-shadow: 3px 3px black;
}
#menu li {
float: left;
}
#menu li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 4px solid #ccc;
}
#menu li a:hover {
color: white;
background:url('../images/navbackground.jpg'); }
div.footer {
border-top: 1px solid white;
background-color: #404040 ;
width:100%;
height:auto !important;
margin:auto;
clear:both;
}
#about {
width:60%;
font-size:130%;
}
div.buildlog {
font-size:220%;
font-weight:bold;
}
.build {
font-size:170%;
font-weight:bold;
}
.builds {
font-size:130%;
}
div.forsalepics img {
width:20%;
height:30%;
margin:2%;
border: 3px solid white;
}
div.servicewidth {
width:60%;
}
div.services, div.payment {
font-size:170%;
font-weight: bold;
}
答案 0 :(得分:0)
我修好了,把一些导航条码放在错误的地方!!!