个人中心
gpt4 book ai didi

html - 背景和菜单栏在宽屏上不成比例......我不想要这个

转载 作者：行者123 更新时间：2023-11-28 13:12:36 24 4
gpt4 key购买 nike

我一直在研究，但我不确定如何寻找我想要的东西。我正在学习 HTML 和 CSS 的第一个学期。我的页面在我的 15 1/2 英寸显示器上看起来很棒......但是当我将它移到我的 19 1/2 显示器上时，它会在右侧添加另一部分背景图像，并在整个距离上拉伸(stretch)菜单栏。我在寻找什么代码可以使页面在更宽的屏幕上保持完整，或许可以在每一侧添加彩色(或空白)边框？感谢您的帮助。

感谢 Brad 和 Fiddle 的帮助。不重复有助于背景，但是，在更大的显示器上，我的菜单栏想要清楚地穿过，而 .box 和 img.posit 想要坚持到最左边。我宁愿他们根据背景图片保持测量。

样式表:

body    {font-family:Arial, Verdana, Garamond; 
        background-image: beach.jpg; background-repeat: no-repeat; background-position: center;}


a       {text-decoration: none;
        color: #FF4D10; font-size: 14pt;}

a:hover {background-color: white;}

.menu   {position:center;
        text-align: center;
        width: 100%; margin: 0; text-decoration: none;}

        .menuword   {width: 10%; background-color: beach.jpg; font-weight: 500; text-decoration: none;}

        .menuwordselect {width: 10%; font-weight: bolder; font-style: italic; text-decoration: none;}

        .menupipe   {width: 0%; font-weight: bolder;}

.box        {width: 400px; margin-left: 25px; margin-top: 100px; border-radius: 7px; background-color: #ffff9c; padding: 10px; color: #303032;}
            /* set styles for class named box to position the image */      

img.posit   {position: relative; left: 550px; top: -435px }
            /* sets styles for class named posit to position the image */

非常感谢您的帮助:)

Brad...这是页面的代码...

<body background="beach.jpg">
<div style="text-align: center;">
    <img src="Oahu banner.jpg" width="995" height="295">


    <table class="menu">
            <tr>
                <td class="menuword"><a href="sitemap.html">Waikiki</a></td>
                <td class="menupipe">|</td>
                <td class="menuword"><a href="script.html">North Shore</a></td>
                <td class="menupipe">|</td>
                <td class="menuword"><a href="cast.html">Cultural and Historical</a></td>
                <td class="menupipe">|</td>
                <td class="menuword"><a href="costumes.html">Best Deal Ever</a></td>
                <td class="menupipe">|</td>
                <td class="menuword"><a href="set.html">More Info</a></td>
                <td class="menupipe">|</td>
                <td class="menuword"><a href="props.html">Site Map</a></td>

            </tr>
    </table>

</div>

<div>
    <p class="box">Oahu known as "The Gathering Place", is the third largest of the Hawaiian Islands and home to more than 950,000 people, almost 75% of the U.S. state of Hawaii's population. The state capital, Honolulu, is on Oahu's southeast coast. In the greatest dimension, this volcanic island is 44 miles (71 km) long and 30 miles (48 km) across. The length of the shoreline is 227 miles (365 km). The island is the result of two separate shield volcanoes: Wai'anae and Ko'olau, with a broad "valley" or saddle, the Oahu Plain between them. The highest point is Mt. Ka'ala in the Wai'anae Range, rising to 4,003 feet (1,220 m) above sea level.
    <br><br>
    But there is more to Oahu than just height and width.  Honolulu, the state's capital, not only displays an impressive skyline of highrises, but also the beautiful beach of Waikiki, where Duke Kahanamoku "the father of surfing" developed his surfing and swimming skills.  
    <br><br>Across the pineapple fields at the middle of the island, the North Shore is home to modern day world renown surfing competitions, prolific fruit plantations and a quiet, rural lifestyle for many residents.
    <br><br>The cultural heritage of the native peoples is richly preserved in many world class museums, libraries and attractions.  Pearl Harbor as an important piece of our American history is a must see stop for all visitors.

    <br><br>There is something for everyone on this beautiful tropical island.  Come vist and Hang Loose in Oahu!</p>

    <img  class="posit" src="waterfallbig.jpg" width="513" height="386" alt="Waterfall" />
</div>
</body>

最佳答案

你需要background-repeat: no-repeat因为默认情况下背景图像在垂直和水平方向重复。

对于你问题的第二部分，听起来你想要 background-position: center .这将使图像在垂直和水平方向居中，并在图像周围留出空间。或者，您可以设置 background-color随心所欲。

CSS

background: url("http://placehold.it/300x18") no-repeat center (whatever color you want);

JSFiddle

关于html - 背景和菜单栏在宽屏上不成比例......我不想要这个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15329461/

24 4 0
文章推荐： jquery - 加载 Jquery 的 jkit 画廊问题
文章推荐： javascript 函数 this 和原型(prototype)
文章推荐： javascript - react : How to check the type of a child in the parent's render function?
文章推荐： javascript - jQuery 奇怪的 Bootstrap 行克隆行为