色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

Dreamweaver設計和實時視圖顯示的內容不同？

CSS
錢淋西2年前8瀏覽0評論

請查看以下圖片:

http://gyazo.com/c3ffe1d0a48b717f695d7cbd860eda50.png(設計視圖) http://gyazo.com/a1e09aacc855c013d349017d0487402d.png(現場& amp瀏覽器視圖)

正如你在設計視圖中看到的，頁面上的所有內容看起來都很好，這也正是我想要的！但當我在網絡瀏覽器中瀏覽實時視圖或預覽時，它的顯示有所不同，有些內容與我的導航重疊。我真的不知道該怎么辦？我將在下面顯示我的代碼:

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>&nbsp;</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>&nbsp;</p>
    <p>&nbsp;</p>

    <ul>
          <div id="contacthotmail">
               <li>FIFAScene@hotmail.com<img src="images/icons/outlook.png" width="112" height="95"></li>
          </div>

          <div id="contactsm">
                 <li><a >www.twitter.com/FIFAScene<img src="images/icons/twitter.png" width="94" height="78"></a>
                 <a >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;

}

抱歉，如果我提供了太多的信息，我對設計網站和編程比較陌生！

謝謝你。

可能您的DW版本沒有將一些HTML5元素視為塊類型元素。作為對程序的讓步，您可以在css中的nav元素中添加一行:

display: block;

從而在您鍵入時嵌入設計視圖的“預測”。

編輯從這里開始: 我自己使用設計視圖來輸入內容。這對于一些UTF字符來說很方便，比如雙引號。我在寫(無序)列表時經常使用它。有時，我用它來輸入內容，而不使用視覺輔助或css。我的建議是把它當作一個工具，但同時打開一個瀏覽器，加載你的文檔。Adobe提供了幾個教程，這些教程提供了在設計視圖中獲得一致的頁面預覽的策略，但這僅僅是。實時視圖提供了更好的標準。

因為一個評論，我嘗試了DW5.5中的代碼。我想看看我能在多大程度上保持nav和main標簽，并讓它們作為浮動。 為了在設計視圖和實時視圖的預覽中保持一致性(在windows上按ALT+11 ),一個清除浮動的包裝器似乎有所幫助。

我嘗試了聯系標志的金字塔布局作為浮動，但我不能沒有太多的喧囂中心下面的兩個鏈接。為了讓這些也居中，我把它們顯示為內嵌塊。

此外，導航列表上的填充項有點奇怪，兩邊各占50%。

html,
body {
  width: 100%;
}
body {
  font: 18px/1.25 "Segoe UI Light";
  color: #0099FF;
}

html, body,
h1, h2, h3, p, ul, li,
div, 
nav, main,
a, img,
a img {
  margin: 0;
  border: none;
  padding: 0;
}

h1 {
  font-size: 2.618em;
  text-align: center;
  padding: 1em 0;
  margin-left: 20%;
  margin-right: 5%;
}

a {
  color: #0099FF;
  text-decoration: none;
}
.wrap {
  width: 100%;
  overflow: hidden;
}
nav, main {
  float: left;
  text-align: center;
}

nav {
  overflow: hidden;
  position: relative;
  width: 20%;
}

main {
  width: 75%;
  text-align: center;
}

ul {
  list-style-type: none;
}


nav ul {
}

nav ul li {
  font-size: 1.666em;
}

nav ul li a {
  display: block;
  line-height: 2.25;
}


.contactheader {
  font-size: 1.666em;
}

.contactcontent {
  font-size: 1em;
}


.contactsms {
  display: inline-block;
  margin: auto;
}

.contactsms ul {
}

.contactsms ul li {
  display: inline-block;
  padding: 1em 1em;
  margin: 0 auto;
}
.contactsms ul li img {
  white-space: nowrap;
  vertical-align: text-bottom;
}

.whiteSpace {
  height: 2em;
}

<div class="wrap">
  <h1>Contact Us</h1>
  <nav>
    <ul>
      <li><a >Home</a></li><!-- 
   --><li><a >Design</a></li><!-- 
   --><li><a >View</a></li><!-- 
   --><li><a >Mess</a></li><!-- 
   --><li><a >Video </a></li><!-- 
   --><li><a >History</a></li><!-- 
   --><li><a >Contact</a></li>
    </ul>  
  </nav>
  <main>
    <div class="contactheader"><p>Get in touch with DreamWeaver:</p></div><!-- contactheader -->
    <div class="whiteSpace"></div><!-- whiteSpace -->
    <div class="contactcontent">
      <p>If you're interested in how the design view could be of help in your <em>'workflow'</em>, its abilities and disabilities, look out for AdobeTV tutorials like:</p>
    </div><!-- contactcontent -->
    <div class="whiteSpace"></div><!-- whiteSpace -->
    <div class="whiteSpace"></div><!-- whiteSpace -->
    <ul>
      <li class="contacthotmail"><a >Taming the Web, Greg Rewis<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Adobe_Systems_logo_and_wordmark.svg/200px-Adobe_Systems_logo_and_wordmark.svg.png" width="112" height="95"></a></li><!--
   --><li class="whiteSpace"></li><!-- 
   --><li class="whiteSpace"></li><!--
   --><li class="contactsms">
        <ul>
          <li><a >StackOverflow: center floats?<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/200px-Stack_Overflow_logo.svg.png" width="94" height="78"></a></li><!-- 
       --><li><a >clearing-floats/louis-lazaris<img src="https://upload.wikimedia.org/wikipedia/en/c/c0/Smashing_Magazine_logo.png" width="67" height="63"></a></li>
        </ul>
      </li>
    </ul>
  </main>
</div>

如果您想使用Dreamweaver，您應該放棄“設計”視圖，養成在瀏覽器中預覽所有內容并使用瀏覽器的web檢查器進行故障排除的習慣。

如果你真的想看到你的css和定位的實時預覽，你可以在網頁檢查器中做一些。如果你有蘋果電腦，你應該考慮看看濃縮咖啡& ltLink & gt麥克瑞比特公司的人。

此外，要小心不中斷的空格返回(& ltp & gt& ampnbsp& lt/p & gt；)標簽，刪除em，改用css。