Question

我试图将img放在我的布局中的列的节类（.col）中，并且图像不会显示。背景颜色也不会出现在.col中。我正在学习CSS并正在开展我的第一个项目来布局网页。我正在使用Aptana和Firefox。谢谢。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>fixed layout</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans: 300,600,700&subset=latin,greek' rel='stylesheet' type='text/css'>
<style>
aside, article, section, header, footer, nav {
    display: block;
}
div, section, article, h1, h2, h3, p {
    margin: 0;
    padding: 0;
}
html, body {
    margin: 0;
    padding: 0;
}
html {
    background: rgb(206, 193, 167);
}
body {
    background: #fff;
    font: 100% 'Open Sans', Arial, Helvetica, sans-serif;
    width: 960px;

    margin: 0 auto 2em;
}
/*layout*/
header {
    background:rgb(0,114,143);
    margin-bottom: 16px;
    height: 48px;
    padding: 36px 0 0 36px;
}

.col1 {
    float: left;
    padding-left: 48px;
    width: 112px;
    background:rgb(126,208,224);

}
.col2 {
    float: left;
    padding-right: 48px;
    padding-left: 48px;
    width: 464px;
}
.col3 {
    float: left;
    padding-right: 48px;
    width: 112px;
    font-size: 140%;
    line-height: 1.6;
}
footer {
    height: 80px;
    clear: both;
    background-color: rgb(100,98,102);
}
img {
    float: left;
    margin: 0 1em 0 0;

}
/*typography*/

p {
    font-weight: 300;
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 1em;
}

</style>
</head>
<body>
<header>

</header>
<section class="col1">
    <img src="/_images/ny_08.2.jpg" width="112" height="112" alt="NY City">
</section>
<section class="col2">
<p>My father was a St. Bernard, my mother was a collie, but I am a Presbyterian.<p>
<p>My mother had a fondness for such; she liked to say them, and see other dogs look surprised and envious, as wondering how she got so much education.</p>
<p>If there was a stranger he was nearly sure to be suspicious, and when he got his breath again he would ask her what it meant. And she always told him.</p>
<p>The others were always waiting for this, and glad of it and proud of her, for they knew what was going to happen, because they had had experience. </p>
<p>With a view to action experience seems in no respect inferior to art, and men of experience succeed even better than those who have theory without experience.</p>
</section>
<aside class="col3">
<p>But no harm was done; the others rolled and barked too, privately ashamed of themselves for not seeing the point </p>
</aside>
<footer></footer>
</body>
</html>

enter image description here

Answer 1

硬盘驱动器上的图像相对于Web服务器的根目录在哪里？由于_images文件夹位于根目录，因此可能找不到该文件，但是您必须加载它的URL是相对URL。如果是这种情况，将url更改为绝对会修复它。

<img src="/_images/ny_08.2.jpg" width="112" height="112" alt="NY City">

开头的正斜杠就是变化。

相对网址从当前文件夹开始，因此现有网址实际上是在寻找http://127.0.0.1:8020/grid_website.htm/_images/ny_08.2.jpg，我展示的更改是让它看看http://127.0.0.1:8020/_images/ny_08.2.jpg。

img没有出现在css html中

1 个答案: