初學html/css網站佈局

-1

現在，我是一個真正的初學者，剛開始，搞清楚事情，測試並嘗試html和css。我想做出或多或少的東西（見圖片）。我希望它能夠完全縮放以適應瀏覽器/分辨率保持寬高比。初學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; 
}

來源

2012-11-14 IAMNEW

你期望字體大小能夠縮放嗎？ –

您可以在導航中製作另一個邊框並製作邊框樣式：虛線 – IAMTHESTIG

您的問題很模糊，請更清楚地說明實際的實際問題。 –

您需要將導航元素的任何寬度，高度，邊距和填充設置爲百分比值。也許還可以將百分比值設置爲font-size。只需使用數字來查看這些如何影響您的佈局。總之，不要爲佈局使用固定的像素值。您可以使用它們來設計佈局中的單個按鈕或類似元素。

BTW：

的Chrome 3.0
火狐（壁虎）3.6（1.9.2）
的Internet Explorer 9.0
歌劇院10.0
：爲background-size值contain和cover瀏覽器支持Safari（WebKit）4.1（532）

（截至https://developer.mozilla.org/en-US/docs/CSS/background-size說明）

要在虛線邊框：你可以使用一個水平重複背景圖像這樣的佈局，或者你定了堅實的邊界的包裝元素，虛線邊框內的導航元素。

來源

2012-11-14 20:38:00 feeela

謝謝，這對我來說真的很有用:)我會嘗試將值更改爲％。 – IAMNEW

你嘗試

#navigation 
{ 
width: auto; 
}

？

來源

2012-11-14 20:36:47

是的，我試了一下，「自動」的導航欄只在菜單按鈕下方，所以它結束了導航按鈕的位置。（只覆蓋頁面寬度的一半） – IAMNEW

您的導航項的邊距屬性需要爲％或em。現在你讓它們明確地設置爲像素。這是防止他們「縮放」

如果你使用靜態的HTML或從數據庫中的所有你需要做得出他們是：

（100/#ofNavs）/ 2 =左||右邊界值。

如果您使用邊框或類似的東西，您需要將其添加到您的數學數學中。

來源

2012-11-14 20:42:05

謝謝，我會試着用％。 – IAMNEW

初學html/css網站佈局

回答

相關問題