gpt4 book ai didi

html - 导航栏打破照片幻灯片的边距问题

转载 作者:行者123 更新时间:2023-11-28 09:39:11 25 4
gpt4 key购买 nike

我在设置我想要的导航栏样式时遇到了一些麻烦。出于某种原因,我的导航栏失去了它的底部边框,当我尝试 CSS 导航背景时它没有效果,如果我使用边距(底部的)然后 Wowslider 变得疯狂,并且当它改变图像时它变得非常大。

它必须在我的 css 中,但我会发布我的 HTML 和 CSS。我希望导航栏看起来像 enter image description here

但我需要先解决上述问题(甚至不确定这种类型的导航栏是否可行)

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;
}

最佳答案

我修好了,有一些导航条码在错误的地方!!!

关于html - 导航栏打破照片幻灯片的边距问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25438684/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com