0

现在，我是一个真正的初学者，刚刚开始，弄清楚事情，测试和尝试 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;
}
4

3 回答 3

1

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

顺便说一句：浏览器支持background-size值contain和cover：

  • 铬 3.0
  • 火狐 (Gecko) 3.6 (1.9.2)
  • 互联网浏览器 9.0
  • 歌剧 10.0
  • Safari (WebKit) 4.1 (532)

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

到您的虚线边框：您可以为这种布局使用水平重复的背景图像，或者为包装元素设置实线边框，为内部导航元素设置虚线边框。

于 2012-11-14T20:38:00.997 回答
0

你试穿吗

#navigation
{
width: auto;
}

?

于 2012-11-14T20:36:47.160 回答
0

导航项目的边距属性需要是 % 或 em。现在，您已将它们明确设置为像素。这可以防止他们“缩放”

如果您使用静态 html 或从数据库中派生它们，您需要做的就是：

(100 / #ofNavs) /2 = 左 || 右边距值。

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

于 2012-11-14T20:42:05.457 回答