我正在嘗試創建最適合最常見屏幕分辨率的網站。我只想有一個基本的例子來解決問題。現在,我正在創建一個導航欄。這裏是HTML和CSS:正確調整網站的大小
<div id="menuBar">
<a href="/"> <img id="lmlogo" src="/img/lmlogo.jpg" /></a>
<div id="labels">
<a id="about" href="/about.html">about</a>
<a id="tour" href="/tour.html">tour</a>
<a id="recent_jobs" href="/recent.html">recent jobs</a>
<a id="success_stories" href="/stories.html">success stories</a>
<a id="contact" href="/contact.html">contact us</a>
<a id="blog" href="blog.html">blog</a>
</div>
<img id="linkedinlogo" src="/img/linkedinlogo.jpg" style="" />
</div>
*------------Menu Bar---------------*/
#lmlogo{
top:.5em;
left:.5em;
position:relative;
}
#linkedinlogo{
top:15px;
right:5px;
position:absolute;
}
#about{
position:relative;
top:0%;
text-decoration:none;
font-weight:600;
font-size:2em;
font-family: "Myriad Pro", "Lucida Sans Unicode", Arial, sans-serif;
letter-spacing: -1px;
padding-left:.9em;
}
#tour{
position:relative;
top:0%;
text-decoration:none;
font-weight:600;
font-size:2em;
font-family: "Myriad Pro", "Lucida Sans Unicode", Arial, sans-serif;
letter-spacing: -1px;
padding-left:.9em;
}
#recent_jobs{
position:relative;
top:0%;
text-decoration:none;
font-weight:600;
font-size:2em;
font-family: "Myriad Pro", "Lucida Sans Unicode", Arial, sans-serif;
letter-spacing: -1px;
padding-left:.9em;
}
#success_stories{
position:relative;
top:0%;
text-decoration:none;
font-weight:600;
font-size:2em;
font-family: "Myriad Pro", "Lucida Sans Unicode", Arial, sans-serif;
letter-spacing: -1px;
padding-left:.9em;
}
#contact{
position:relative;
top:0%;
text-decoration:none;
font-weight:600;
font-size:2em;
font-family: "Myriad Pro", "Lucida Sans Unicode", Arial, sans-serif;
letter-spacing: -1px;
padding-left:.9em;
}
#blog{
position:relative;
top:0%;
text-decoration:none;
font-weight:600;
font-size:2em;
font-family: "Myriad Pro", "Lucida Sans Unicode", Arial, sans-serif;
letter-spacing: -1px;
padding-left:.9em;
}
這看起來對我的筆記本電腦(1600×900),但很好,當我降低它開始沒有看起來那麼好分辨率(字體犯規尺寸好,間距問題等),我該怎麼辦不管分辨率和屏幕尺寸如何,保持類似的外觀?
感謝 傑森
您的樣式似乎不符合您的標記。 – unrelativity