文章/答案/技术大牛

发布

社区首页 >问答首页 >Dreamweaver设计和实时视图显示了不同的东西？

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

Stack Overflow用户

提问于 2013-08-24 01:33:02

回答 2查看 10.1K关注 0票数 0

请查看以下图片：

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;

}

抱歉，如果我提供了太多的信息，我是设计网站和编程的新手！

谢谢。

html

css

回答 2

Stack Overflow用户

发布于 2013-08-24 02:23:41

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

如果你真的想看到你的css和定位的实时预览，你可以在网页检查器中做一些。如果你有一台苹果电脑，你应该考虑看看macrabbit上的Espresso http://macrabbit.com/espresso/。

此外，要注意Dreamweaver正在制作的不间断空格返回(<p> </p>)标记，请删除em并改用css。

票数 0

Stack Overflow用户

发布于 2016-01-15 16:36:17

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

display: block;

从而在您键入时增强设计视图的“预见性”。

编辑从这里开始:我自己我使用Design-View来输入内容。它对于某些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 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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18408612

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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