0
的HTML：列表中鏈接的圖像不顯示。 HTML5和CSS3
<!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>
[email protected]</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;">©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>
我知道鏈接指向正確的位置，因爲當我將鼠標懸停在他們括號正確的圖像顯示。我也嘗試使用完全不同的圖像來確保不是這樣。我已經嘗試使用內聯樣式手動設置寬度和高度，並通過CSS表單無濟於事。
我在這裏失蹤或做錯了什麼？
謝謝！
錯字？這是「src」而不是「scr」.. –
是的，這是問題，謝謝。 –