我有一个学校作业，我需要一组 3x3 的图片，这些图片都是 200x200 并链接到更大的 800x800 图片本身。
我已经整整 3 天都在研究这件事，我只是不明白我做错了什么....请帮助
也许我对这项作业想得太多了，无缘无故地添加了 9 页，而我错过了一种更简单的方法？
请帮忙!!!
我的思考过程:
.css 用于格式化我的容器、边框、“占位符”
“webiste”中的 9 个单独的相关链接将打开一个新选项卡
9张200x200的图片是其他9页的相对链接
我的问题:
我的 href="Page 1-9.html"target="_blank"根本无法正常工作
第 1-9 页的代码如下
<html>
<body>
<img src="images/America.jpg" alt="Is" style="width:800px;height:800px;">
</body>
#container{
margin: 0 auto;
width: 640px;
padding: 10px;
background-image: url("images/Star.jpg");
}
#sectionOne{
margin-right: 10px;
float: left;
background-color: red;
width: 200px;
height: 200px;
display: block;
}
#sectionTwo{
margin-right: 10px;
float: left;
background-color: blue;
display: block;
}
#sectionThree{
margin-bottom: 10px;
float: left;
background-color: white;
display: block;
}
#sectionFour{
margin-right: 10px;
float: left;
background-color: red;
display: block;
}
#sectionFive{
margin-right: 10px;
float: left;
background-color: blue;
display: block;
}
#sectionSix{
margin-bottom: 10px;
float: left;
background-color: white;
display: block;
}
#sectionSeven{
margin-right: 10px;
float: left;
background-color: red;
display: block;
}
#sectionEight{
margin-right: 10px;
float: left;
background-color: blue;
display: block;
}
#sectionNine{
margin-bottom: 10px;
float: left;
background-color: white;
display: block;
}
#header{
margin-bottom: 10px;
height: 100px;
width: 700px;
background-image: transparent;
border: transparent;
}
#footer{
clear: left;
height: 50px;
width: 630px;
background-color: transparent;
border: transparent;
}
.boarderClass{
border-style: solid;
border-color: black;
border-width: 2px;
}
.someWidth{
width: 200px;
height: 200px;
}<!DOCTYPE HTML>
<html>
<head>
<title> 'Merica! </title>
<link rel="stylesheet" type="text/css" href="3x3 template.css">
</head>
<body>
<div id="container" class="boarderClass">
<div id="header"class="boarderClass">
</div>
<div id="sectionOne" class="boarderClass someWidth"
<a href="Page 1.html">
<img src="images/America.jpg" width="200" height="200" />
</a>
</div>
<div id="sectionTwo" class="boarderClass someWidth imageLink" <a href="Page 2.html"><img src="images/Is.jpg" title="Is" width="200" height="200" />
</div>
<div id="sectionThree" class="boarderClass someWidth" <a href="Page 3.html"><img src="images/THE.jpg" title="THE" width="200" height="200" />
</div>
<div id="sectionFour" class="boarderClass someWidth" <a href="Page 4.html"><img src="images/Greatest.jpg" title="Greatest" width="200" height="200" />
</div>
<div id="sectionFive" class="boarderClass someWidth" <a href="Page 5.html"><img src="images/Country.jpg" title="Country" width="200" height="200" />
</div>
<div id="sectionSix" class="boarderClass someWidth" <a href="Page 6.html"><img src="images/In.jpg" title="In" width="200" height="200" />
</div>
<div id="sectionSeven" class="boarderClass someWidth"<a href="Page 7.html"><img src="images/THE.jpg" title="THE" width="200" height="200" />
</div>
<div id="sectionEight" class="boarderClass someWidth"<a href="Page 8.html"><img src="images/Entire.jpg" title="Entire" width="200" height="200" />
</div>
<div id="sectionNine" class="boarderClass someWidth"<a href="Page 9.html"><img src="images/World.jpg" title="World" width="200" height="200" />
</div>
<div id="footer"class="boarderClass">
</div>
</div>
</body>
</html>最佳答案
HTML 中几乎每个 div 都缺少右括号 ( > )，以及右 anchor ( </a> )
<div id="sectionTwo" class="boarderClass someWidth imageLink"> <a href="Page 2.html"><img src="images/Is.jpg" title="Is" width="200" height="200" /></a></div>
请注意上面的区别...您需要在 HTML 中多次修复此问题。
关于css - 我无法让我的图像检测 anchor 并打开新页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39564311/