gpt4 book ai didi

css - 我无法让我的图像检测 anchor 并打开新页面

转载 作者:行者123 更新时间:2023-11-28 05:11:01 24 4
gpt4 key购买 nike

我有一个学校作业,我需要一组 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com