Question

感谢您检查或帮助我解决问题！我正在尝试为http://www.code.org计算机科学周创建一个简单的网页！我正在尝试为页面顶部的导航栏创建基于图像的背景。

这是我到目前为止所做的：

HTML5代码

    <!DOCTYPE html>
    <html>
    <head>
<title>Welcome</title>
<link rel="stylesheet" type="css/text" href="CSstylesheet.css"
    </head>
    <body>
<div>
    <img src="binarybanner.png" id="bannerimg" />
</div>
<div class="h3setup">
    <a href=""><h3 id="GI">General Information</h3></a>
    <a href=""><h3 id="BC">Benefits to Coding</h3></a>
    <a href=""><h3 id="CT">Coding Types</h3></a>
</div>
<div>
    <img src="siteMapButton.png" id="siteMapButton"/>
</div>
    </body>
    </html>

CSS3代码

    /* CSS STYLESHEET */

    h3{
display: inline;
    }
    div.h3setup{
left: 195px;
top: 145px;
position: absolute;
display: inline;
width: 100%;
    }
    div.h3setup a{
text-decoration: none;
    }
    #GI{
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
    }
    #GI:hover{
text-shadow: 3px 3px 3px #99FF66;
    }
    #BC{
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
    }
    #BC:hover{
text-shadow: 3px 3px 3px #99FF66;
    }
    #CT{
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
    }
    #CT:hover{
text-shadow: 3px 3px 3px #99FF66;
    }
    #bannerimg{
height: 200px;
width: 100%;
display: inline;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
    }
    #siteMapButton{
height: 35px;
width: 35px;
float: right;
margin-right: 1px;
    }

当网页最大化时，我得到的是正确的布局，但当我将页面大小调整为一半大小时，Chrome会尝试将图像以及其余元素调整为设置的百分比。据我所知，这是因为使用的百分比，但我担心其他计算机比我目前正在开发的网页更大，因为设置的像素大小无法正确查看它。如何为调整大小的窗口保持网页的最大宽度？我希望调整大小的网页有一个水平导航栏。

Answer 1

您需要的是一个包装器div，它包含您网页中的所有元素并添加min-width。当窗口最小化时，这将防止页面变得太小。

<div id="wrap">
<div class="h3setup">
<ul>
    <li><a href=""><h3 id="GI">General Information</h3></a></li>
    <li><a href=""><h3 id="BC">Benefits to Coding</h3></a></li>
    <li> <a href=""><h3 id="CT">Coding Types</h3></a></li>
</div>
<div>
<img src="siteMapButton.png" id="siteMapButton"/>
</div>
</div<!--end wrap-->

#wrap{
width:100%;
min-width:900px;
margin:0 auto;
}

就您的网页其余部分而言，您应该使用img将图片作为该特定元素的背景，而不是使用background:url('img.png');元素作为背景图片。< / p>

例如：

  .h3setup{
background:url('img.png') no-repeat;
height:200px;
width: 100%;
}

SEE DEMO HERE

我的网页在缩小时不会保留它的宽度

1 个答案: