个人中心
gpt4 book ai didi

html - 删除不需要的空间，使我的导航栏和
变得无聊

转载 作者：行者123 更新时间：2023-11-27 22:32:05 25 4
gpt4 key购买 nike

好的，我有一个 Apple 主题的导航栏，出于某种原因，它和下面的 <div> 之间有一些奇怪的间距。 s，我需要一些帮助来移除它。

我相信它与 CSS 样式或一些重叠的 CSS 样式有关..

如果你想看纯代码，这里是:

索引.htm:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Mario Toys at Mario Planet</title>
    <link rel="stylesheet" href="/css/LavaNav_default.css" />
    <link rel="stylesheet" href="/css/default.css" />
    <link rel="stylesheet" href="/css/SlideShow.css" media="screen" />
    <link rel="stylesheet" href="/css/nav.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="/js/SlideShow.js"></script>
    <script type="text/javascript" src="/js/nav.js"></script>
    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17629991-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

    </script>
</head>

<body>

<div id="header">
    <p align="center"><img id="logo" src="/images/logo/logo.png" alt="logo"></p>
<script type="text/javascript">
    var searchSection = 'global';
    var searchCountry = 'us';
</script>
<div id="globalheader" class="apple">
    <!--googleoff: all-->
    <ul id="globalnav">
        <li id="gn-home"><a href="index.htm">Home</a></li>
        <li id="gn-catalog"><a href="catalog.asp">Shop!</a></li>

        <li id="gn-about"><a href="about.htm">About</a></li>
        <li id="gn-contact"><a href="contact.htm">Contact</a></li>
        <li id="gn-media"><a href="media.htm">Media</a></li>
        <li id="gn-ipad"><a></a></li>
        <li id="gn-itunes"><a></a></li>
        <li id="gn-support"><a></a></li>

    </ul>
    <!--googleon: all-->

</div>



    <!--/homefooter-->
    <!-- Start of DoubleClick Spotlight Tag: Please do not remove-->
    <!-- Creation Date:11/19/07 -->


    <!-- End of DoubleClick Spotlight Tag: Please do not remove-->

</div>

<div  id="content">

<div id="leftcol">
<p>&nbsp;</p> 
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="container">


<a id="twittericon" class="trayIcon"  href="#" target="_blank"><img src="/images/layout/icons/twittericon.png" alt="twitter" /></a>

<a id="facebookicon" class="trayIcon" href="http://www.facebook.com/home.php?#!/pages/Mario-Planet/111849438832254?ref=ts" target="_blank"><img src="/images/layout/icons/facebookicon.png" alt="facebook" /></a>

<a id="youtubeicon" class="trayIcon" href="#" target="_blank"><img src="/images/layout/icons/youtubeicon.png" alt="youtube" /></a>

<img src="/images/miscellaneous/tray.png" width="200" id="tray" style="z-index:10;">

</div>


<p>&nbsp;</p>
<p><img src="/images/layout/characters/babymario/BMarioSluggers.PNG" alt="Baby Mario" width="101" height="161"></p>
<p align="center"><img src="/images/layout/characters/mario/MarioNSMBWii.PNG" alt="Mario" width="169" height="260"></p>
</div> 

<div id="detail"> 
  <h1 class="headers">&nbsp;</h1> 
  <h1 class="headers">Welcome!  </h1>
  <p class="style1">&nbsp;</p> 
  <p class="style1">Here at Mario Planet, you will disover a wide variety of Super Mario Bros related toys and games! We here at Mario Planet strive to constantly serve <em>you</em> better, improving our user-interface, products, and customer service, each and every day. Please keep in mind that we are still in the middle of adding more products to our site, so if our supply seems to dissapoint, please bookmark our site, and return every so often, because products are being added all the time! So please sit back and relax, and enjoy some Super Mario Bros toys!</p>
  <p class="style1">&nbsp;</p>

  <div id="pageContainer">
  <h1 class="headers">Featured Products</h1>

  <!-- Slideshow HTML -->
  <div id="slideshow">

    <div id="slidesContainer">

      <div class="slide">
        <h2><a>Mario - Plush</a></h2>
        <p><a href="#"><img src="/images/catalog/original/mario_plush/mario_running_plush_1.jpg" alt="Mario - Plush" width="150" height="145" /></a>Check out our latest featured product, Mario (Running) - Plush.  This plush product shows keen resemblance to the Super Mario you all know and love, the star of all of <em>your</em> favorite video games!  It also takes the realism further, depicting Mario running!  One of his most used actions throughout the Mushroom Kingdom.  Order now, and start cuddling with this amazing plumber today!</p>
      </div>

      <div class="slide">
        <h2><a>Question Mark Block - Plush</a></h2>
        <p><a href="#"><img src="/images/catalog/original/mario_plush/question_mark_block_with_sound_plush_1.jpg" width="150" height="145" alt="Question Mark Block - Plush" /></a>The Question Mark Block is now available in a soft plush material, no longer metal from the video games!  Upon punching this product, you will hear the trademark 8-bit sound emit from the highly-advanced sensors within this plush toy.  Order now, and start hitting your Question Mark Block - Plush today!</p>
        <p> 
      </div>

      <div class="slide">
        <h2><a>Mario, Luigi and Star - Figure Set</a></h2>
        <p><a href="#"><img src="/images/catalog/original/mario_action_figures/mario_luigi_star_figure_set.jpg" width="180" height="145" alt="Mario, Luigi and Star - Figure Set" /></a>In this figure set, you will receive not just one, but <em>three</em>, figures all at an affordable price.  Instead of buying these figures separately, you may order this set, and receive Mario, Luigi and the Star figures!  Playing with all, is more fun than with one, so order now, and start reenacting your favorite Mushroom Kingdom adventures today!</p>
      </div>

      <div class="slide">
        <h2><a>Nintendo Monopoly</a></h2>
        <p><a href="#"><img src="/images/catalog/original/mario_board_games/nintendo_monopoly_1.jpg" width="250" height="145" alt="Nintendo Monopoly" /></a>Nintendo Monopoly replaces traditional and conventional Monopoly pieces with custom Nintendo themed ones, with many straight from the Mushroom Kingdom.  Properties become characters, token pieces become power-ups and items, making this Nintendo Monopoly a great and fun board game for any Nintendo lover, especially the Mario ones.  Order now, and you could be dealing Mario and Luigi today!</p>
      </div>
    </div>
  </div>
  <!-- Slideshow HTML -->

</div>

</div> 

<div id="rightcol"> 

<p>&nbsp;</p> 
  <p>&nbsp;</p> 
    <!-- (c) 2005, 2010. Authorize.Net is a registered trademark of CyberSource Corporation --> <div align="center" id="eznetseal" class="AuthorizeNetSeal"> 
      <div align="center">
        <script type="text/javascript" language="javascript">var ANS_customer_id="5f13eae2-740f-4795-88e0-71ab3c4ceb66";</script> 
        <script type="text/javascript" language="javascript" src="//verify.authorize.net/anetseal/seal.js" ></script> 
        <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Online Payments</a></div>
    </div> 

  <p>&nbsp;</p> 
  <p><img src="images/layout/miscellaneous/creditcards.jpg" alt="Accepted Credit Cards" width="200" height="29"></p> 
  <p>&nbsp;</p> 
  <p><strong>Contact Us:</strong></p> 
  <p><a href="mailto:info@marioplanet.com"info@marioplanet.com">info@marioplanet.com</a></p> 
  <p>&nbsp;</p> 
  <p><strong>Feedback:</strong></p> 
  <p>Questions, comments or concerns? <em>Please</em> let us know so we can serve you better!</p> 
  <p id="feedbacktextlink"><a href="mailto:feedback@marioplanet.com">feedback@marioplanet.com</a></p> 
  <p>&nbsp;</p> 
  <p>&nbsp;</p>
  <p align="center"><img src="images/layout/characters/goomba/goomba.PNG" alt="Goomba" width="105" height="126"></p>
  </div> 

</div>

<div id="footer"> 
  <p class="style7">&nbsp;</p> 
  <p class="style7"><a href="index.htm">Home Page</a> | <a href="catalog.htm">SHOP!</a> | <a href="about.htm">About</a> | <a href="contact.htm">Contact</a> | <a href="privacy_policy.htm">Privacy Policy</a></p>
  <p class="style7">&nbsp;</p>
  <p class="style7">&copy; Copyright 2006-2010 MarioPlanet.com. All Rights Reserved</p> 
  <br /> 
</div>  

</body>



</html>

默认.css:

body {
    background-color: #666666;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
#header {
    background-color: #DDDDDD;
    width: 1130px;
    margin: 0px auto;
}
#content {
    width: 1130px;
    margin: 0px auto;
}
#leftcol {
    background-color:#EBEBEB;
    width: 200px;
    height: 550px;
    font-size:14px;
    clear: both;
    float: left;
}
#detail {
    background-color:#FFFFFF;
    width: 730px;
    height: 550px;  
    font-size:12px;
    float: left;
}
#rightcol {
    background-color:#EBEBEB;
    width: 200px;
    height: 550px;
    font-size:14px;
    float: left;
}
#footer {
    background-color:#DDDDDD;
    width: 1130px;
    height:90px;
    font-size:12px;
    text-align:center;
    clear: both;
    margin: 0px auto;
}
h1 {
    color: #FF0000;
}
h2 {
    color:#FF0000;
}
a:link { 
    color:#FF0000;
}
a:visited { 
    color:#FF0000;
}
a:hover { 
    color:#00FF00;
}
a:active { 
    color:#FF0000;
}
img {
border:none;
}
#eznetseal {
text-align:center;
}
a.trayIcon {
position: relative;
top: 20px;
}
a.trayIcon:hover {
top: 7px;
}
#twittericon {
    left: 0px;  
}
#facebookicon {
    left: 22.5px;;
}
#youtubeicon {
    left: 45px;;
}
#tray {
position:relative;
}
#container {
    position:relative;
    margin-top: -40px;
}
#nav li 
{
 display: inline;
}
#features
{
    vertical-align: top;
}

导航.css:

/* GLOBALHEADER */
#globalheader { width: 771px; height: 37px; margin: auto; position: relative; z-index: 100; }
#globalheader #globalnav { margin: 0; padding: 0; zoom: 1; width: 100%;}
#globalheader #globalnav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 103px; height: 37px; text-indent:-1000em; overflow: hidden; background-image:url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }
#globalheader #globalsearch { background-image: url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }

/* BUTTONS */
#globalheader #globalnav li#gn-home a { background-position: 0 0; }
#globalheader #globalnav li#gn-catalog a { background-position: -103px 0; }
#globalheader #globalnav li#gn-about a { background-position: -206px 0; }
#globalheader #globalnav li#gn-contact a { background-position: -309px 0; }
#globalheader #globalnav li#gn-media a { background-position: -412px 0; }
#globalheader #globalnav li#gn-ipad a { background-position: -515px 0; }
#globalheader #globalnav li#gn-itunes a { background-position: -618px 0; }
#globalheader #globalnav li#gn-support a { background-position: -721px 0; }

/* OVER STATES */
#globalheader #globalnav li#gn-home a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#gn-catalog a:hover { background-position: -103px -38px; }
#globalheader #globalnav li#gn-about a:hover { background-position: -206px -38px; }
#globalheader #globalnav li#gn-contact a:hover { background-position: -309px -38px; }
#globalheader #globalnav li#gn-media a:hover { background-position: -412px -38px; }
#globalheader #globalnav li#gn-ipad a:hover { background-position: -515px -38px; }
#globalheader #globalnav li#gn-itunes a:hover { background-position: -618px -38px; }
#globalheader #globalnav li#gn-support a:hover { background-position: -721px -38px; }

/* PRESSED STATES */
#globalheader #globalnav li#gn-home a:active { background-position: 0 -76px; }
#globalheader #globalnav li#gn-catalog a:active { background-position: -103px -76px; }
#globalheader #globalnav li#gn-about a:active { background-position: -206px -76px; }
#globalheader #globalnav li#gn-contact a:active { background-position: -309px -76px; }
#globalheader #globalnav li#gn-media a:active { background-position: -412px -76px; }
#globalheader #globalnav li#gn-ipad a:active { background-position: -515px -76px; }
#globalheader #globalnav li#gn-itunes a:active { background-position: -618px -76px; }
#globalheader #globalnav li#gn-support a:active { background-position: -721px -76px; }

/* ON STATES */
#globalheader.home #globalnav li#gn-home a:hover { background-position: 0 0; cursor: default; }
#globalheader.store #globalnav li#gn-catalog a { background-position: -103px -114px !important; }
#globalheader.mac #globalnav li#gn-about a { background-position: -206px -114px !important; }
#globalheader.ipod #globalnav li#gn-contact a { background-position: -309px -114px !important; }
#globalheader.iphone #globalnav li#gn-media a { background-position: -412px -114px !important; }
#globalheader.ipad #globalnav li#gn-ipad a { background-position: -515px -114px !important; }
#globalheader.itunes #globalnav li#gn-itunes a { background-position: -618px -114px !important; }
#globalheader.support #globalnav li#gn-support a { background-position: -721px -114px !important; }

a:active { 

}

我的网站是:http://www.marioplanet.com/

非常感谢任何帮助!

谢谢!

最佳答案

id 为 gn-support 的 li 换行到下一行，你给它一个固定的高度，尽管它是空的。

关于html - 删除不需要的空间，使我的导航栏和 <div> 变得无聊，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3490763/

25 4 0
文章推荐： css - 道场 claro 和 sizing
文章推荐： html - Apple 主题的导航菜单栏 CSS 问题
文章推荐： javascript - jCarousel + jQuery Accordion + fadeIn
文章推荐： css - 将两个图像放置在网页的上 Angular 而不重叠
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com