个人中心
gpt4 book ai didi

html - 做个类(class)网站，背景图比我需要的高？

转载 作者：太空宇宙 更新时间：2023-11-03 18:30:18 25 4
gpt4 key购买 nike

在我的 CSS 中，redbar.png 图像变得比它需要的更高(位于#container 中)。它越过我的水平导航，不应该越过我的机器人，我完全确定如何让它消失。任何提示将不胜感激!

这是有问题的网站:http://cit.macc.edu/~nduncan/tut4/case2/redball.htm

这是我的 HTML 代码。 

    <!DOCTYPE html>
    <html>

    <head>

    <meta charset="UTF-8" />
    <title>Red Ball Pizza</title>
    <script src="modernizr-1.5.js"></script>
  <link href="pizza.css" rel="stylesheet" type="text/css" />

    </head>

    <body>
    <div id="container">
     <header><img src="rblogo.png" alt="Red Ball Pizza" /></header>

     <nav class="horizontal">
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Menu</a></li>
           <li><a href="#">Locations</a></li>
           <li><a href="#">Catering</a></li>
           <li><a href="#">About Us</a></li>
        </ul>
     </nav>

     <nav class="vertical">
        <ul>
           <li><a href="#">Pizza</a></li>
           <li><a href="#">Salad</a></li>
           <li><a href="#">Pasta</a></li>
           <li><a href="#">Sandwiches</a></li>
           <li><a href="#">Appetizers</a></li>
           <li><a href="#">Pocket Pizzas</a></li>
           <li><a href="#">Fish &amp; Shrimp</a></li>
           <li><a href="#">Chicken &amp; Wings</a></li>
           <li><a href="#">Beverages</a></li>
           <li><a href="#">Dessert</a></li>
           <li><a href="#">Catering</a></li>
           <li><a href="#">Download Menu</a></li>
           <li><a href="#">Catering Menu</a></li>
        </ul>
      </nav>

      <section id="main">
        <img src="toppings.png" alt="" />
        <p>At Red Ball Pizza, we want to satisfy every appetite. That's 
           why our menu contains a variety of different items. With 
           so many choices, everyone's favorites are available!
        </p>
        <p>
           Red Ball Pizza is NOT a franchise, a chain, or a corporation. 
           It is 100% locally owned and operated. Red Ball Pizza is 
           devoted to providing the highest quality and the best service 
           possible. Our only goal is to provide you with a great 
           pizza &#8230; EVERY TIME!
        </p>

        <div class="coupon">
           <h1>Classic Combo</h1>
           <p>16" 1-Topping Pizza
              &amp; a 2-Liter of Your Choice
              For Only $14.99
           </p>
           <p>Expires 3/14</p>
        </div>
        <div class="coupon">
           <h1>Pizza &amp; Stix</h1>
           <p>16" Specialty Pizza
              Reg. Cheese Stix &amp; a 2-Liter
              For Only $21.99
           </p>
           <p>Expires 3/14</p>
        </div>
        <div class="coupon">
           <h1>1/2 Price</h1>
           <p>Buy any 16" Specialty Pizza
              at Reg. Price &amp; Get a 2nd
              Pizza For Half Price
           </p>
           <p>Expires 3/14</p>
        </div>
        <div class="coupon">
           <h1>Pizza &amp; Wings</h1>
           <p>14" 2-Topping Pizza 
              &amp; 12 Wings
              For Only $15.99
           </p>
           <p>Expires 3/31</p>
        </div>
        <div class="coupon">
           <h1>$3.00 Off</h1>
           <p>Get $3.00 Off
              any 16" Pizza at
              Menu Price
           </p>
           <p>Expires 3/31</p>
        </div>
        <div class="coupon">
           <h1>Sub Dinner</h1>
           <p>1 Toasted Sub &amp; Chips
              &amp; 1 20oz Soda
              For Only $6.99
           </p>
           <p>Expires 3/31</p>
        </div>
     </section>

     <aside>
        <h1>Pizza Pizzazz</h1>
        <ul>
           <li>93% of Americans eat pizza at least once a month.</li>
           <li>Mozzarella was originally made from the milk of Indian 
               water buffalo in the 7th century.</li>
           <li>75 acres of cheese is eaten every day.</li>
           <li>23 pounds of cheese is eaten every year by the average 
               person.</li>
           <li>The tomato was brought back to Italy by Spaniards returning 
               from Mexico in the 16th century.</li>
           <li>The busiest night for take-out pizza orders is Halloween.</li>
            <li>The first pizzeria opened in 1830 in Naples, Italy. </li>
        </ul>
     </aside>

     <footer>
        <address>
           Red Ball Pizza &bull;
           811 Beach Drive &bull;
           Ormond Beach, FL  32175 &bull;
           (386) 555 - 7499 
        </address>
     </footer>

     </div>

     </body>

     </html>

这是我的 CSS。问题在于#container。 

    header, section, aside, footer, nav {
    display: block;

    }


    /* body styles */

    body {
    background-color: red;
    font-family: Verdana, Geneva, sans-serif;
    padding: 0px;
    margin: 0px;
    }


    #container {
    width: 1000px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid black;
    border-right: 1px solid black;
    background: white url(redbar.png) top left repeat-y;
    }

    #container header {
    background-color: white;
    height: 100px;
    }

    #container  nav.horizontal {
    height: 70px;
    width: 100%;
    background-color: white;
    }

    #container  nav.horizontal ul li{
    background-color: white;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    width: 180px;
    display: block;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    }

    #container  nav.horizontal ul li a{
    display: block;
    background-color: red;
    color: white;
    text-decoration: none;
    border-radius: 30px / 25px; 
    }

    #container  nav.horizontal ul li a:hover {
    background-color: rgb(255,101,101);
    color: black;
    }

    #container nav.vertical {
    float: left;
    clear: left;
    width: 200px;
    }

    #container nav.vertical ul li {
    list-style-type: none;
    text-indent: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    }

    #container nav.vertical ul li a {
    color: white;
    text-decoration: none;
    }

    #container nav.vertical ul li a:hover {
    color: black;
    }

    #main {
    background-color: rgb(255,211,211);
    float: left;
    width: 600px;
    }

    #main p {
    font-size: 20px;
    margin: 15px;
    }

    #main img{
    float: right;
    margin: 15px;
    width: 350px;
    border-bottom-left-radius: 350px;
    }

    #main div.coupon {
    border: 5px dashed black;
    float: left;
    width: 170px;
    height: 150px;
     margin-top: 20px;
     margin-bottom: 20px;
     margin-left: 10px;
     margin-right: 10px;
     background-image: url(slice.png), url(notice.png);
     background-position: center, bottom right;
     background-repeat: no-repeat;
     background-color: white;
     }

    #main div.coupon h1 {
    color: white;
    background-color: rgb(192,0,0); 
    font-size: 16px;
    letter-spacing: 2px;
    text-align: center;
    height: 25px;
    font-variant: small-caps;
    }

    #main div.coupon p{
    font-size: 14px;
    text-align: center;
    margin: 5px;
    }

    aside {
    float: left;
    width: 200px;
    }

    aside h1 {
    color: rgb(192,0,0);
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: normal;
    text-align: center;
    }

    aside ul li {
    background-color: rgb(255,135,135);
    border-radius: 5px;
    color: black; 
    list-style-type: none;
    margin: 10px;
    padding: 5px;
    }

    footer {
    margin-left: 200px;
    clear: left;
     }

    footer address {
    border-top: 1px solid red;
    color: red;
    font-size: 10px;
    font-style: normal;
    text-align: center;
    margin-top: 25px;
    padding-bottom: 20px;
    }

最佳答案 

 #container nav.horizontal {
     margin-top: -16px;
 }

将此添加到 CSS。

关于html - 做个类(class)网站，背景图比我需要的高？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19964369/

25 4 0
文章推荐： javascript - 大背景图像交换
文章推荐： c# - 传递引用和引用
文章推荐： c# - 如何在 Linq 中使用哈希表
文章推荐： html - 想要将营销 div 居中并在其周围放一个框 - 使用 Bootstrap
太空宇宙
个人简介

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

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