Question

我正在尝试使用Dreamweaver CS6设置一个带CSS的垂直导航栏，但我对CSS很新，并且从最近的版本3开始远离Dreamweaver。我在此导航栏中有顶部，中间和底部图像的单独类。我使用this technique将每个按钮的整个div作为链接。

中间按钮在设计视图，实时模式和浏览器预览中显示得很好。但顶部和底部按钮仅出现在设计视图中。所有按钮都可以使用悬停和活动状态。我检查并仔细检查了所有文件路径，清除了Dreamweaver的缓存，然后重新启动了Dreamweaver。

为什么会这样？我该如何解决？

这是相关的源代码。我正在使用12列960 grid系统。

<!-- This is inside a container_12 div with the site's header/navigation, then a clear, then an <h3> -->
<div class="container_12">
    <!-- Header with site's logo and navigation goes here -->

    <div class="clear"></div>

    <h3>Page header</h3>

    <div class="grid_9 prefix_2 suffix_1">
        <!-- Several paragraphs of copy using <p> tags -->

        <div class="homePageVerticalButtonTop">
            <div class="verticalNavigationText"><a style="display:block" href="top.html">top link</a></div>
        </div>
        <div class="homePageVerticalButtonMiddle">
            <div class="verticalNavigationText"><a style="display:block" href="middle1.html">middle link 1</a></div>
        </div>
        <!-- Several more middle links -->
        <div class="homePageVerticalButtonBottom">
            <div class="verticalNavigationText"><a style="display:block" href="bottom.html">bottom link</a></div>
        </div>
    </div>
</div> <!-- end container_12 -->

这是相关的CSS：

.homePageVerticalButtonTop {
    /* Why is the background not showing up? */
    background: url(../images/homePageTopButton_normal.png) no-repeat left top;

    width: 24.125em;
    height: 4.125em;
    background-size: 100%;

    display: block;
}

.homePageVerticalButtonTop:hover {
    /* This works fine */
    background: url(../images/homePageTopButton_mouseOver.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

.homePageVerticalButtonTop:active {
    /* So does this */
    background: url(../images/homePageTopButton_mouseDown.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

.homePageVerticalButtonMiddle {
    /* And so does the rest of these even though homePageVerticalButtonMiddle and homePageVerticalButtonTop are analogous cases and both PNGs are there. */
    background: url(../images/homePageMiddleButton_normal.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

.homePageVerticalButtonMiddle:hover {
    background: url(../images/homePageMiddleButton_mouseOver.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

.homePageVerticalButtonMiddle:active {
    background: url(../images/homePageMiddleButton_mouseOver.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

/* Bottom omitted for brevity, but it's analogous to Top and only works on the hover and active states too. */

.verticalNavigationText {
    color: #FFFFFF;
    font-family: inherit;
    font-size: 1.75em;
    padding: 0.59375em 0 0.59375em 0.625em;
}

修改：请保留主题的答案，解决这些图片丢失的原因。

Answer 1

预览永远不应该信任Dreamweaver，并且它自己的行为无关紧要，因为其他人都将使用浏览器。话虽这么说，你的设计模式需要一点关注。

<div class="homePageVerticalButtonTop">
    <div class="verticalNavigationText"><a style="display:block" href="top.html">top link</a></div>
</div>

可以更清楚地表达为：

<div class="homePageVerticalButtonTop">
  <a href="top.html">top link</a>
</div>

您应用于链接的CSS可以表示为：

.homePageVerticalButtonTop a {
     display:block
}

...和链接的其他样式应放在那里，例如应用于冗余“verticalNavigationText”div的样式。避免使用内联CSS。

为什么即使图像存在，浏览器预览中也缺少div的CSS背景图像？

1 个答案: