請查看以下圖片:Dreamweaver設計和實時視圖顯示不同的東西?
http://gyazo.com/c3ffe1d0a48b717f695d7cbd860eda50.png(設計視圖) http://gyazo.com/a1e09aacc855c013d349017d0487402d.png(直播&瀏覽器視圖)
正如你可以在已置於頁面看上去很好,而且設計視圖一切看也是正是我想要的!但是當我在網絡瀏覽器中進行實時查看或預覽時,它會以不同方式顯示,其中一些內容與我的導航有重疊。我真的不知道該怎麼辦?我將在下面顯示我的代碼:
HTML:
<nav>
<ul>
<li> <a href="index.html">Home</a></li>
<li> <a href="news.html">News</a></li>
<li> <a href="events.html">Events</a></li>
<li> <a href="galleries.html">Galleries</a></li>
<li> <a href="videos.html">Video </a></li>
<li> <a href="history.html">History</a></li>
<li> <a href="contact.html"> Contact</a></li>
</ul>
</nav>
<div id="contactheader">
<p>Get in touch with FIFAScene: </p>
</div>
<p> </p>
<div id="contactcontent">
<p>If you have any feedback regarding our website, or wish to comment on anything FIFA eSport related, then please contact us via:</p>
</div>
<p> </p>
<p> </p>
<ul>
<div id="contacthotmail">
<li>[email protected]<img src="images/icons/outlook.png" width="112" height="95"></li>
</div>
<div id="contactsm">
<li><a href="http://www.twitter.com/FIFAScene">www.twitter.com/FIFAScene<img src="images/icons/twitter.png" width="94" height="78"></a>
<a href="http://www.facebook.com/FIFAScene">www.facebook.com/FIFAScene<img src="images/icons/facebook.png" width="67" height="63"></a></li>
</div>
</ul>
CSS:
nav {
float:left;
position:relative;
}
nav ul li {
display:block;
margin:20%;
padding:30%;
list-style-type: none;
font-family:Segoe UI Light;
font-size:30px;
text-align: center;
}
#contactheader {
text-align:center;
color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:20px;
}
#contactcontent {
text-align:center;
color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:18px;
}
#contacthotmail {
text-align:center;
color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:18px;
}
#contactsm {
text-align:center;
color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:18px;
margin-top:40px;
}
很抱歉,如果我所提供的信息太多,我是比較新的設計網站和編程!
謝謝。
不要依賴或使用Dreamweaver的設計視圖feauture。渲染事物很糟糕。在本地測試並在瀏覽器中檢查元素以查看它在做什麼。 –
對不起,我不打算聽起來有什麼意思,但「設計視圖」不是瀏覽器,不應該使用。這是排名不知道如何編碼的業餘愛好者。使用真實的瀏覽器和瀏覽器的調試器。 –