0
我正在做一項任務，我需要在表格中放置一些圖像，這對我來說通常不是問題。今天，當我將圖像添加到表格中時，它只是顯示一個帶有寫在其中的alt文本的正方形邊框。我很確定我指向正確的目錄。圖像不能顯示在表
我的文件夾結構是：
Website
css
fonts
html (Page with table in here)
js
images (Images for table in here)
@font-face{ font-family:customFont; src: url('../fonts/Balkeno.ttf'); }
* {
\t margin: 0;
\t border: 0;
\t padding: 0;
\t font-size: 12px;
\t font-family: arial, sans-serif;
}
body {
\t width: 100%;
\t height: 300%;
\t background-color: #D8D8D8;
}
nav {
\t font-family: customFont;
\t font-size: 30px;
\t width: 100%;
\t height: 40px;
\t position: fixed;
\t z-index: 50;
}
.nav-background {
\t width: 100%;
\t height: 100%;
\t background: #12A7CB;
\t opacity: 0;
\t position: absolute;
}
.nav-content {
position: relative;
top: 50%;
transform: translateY(-50%);
}
header {
\t width: 100%;
\t height: 320px;
}
#slideshow {
position:relative;
height:320px;
\t width: 100%;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
\t width: 100%;
\t height: 320px;
\t box-shadow: 0px 5px 10px #5E5E5E;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#logo {
\t float: left;
\t padding-left: 100px;
\t padding-right: 200px;
}
#nav {
\t background: url(http://4.bp.blogspot.com/-dVtgikk-kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top left; background-color: transparent;
\t width:100%;
\t height:50px;
\t box-shadow: 0px 1px 10px #5E5E5E;
\t position:fixed;
\t top:0px;
}
.title {
\t display:none;
\t color:#EDEDED;
\t font-size:25px;
\t width:350px;
\t margin-top:6px;
\t margin-left:150px;
\t font-weight:bold;
\t float:left;
}
.navigation li{
\t list-style-image: url('navIcon.png');
\t float: left;
\t padding-right:45px;
\t margin-bottom: 25px;
\t color: black;
}
li {
\t
}
.navigation a {
\t font-size: 19px;
\t font-family: customFont;
\t text-decoration:none;
\t color: #01ebfe;
}
.navigation a:hover {
\t
}
.wrapper {
\t width: 900px;
\t height: 1000%;
\t margin-top: 25px;
\t margin-left: auto;
\t margin-right: auto;
\t padding: 20px;
\t background-color: white;
\t padding-top: 100px;
\t box-shadow: 10px 10px 5px #888888;
}
p{
\t font-size: 14px;
\t padding-bottom: 32px;
}
p:first-letter {
\t font-size: 32px;
\t color: #71CAE0;
}
h1 {
\t font-family: customFont;
\t font-size: 32px;
\t font-weight: bolder;
\t color: #12A7CB;
\t text-align: center;
}
h2 {
\t font-family: customFont;
\t font-size: 22px;
\t font-weight: bold;
\t color: #12A7CB;
\t text-align: left;
\t text-decoration: underline;
}
section {
\t width: 100%;
\t height: 100%;
\t background-color: #D8D8D8;
}
img.logo {
\t text-align: center;
\t margin: auto;
\t display: block;
}
img.slideshow {
\t width: 100%;
\t height: 480px;
}
footer {
\t width: 900px;
\t margin: 25px auto 0 auto;
\t padding-top: 20px;
\t padding-left: 20px;
\t padding-right: 20px;
\t background-color: white;
\t text-align: center;
\t box-shadow: 10px 10px 5px #888888;
}
.members {
\t padding: 10px;
\t display: inline-block;
\t background-color: #e4f4f8;
\t margin-top: 15px;
\t margin-left: 15px;
\t border: 1px solid #12A7CB;
\t float: right;
}
ol.test {
\t list-style-type: lower-alpha;
}
.members ol {
\t list-style-type: lower-alpha;
}
.members li {
\t display: list-item;
\t color: #6c6c6c;
\t list-style-type: lower-alpha;
\t padding: 5px;
\t margin-bottom: 5px;
\t margin-left: 10px;
}
/* TABLE STUFF */
table, tr, th, td {
\t border: 1px solid black;
\t border-collapse: collapse;
}
th {
\t padding: 5px;
\t color: #12A7CB;
\t background-color: #e4f4f8;
}
td {
\t background-color: #f2eded;
\t width: 150px;
\t height: 150px;
}
/* END TABLE STUFF */
.video-wrapper {
\t width: 100%;
\t text-align: center;
}
.video-wrapper a {
\t color: blue;
\t text-decoration: none;
\t font-size: 12px;
\t font-family: arial, sans-serif;
}
.social img {
\t padding-top: 32px;
\t padding-right: 8px;
\t width: 48px;
\t height: 48px;
\t border: none;
}<!DOCTYPE html>
<html>
\t <!--
\t Author: #####
\t Date: 11/08/2014
\t -->
\t <head>
\t \t <meta charset="utf-8" />
\t \t <title>Home - Three Doors Down</title>
\t \t
\t \t <link rel="stylesheet" type="text/css" href="../css/style.css" />
\t \t <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
\t \t
\t \t <script src="../js/jquery.js"></script>
\t \t <script type="text/javascript" src="../js/scroll.js"></script>
\t \t <script type="text/javascript" src="../js/header.js"></script>
\t \t
\t </head>
\t
\t <body>
\t \t <nav class="nav">
\t \t \t <div class="nav-background">
\t \t \t </div>
\t \t \t
\t \t \t <div class="nav-content">
\t \t \t \t <img src="../images/navTitle.png" alt="Three Doors Down" id="logo" width=250 />
\t \t \t \t <ul class='navigation'>
\t \t \t \t \t <li><a href="../index.html">Home</a></li>
\t \t \t \t \t <li><a href="biography.html">Biography</a></li>
\t \t \t \t \t <li><a href="discography.html">Discography</a></li>
\t \t \t \t \t <li><a href="video.html">Video</a></li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </nav>
\t \t
\t \t <header class="header">
\t \t \t <div id="slideshow">
\t \t \t \t <img src="../images/header1.jpg" alt="Three Doors Down" class="active" />
\t \t \t \t <img src="../images/header2.jpg" alt="Three Doors Down" />
\t \t \t \t <img src="../images/header3.jpg" alt="Three Doors Down" />
\t \t \t </div>
\t \t </header>
\t \t
\t \t <section>
\t \t \t <div class="wrapper">
\t \t \t \t <h1>Discography</h1>
\t \t \t \t
\t \t \t \t <div class="disco" >
\t \t \t \t \t <table >
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>
\t \t \t \t \t \t \t \t Album
\t \t \t \t \t \t \t </th>
\t \t \t \t \t \t \t <th>
\t \t \t \t \t \t \t \t Year
\t \t \t \t \t \t \t </th>
\t \t \t \t \t \t \t <th>
\t \t \t \t \t \t \t \t Record Label
\t \t \t \t \t \t \t </th>
\t \t \t \t \t \t \t <th>
\t \t \t \t \t \t \t \t CD Cover
\t \t \t \t \t \t \t </th>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td >
\t \t \t \t \t \t \t \t The Better Life
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t 2000
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t Universal Republic
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t <img href="../images/theBetterLifeCover.jpg" alt="The Better Life" width="100" height="100" />
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td >
\t \t \t \t \t \t \t \t Away from the Sun
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t 2002
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t Universal Republic
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t <image href="../images/awayFromTheSunCover.jpg" alt="Test" width="100" height="100" />
\t \t \t \t \t \t \t </td> \t \t \t \t \t \t
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td >
\t \t \t \t \t \t \t \t Seventeen Days
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t 2005
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t Universal Republic
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t Cover
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td >
\t \t \t \t \t \t \t \t 3 Doors Down
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t 2008
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t Universal Republic
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t <image />
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td >
\t \t \t \t \t \t \t \t Time of My Life
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t 2011
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t Universal Republic
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t Cover
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t </tr> \t \t \t \t \t
\t \t \t \t \t </table>
\t \t \t \t </div> \t \t \t
\t \t \t </div>
\t \t </section>
\t \t
\t \t <footer> \t \t \t
\t \t \t <div class="nav-content">
\t \t \t \t <ul class='navigation'>
\t \t \t \t \t <li><a href="../index.html">Home</a></li>
\t \t \t \t \t <li><a href="biography.html">Biography</a></li>
\t \t \t \t \t <li><a href="discography.html">Discography</a></li>
\t \t \t \t \t <li><a href="video.html">Video</a></li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </footer>
\t </body>
</html>
檢查包含圖片，他們可能不正確 – jondinham 2014-09-22 04:21:46
這是''
，而不是''![]()
... –
jlahd
2014-09-22 04:22:21