Question

HTML：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="IndexStyleTesting.css" title="IndexStyleTesting">
    <title>Christian's Portfolio</title>
</head>

<body>

    <div id="wrapper"> 

        <div id="callout">
            <p>Contact me at <b>(386)123-4567</b></p>
        </div>           

        <header>
            <a href=""><img scr="MyHeaderImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a>
        </header>

        <nav>
            <ul>
                <li class='active'><a href="">Home</a></li>
                <li><a href="">About Me</a></li>
                <li><a href="">HTML5 and CSS3 Projects</a></li>
                <li><a href="">Other Projects</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Contact Me</a></li>
            </ul>

            <div class="clearfix"></div>

        </nav>

        <div class="banner">
            <img scr="MyBannerImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/> 
        </div>

        <div align="center">
            <img scr="NextImageOfBigWordsHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>                 </div>

        <section class="left-col">
            <p style="text-indent: 50px";>Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph                   Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here                     Paragraph Here Paragraph Here </p>
            <p style="text-indent: 50px";>Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here Second                        Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here                      Second Paragraph Here Second Paragraph Here </p>
        </section>

        <aside class="sidebar">
            <div class="RightImage">
                <img scr="MyRightImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
            </div>
        </aside>

        <div class="clearfix"></div>

        <div class="section">
            <h3>Left Section</h3>
            <img scr="MyLeftSectionImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
            <p></p>
        </div>

        <div class="section">
            <h3>Middle Section</h3>
            <img scr="MyMiddleSectionImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
            <p></p>
        </div>

        <div class="section">
            <h3>Right Section</h3>
            <img scr="MyRightSectionImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
            <p></p>
        </div>

        <div align="center"> 
            <img scr="NextImageOfBigWordsHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
        </div>
        <footer>
            <div class="section">
                <p>Christian</p>
                <p><b>(386)123-4567</b> <br>
                    Top Notch Coding <br>
                    Christian@gmail.com</p>
            </div>

            <div class="section">
                <ul>
                    <li><a href=""><img scr="IndexImagesTesting/Facebook.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                    <li><a href=""><img scr="IndexImagesTesting/Googleplus.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                    <li><a href=""><img scr="IndexImagesTesting/Twitter.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                    <li><a href=""><img scr="IndexImagesTesting/Youtube.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                </ul>
            </div>

            <div class="section">
                <img scr="RightLogoImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
            </div>            
        </footer>

    </div>

    <p style="text-align: center; padding: 0px;">&#169;Copyright - Christian 2015</p>

</body>

CSS：

body {
    background-image: url("IndexImagesTesting/wood.jpg");
    background-repeat: repeat;
    background-attachment: fixed;
    font-family: Verdana, Tahoma, Arial, sans-serif;
    font-size: 16px;
    overflow: auto;
}

h1, h2, h3 {
    text-align: center;
    padding-left: 5%;
    color: #00CC99;
}

p {
    padding-left: 2%;
    color: #000000;
}

img {
    text-align: center;
    max-width: 100%;
    height: auto;
    width: auto;
}

#wrapper {
    margin: 0 auto;
    max-width: 1020px;
    width: 98%;
    background: #FEFEE8;
    border: 1px solid #684E36;
    border-radius: 2px;
    box-shadow: 0 0 10px 0px rgba(12, 3, 25, 0.8);
}

#callout {
    width: 100%;
    height: auto;
    background: #00CC99;
    overflow: hidden; 
}

#callout p {
    text-align: right;
    font-size: 13px;
    padding: 0.1% 5% 0 0;
    color: #FEFEE8;
}

#callout p a {
    color: #FEFEE8;
    text-decoration: none;
}

header {
    width: 98%;
    min-height: 125px;
    padding: 5px;
    text-align: center;

}

nav ul {
    list-style: none;
    margin: 0px;
    padding-left: 50px;
}

nav ul li {
    float: left;
    border: 1px solid #00CC99;
    width: 15%;
}

nav ul li a {
    background: #FEFEE8;
    display: block;
    padding: 5% 12%;
    font-weight: bold;
    font-size: 18px;
    color: #00CC99;
    text-decoration: none;
    text-align: center;
}

nav ul li a:hover, nav ul li.active a {
    background-color: #00CC99;
    color: #FEFEE8;
}

.banner img {
    width: 100%;
   /* border-top: 1px solid #00CC99;
    border-bottom: 1px solid #00CC99; */
}

.clearfix {
    clear: both;   
}

.left-col {
    width: 55%;
    float: left;
    margin: -2% 1% 1% 1%;
}

.sidebar {
    width: 40%;
    float: right;
    margin: 1%;
    text-align: center;
}

.banner {
    float: left;
    margin: 0 auto;
    width: 100%;
    height: auto;
    padding: 1%, 1%;

}

.section {
    width: 29%;
    float: left;
    margin: 2% 2%;
    text-align: center;
}

footer {
    background: #00CC99;
    width: 100%;
    height: auto;
    overflow: hidden;
}

footer p, footer h3 {
    color: #FEFEE8;
}

footer p a {
    color: #FEFEE8;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;

}

ul li a {
    display: block;
    width: auto;
    height: 60px;
}

ul li img {
    height: 48px;
}


/*THIS IS WHERE MEDIA STARTS*/
@media screen and (max-width: 478px) {
    body {
        font-size: 13px;
    }  
}

@media screen and (max-width: 740px) {
    nav {
        width: 100%;
        margin-bottom: 10px;
    }
    nav ul {
        list-style: none;
        margin: 0 auto;
        padding-left: 0;
    }
    nav ul li {
        text-align: center;
        margin-left: 0 auto;
        width: 100%;
        border-top: 1px solid #00CC99;
        border-right: 0px solid #00CC99;
        border-left: 0px solid #00CC99;
        border-bottom: 1px solid #00CC99;
    }
    nav ul li a {
        padding: 8px 0;
        font-size: 16px;
    }
    .left-col {
        width: 100%;
    }
    .sidebar {
        width: 100%;
    }
    .section {
        width: 100%;
        float: left;
        margin: 0;
    }
}

问题：

                <div class="section">
                <ul>
                    <li><a href=""><img scr="IndexImagesTesting/Facebook.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                    <li><a href=""><img scr="IndexImagesTesting/Googleplus.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                    <li><a href=""><img scr="IndexImagesTesting/Twitter.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                    <li><a href=""><img scr="IndexImagesTesting/Youtube.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
                </ul>
            </div>

我知道链接指向正确的位置，因为当我将它们悬停在Brackets上时，会显示正确的图像。我也试过使用完全不同的图像，以确保它不是。我尝试使用内联样式和css表手动设置其宽度和高度无济于事。

我在这里错过了什么或做错了什么？

谢谢!!!

Answer 1

scr应为src

插入lorem ipsum文本，因为答案太短了*：）

Answer 2

不应该是

    img src

而不是

    img scr

列表中的链接图像未显示。 HTML5＆amp; CSS3

2 个答案: