Question

请查看以下图片：

http://gyazo.com/c3ffe1d0a48b717f695d7cbd860eda50.png（设计视图） http://gyazo.com/a1e09aacc855c013d349017d0487402d.png（实时和浏览器视图）

正如您在设计视图中看到的那样，放在页面上的所有内容看起来都很好，而且也正是我想要的！但是当我进入实时视图或在Web浏览器中预览时，它会以不同的方式显示，其中一些内容与我的导航重叠。我真的不知道该怎么办？我将在下面显示我的代码：

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 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;

}

很抱歉，如果我提供了太多信息，我对设计网站和编程相对较新！

谢谢。

Answer 1

如果您想使用Dreamweaver，您应该放弃设计视图，养成在浏览器中预览所有内容并使用浏览器Web检查器进行故障排除的习惯。

如果您真的想要查看css和定位的实时预览，可以在Web检查器中执行其中一些操作。如果您可以访问Mac，您应该考虑使用macrabbit上的人员查看Espresso http://macrabbit.com/espresso/。

另外，请注意Dreamweaver正在制作的非中断空格返回（<p> </p>）标记，删除em并使用css。

Answer 2

可能你的DW版本没有看到一些HTML5元素作为块类型元素。作为对程序的让步，您可以在css中的nav元素中添加一行：

display: block;

从而使预后成为可能。键入时的设计视图。

编辑从这里开始：我自己使用Design-View来输入内容。它可以方便某些UTF字符，例如双引号。在编写（非）有序列表时我经常使用它。有时我使用它来输入没有启用视觉辅助或css的内容。我的建议是将它用作工具，但是在加载文档的同时打开浏览器。 Adobe提供了几个教程，提供了几乎在设计视图中对页面进行一致预览的策略，但这几乎就是这样。实时视图提供了更好的标准。

由于评论，我尝试了DW5.5中的代码。我想看看我能保持导航和主标签的距离，并将它们作为花车。为了在设计视图和实时视图的预览中保持一定的一致性（在Windows上命中ALT + 11），清除浮动的包装器（参见Louis Lazaris文章的链接）似乎有所帮助。

我尝试将联系人徽标的金字塔布局作为花车，但我无法将下面的两个链接正确地放在中心而没有太多的喧嚣。为了使这些也居中，我将它们显示为内联块。

此外，导航列表中的填充项目有点奇特，双方都有50％。

＆＃13;

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;
}

＆＃13;

<div class="wrap">
  <h1>Contact Us</h1>
  <nav>
    <ul>
      <li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">Home</a></li><!-- 
   --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">Design</a></li><!-- 
   --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">View</a></li><!-- 
   --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">Mess</a></li><!-- 
   --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">Video </a></li><!-- 
   --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">History</a></li><!-- 
   --><li><a href="https://forums.adobe.com/thread/966549?start=0&tstart=0#4269598">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 href="https://video.search.yahoo.com/video/play;_ylt=A2KLqIN1TcNWCF8A2qQsnIlQ;_ylu=X3oDMTBzMmQ2MHUwBHNlYwNzcgRzbGsDdmlkBHZ0aWQDBGdwb3MDMTc-?p=Taming+the+Web+Greg+Rewis+Youtube&vid=5e43e36d0d668c3a7c2e36670d98d1e2&turl=http%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOVP.V42f1ecfd29e64dec6b34ac147dacb021%26pid%3D15.1%26h%3D168%26w%3D300%26c%3D7%26rs%3D1&rurl=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DvabpQhJD3FA&tit=HTML5+%26+CSS3+with+Dreamweaver+CS5+-+Part+1&c=16&h=168&w=300&l=572&sigr=11bcfkama&sigt=11a5a8ev8&sigi=1310fh8ok&age=1275343369&fr2=p%3As%2Cv%3Av&fr=yhs-mozilla-002&hsimp=yhs-002&hspart=mozilla&tt=b">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 href="http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements">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 href="https://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/">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>

＆＃13;

Dreamweaver的设计和实时视图展示了不同的东西？

2 个答案: