Question

我有一个使用CSS的HTML，可显示2列图像。单击图像后，它将在新选项卡中打开。我希望能够单击新选项卡中的图像，然后返回到原始的html页面，但是除了单击浏览器的后退按钮之外，找不到其他方法。这是我的代码：

    <!DOCTYPE html>
<html>
<head>

</head>

<body>
<style>
* {
    box-sizing: border-box;
}

body {
    background-color: lightblue;
    margin: 0;
    font-family: Arial;
}

.header {
position: relative;
    text-align: center;
    padding: 32px;
    z-index: 99;
}

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 100px;
}

.column img {
    margin-top: 12px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
.zoom {
    padding: 50px;
    background-color: lightblue;
    transition: transform 1.2s;
    width: 80%;
    height:: 80%;
    margin: 0 auto;
}

.zoom:hover {
        -ms-transform: translate(50px, 80px); /* IE 9 */
    -webkit-transform: translate(50px, 80px); /* Safari */
    transform: translate(50px, 80px);
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5);

}
.rzoom {
    padding: 50px;
    background-color: lightblue;
    transition: transform 1.2s;
    width: 80%;
    height:: 80%;
    margin: 0 auto;
}

.rzoom:hover {
        -ms-transform: translate(50px, 200px); /* IE 9 */
    -webkit-transform: translate(50px, 80px); /* Safari */
    transform: translateX(250px);
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5);

}
@font-face { font-family: Almonte; font-size: 55px; src: url('almonte snow.ttf') ; }
h1 {

         font-family: Almonte
      }
</style>
<!-- Header -->
<div class="header">
  <h1>Castles In Snow</h1>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column" z-index: 50;>
  <div class="zoom">
  <a href="castle-amb8.jpg" target="_top" style="width:200%">
    <img src="castle-amb8.jpg" style="width:100%">
<!-- <form>
  <input type="button" value="Go back!" onclick="history.back()">
</form>
-->
    </a>
    <a href="castle-amb3.jpg" target="_top" style="width:200%">
    <img src="castle-amb3.jpg" style="width:100%">
    </a>
    <a href="castle-amb5.jpg" target="_top" style="width:200%">
    <img src="castle-amb5.jpg" style="width:100%">
    </a>
    <a href="castle-amb.jpg" target="_top" style="width:200%">
    <img src="castle-amb.jpg" style="width:100%">
    </a>
     </div>
  </div>
  <div class="column" z-index: 50;>
      <div class="rzoom">
    <a href="castle-amb2.jpg" target="_top" style="width:200%">
    <img src="castle-amb2.jpg" style="width:100%">
    </a>
    <a href="castle-amb6.jpg" target="_top" style="width:200%">
    <img src="castle-amb6.jpg" style="width:100%">
    </a>
    <a href="castle-amb7.jpg" target="_top" style="width:200%">
    <img src="castle-amb7.jpg" style="width:100%">
    </a>
    <a href="castle-amb9.jpg" target="_top" style="width:200%">
    <img src="castle-amb9.jpg" style="width:100%">
    </a>
 </div>
      </div>
</div>    
</body>
</html>

任何建议，我将不胜感激。谢谢。

如何使用_top将图像上的后退按钮发送到另一个选项卡

0 个答案: