0

我创建的页面似乎有问题。

我在该部分内部编写了 CSS 代码<style type="text/css>...</style>，添加了背景图像，然后继续编写我的 CSS。到目前为止，背景 img 正在工作。

在我剪切/粘贴 CSS 代码并从内部样式表切换到外部样式表并<link rel="stylesheet" type="text/css" href="main.css"/>创建了一个main.css文件后，我得到了来自浏览器（Chrome v.29 和 Firefox v.23）的惊人响应：

我在页面中创建的框的背景图像和所有分配的图像都消失了！

所以我的页面只剩下文字和按钮......

这是代码：

HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<title>Hotel Prague</title>
</head>
<body>
<div id="pageBody">
<!-- ** HEADER ** -->
    <div id="header">
    <img src="img/logo.png" alt="Logo" class="logo"/>
  <form action="" method="get" name="Search">
        <input type="search" value="Search our site..." />
        <input type="image" value="image" src="img/searchImg.png" />
    </form>
    </div>
<!-- END HEADER -->

<!-- ** NAVIGATION MENU ** -->    
    <nav>
        <table>
            <tr>
                <td class="menuItem"><a href="">Menu Link</a></td>
                <td class="menuSep"></td>
                <td class="menuItem"><a href="">Menu Link</a></td>
                <td class="menuSep"></td>
                <td class="menuItem"><a href="">Menu Link</a></td>
                <td class="menuSep"></td>
                <td class="menuItem"><a href="">Menu Link</a></td>
                <td class="menuSep"></td>
                <td class="menuItem"><a href="">Menu Link</a></td>
                <td class="menuSep"></td>
                <td class="menuItem"><a href="">Menu Link</a></td>
        </table>    
    </nav>
<!-- END NAV MENU -->

<!-- ** CONTENT ** -->    
    <div id="content">
        <aside>
            <div class="box1"><h3>PRAGUE</h3>
                        <h3>TODAY TRIPS</h3>

                        <img src="img/tripsPic.png" alt="images"/>

                        <div class="tripText"><h4>Charles Bridge trip</h4>
                        <p>Phasellus at tellus nec velit vestibulum dapibus vestibulum et sapien. Sed eu ipsum risus. Aenean iaculis, lacus non scelerisque hendrerit, </p></div></div>

        <div class="box2">
            <h3>ROOM RESERVATION <span class="green">ONLINE</span></h3>

            <p>Current free rooms:</p>

            <img src="img/reservationPic1.png">
            <p>Fusce imperdiet enim ac dui imperdiet, eget fermentum lorem scelerisque.</p>
            <input type="submit" value="Reserve" name="Reserve">


            <img src="img/reservationPic2.png">
            <p>Integer eu neque quis mi rutrum tristique.</p>
            <input type="submit" value="Reserve" name="Reserve">


            <img src="img/reservationPic3.png">
            <p>Maecenas nec est vel magna placerat posuere at ac nulla.</p>
            <input type="submit" value="Reserve" name="Reserve">
        </div>

        <article>
            <h1>HEADLINE</h1>
            <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et ligula sagittis, accumsan massa fermentum, lobortis quam. Sed semper magna in augue viverra commodo. Nam eget tristique est, eget suscipit lacus. Morbi volutpat nibh a eros dapibus gravida. Phasellus ut lacus pharetra, adipiscing nunc et, sodales justo. Integer convallis, nisi tempor ultricies pharetra, mi massa pharetra enim, sed varius odio arcu eu mauris. Suspendisse tellus elit, lacinia sed nunc et, porttitor vehicula lorem. Etiam viverra risus interdum enim blandit viverra. Nullam nec enim eros. Integer condimentum malesuada mi ut condimentum. Aliquam erat volutpat. Donec adipiscing ultrices vehicula. Aliquam erat volutpat.</p>

<p>Quisque condimentum nisl vitae laoreet pellentesque. Nullam in nisi vitae felis ultrices ullamcorper et quis purus. Suspendisse pretium rutrum enim, ut volutpat justo auctor eget. Nulla ut scelerisque mi. In viverra varius augue, in mollis ante euismod a. Duis in lacinia lacus, sit amet pharetra sapien. Proin sed lectus tortor. Ut ultrices urna ac placerat mollis. Curabitur molestie neque vel rutrum pulvinar. Ut sed massa condimentum, condimentum ante ac, pharetra odio. Sed augue ipsum, sagittis ut lobortis sed, commodo at lectus. Nam consequat ligula in mollis consequat.</p>

<p>Morbi nibh arcu, porttitor pellentesque massa eget, convallis aliquet massa. Nulla quis felis ante. Donec eu dui elit. Ut pretium lorem in risus feugiat porta. Aenean euismod eros id dictum consectetur. Curabitur bibendum augue vel tortor bibendum bibendum. Vivamus enim ante, egestas at enim nec, vehicula gravida nisi. Aliquam sit amet pretium lectus. Proin eget gravida felis, ut vehicula purus. Integer quis sem in odio pretium egestas. Praesent interdum risus quis ante dictum facilisis. Phasellus et cursus nisl.</p>

<p>Aenean dignissim nisi non arcu fermentum, ut ultricies nibh eleifend. Quisque non dignissim orci. Fusce congue semper diam elementum euismod. Donec aliquet eu justo at scelerisque. Quisque vel quam vel nisl tincidunt elementum eget ut leo. Nunc et leo vel arcu ultrices tempus eget ut tellus. Morbi laoreet suscipit scelerisque. Donec tempor tortor sapien, ut lacinia dui mattis egestas. Morbi et libero ac justo vestibulum venenatis eget mattis ante. Vivamus volutpat dictum purus eget consequat.</p>

<p>Nulla mattis aliquet tincidunt. Aliquam tellus velit, sodales ut nunc eu, mollis tempus tortor. Suspendisse viverra enim risus, ac accumsan dui placerat ut. Curabitur dapibus eget magna vitae varius. Praesent nec molestie metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius dolor et ornare dignissim. Nunc dignissim malesuada pretium. </p>
        </article>
    </div>
<!-- END CONTENT -->

<!-- ** FOOTER ** -->    
    <div id="footer">
    </div>
<!-- END FOOTER -->    
</div>
</body>
</html>

和CSS

/* CSS Document */
/*
BACKGROUND (pic and font)
*/
body {
    background: url('img/wallpaper.png') no-repeat scroll center;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 66px;
    margin-right: 66px;
}

/* THE PAGE BODY */
#pageBody {
    background: url('img/pageBg.png') no-repeat;
    width: 913px;
    margin: 0 auto;
}

/* THE LOGO */
#pageBody #header .logo {
    padding: 46px 629px 22px 50px;
}

/*** THE FORM AND IT'S INPUTS ***/
#header {
    position: relative;
}

#header form input[type="search"] {
    background: url('img/searchBgWide.png') center repeat-x;
    border: none;
    width: 282px;
    height: 34px;
    padding-left: 10px;
    font-weight: bold;
    font-style: italic;
    position: absolute;
    top: 18px;
    right: 59px;    
}

#header form {
    position: absolute;
    top: 45px;
    right: 45px;
}

/*** THE NAVIGATION MENU ***/
nav table {
    width: 100%;
    height: 51px;
    border-collapse: collapse;
}


nav table tr .menuItem {
    line-height: 51px;
    background: url('img/MenuBg.png');
    text-align: center;
}

nav table tr .menuSep {
    background: url('img/MenuSeparator.png');
    width: 5px;
    height: 51px;
}

nav table tr a {
    text-decoration: none;
    color: #ececec;
    font-weight: bold;
    font-size: 91%;
}
/* --END OF NAVIGATION MENU-- */

/* **CONTENT** */
#content {
    position: relative;
}
    /* SIDEBAR no.1 */
#content aside .box1 {
    width: 234px;
    height: 228px;
    background: url('img/tripsBg.png') no-repeat;
    padding: 17px 0 0 16px;
    margin: 31px 0 20px 31px;
    line-height: 0.9;
    position: relative;
}

    #content aside .box1 .tripText {
        position: absolute;
        top: 50px;
        right: 0;
        width: 135px;
        padding: 0 37px 33px 10px;
        color: #fff;
    }

    /* Font styles & sizes */
    #content aside .box1 h3 {
        font-size: 90%;
    }

    #content aside .box1 h3:first-of-type {
        color: #fff;
        opacity: 0.8;
    }

    #content aside .box1 h3:last-of-type {
        color: #c07644;
        opacity: 0.8;
    }

    #content aside .box1 .tripText {
        font-size: 90%;
    }
    #content aside .box1 .tripText h4 {
        color: #ff9127;
    }
    /* --END OF FONT STYLES-- */

    /* SIDEBAR no.2 */
#content aside .box2 {
    width: 234px;
    height: 228px;
    background-color: #5b8e1b;
    padding: 17px 0 0 16px;
    margin: 31px 0 20px 31px;
    line-height: 0.9;
    position: relative;
    border-radius: 5px 5px;
}

#content aside .box2 h3 {
    font-size: 90%;
}

/* --END OF SIDE BAR-- */

/* **Article section** */
article {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 590px;
    color: #e9e9e9;
}

#content aside article p {
    font-size: 80%;
}

/* --END OF ARTICLE SECTION-- */

/* **Footer section** */




/* --END OF FOOTER-- */
4

1 回答 1

1

您需要更新 CSS 文件中的图像文件夹路径，以便它可以对应 CSS 文件路径

像这样试试

 #pageBody {
    background: url('../img/pageBg.png') no-repeat;
    .
    .
 }

或者

您可以简单地将 CSS 文件放在 HTML 文件旁边，而不是放在新文件夹中

于 2013-08-31T15:16:41.963 回答