Question

现在，我是一个真正的初学者，刚开始，搞清楚事情，测试和尝试html和css。我想做一些或多或少的东西（见图）。我希望它能够完全缩放以适应保持宽高比的浏览器/分辨率。

我的html和css代码如下。背景图像可以很好地缩放，但现在我希望我的导航以相同的方式缩放。怎么做？有什么改变？我还希望在实体下面有一条虚线（在导航上方）。有什么建议？ :)刚开始/学习/犯错误:)）

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My Layout</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        </head>
        <body>
        <div id="navigation">
        <ul>
            <li> <a href="#"> HOME </a></li>
            <li> <a href="#"> O MNIE </a></li>
            <li> <a href="#"> PORTFOLIO </a></li>
            <li> <a href="#"> OFERTA </a></li>
            <li> <a href="#"> STREFA ŚLUBNA </a></li>
            <li> <a href="#"> PUBLIKACJE </a></li>
            <li> <a href="#"> WSPOŁPRACA </a></li>
            <li> <a href="#"> BACKSTAGE </a></li>
            <li> <a href="#"> KONTAKT </a></li>
    </ul>
    </div>
    </body>
</html>

和css：

html 
{ 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#navigation
{
    width: 100%;
    height: 60px;
    background-color: black;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0 0 0;
    position: absolute;
    bottom: 0px;
    border-top-style: solid;
    border-color: white;
    border-width: thin;
}
#navigation ul
{
    list-style-type: none;
    float: right;
    margin-left: auto;
    margin-right: auto;
}
#navigation ul li
{
    float: left;
    list-style: none;
    margin-left: 18px;
    margin-right: 18px;
}
#navigation li a
{
    color: #FFF; 
    text-decoration:none;
    font-family: "Calibri";
    text-transform:uppercase;
}

#navigation li a:hover
{
    text-decoration:none;
    color: #F69;
}
#navigation li a:active
{
    color: #F69;
}

Answer 1

你试试

#navigation
{
width: auto;
}

Answer 2

您需要将导航元素的任何宽度，高度，边距和填充设置为百分比值。也许还会将百分比值设置为font-size。只需使用数字来查看数字会如何影响您的布局。简而言之，不要使用固定像素值进行布局。您可以使用它们设置布局中单个按钮或类似元素的样式。

BTW：浏览器支持background-size值contain和cover：

Chrome 3.0
Firefox（Gecko）3.6（1.9.2）
Internet Explorer 9.0
Opera 10.0
Safari（WebKit）4.1（532）

（如https://developer.mozilla.org/en-US/docs/CSS/background-size所述）

对于虚线边框：您可以使用水平重复的背景图像进行此类布局，或者将实体边框设置为包装元素，并将虚线边框设置为内部导航元素。

Answer 3

导航项的边距属性必须为％或em。现在你将它们明确设置为像素。这阻止了他们“缩放”</ p>

如果您正在使用静态html或从数据库派生它们，您只需执行以下操作：

（100 / #ofNavs）/ 2 =左||正确的保证金价值

如果您使用边框等，则需要将其添加到图形数学中。

初学者html / css网站布局

3 个答案: