rn 我正在为我的学校建立一个网上商店。我有带有产品图片的图像或盒子。现在我希望人们可以按下图像并立即重定向到另一个页面，其中包含有关产品的一些信息。我该怎么做？ 我很抱歉我的英语不好，那是因为我是德国人:(
``` <!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>fashion</title>
<link rel="stylesheet" type="text/css" href="style_2_Seite.css" media="all" />
</head>
<body>
<div class="header">
<a href= "1-Seite.html" class= logo>fashion</a>
<nav class="navbar">
<a href="1-Seite.html">Home</a>
<a href="2-Seite.html">Shop</a>
<a href="#">Über uns</a>
</nav>
</div>
<section class="products" id="products">
<h1 class="heading"> latest <span> products</span> </h1>
<div class="box-container">
<div class="box">
<div class="image">
<img src="Products/bb.hoodie.png" width="50%;" id="box" alt="">
<div class="icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class="content">
<h3>MEDIUM FIT B HOODIE</h3>
<div class="price"> 1.225€ <span></span> </div>
</div>
</div>
<div class="box">
<div class="image">
<img src="Products/bbjacke.png" width="50%;" id="box" alt="">
<div class="icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class="content">
<h3>RACING JACKET</h3>
<div class="price"> 3.100€ <span></span> </div>
</div>
</div>
<div class="box">
<div class="image">
<img src="Products/nfs.hose.png" width="50%;" alt="">
<div class="icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class="content">
<h3>HEAVY WASHED BOMBER</h3>
<div class="price">2.175€ <span></span> </div>
</div>
</div>
<div class="box">
<div class="image">
<img src="Products/nfs.bomber.png" width="50%;" alt="">
<div class="icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class="content">
<h3>GREY INSIDE OUT BOMBER</h3>
<div class="price"> 2.750€ <span></span> </div>
</div>
</div>
<div class="box">
<div class="image">
<img src="Products/ro.coat.png" width="50%;" alt="">
<div class="icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class="content">
<h3>HOODED COAT GREY/BLACK </h3>
<div class="price"> 4.250€ <span> </span> </div>
</div>
</div>
<div class="box">
<div class="image">
<img src="Products/ro.coat 2.png" width="50%;" alt="">
<div class="icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class="content">
<h3>HOODED COAT BLACK</h3>
<div class="price"> 4.250€ <span> </span> </div>
</div>
</div>
</div>
</body>
</html>```
body {
.header{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding:19px 20px;
background: #DCdCdC
}
.logo {
position: fixed;
top: -10px;
font-size: 32px;
padding:20px 20px;
color: #fff;
text-decoration: none;
font-weight: 650;
}
.navbar a {
font-size: 18px;
color: #fff;
font-weight: 600;
text-decoration: none;
margin-left: 400px;
word-spacing: 2px;
}
.products .box-container{
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.products .box-container .box{
flex:1 1 30rem;
box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
border-radius: .5rem;
border: .1rem solid rgba(0,0,0,.1);
position: relative;
transition: 1s;
}
.products .box-container .box .image{
position:relative;
text-align: center;
padding-top: 2rem;
overflow: hidden;
}
.box:hover{
transform:scale(1.05);
}
.products .box-container .box .image .icons {
position: absolute;
bottom: 0; left:0; right: 0;
display: flex;
}
.products .box-container .box .image .icons a {
margin-left: 8rem;
margin-bottom: -3rem;
height: 4rem;
line-height:6rem;
font-size: 1.25rem;
width: 50%
background: black);
color:#000;
}
.products .box-container .box .content {
padding:2rem;
text-align: center;
}
.products .box-container .box .content h3 {
font-size:2rem;
color: #000;
}
.products .box-container .box .content price {
font-size:1.5rem;
color: black;
font-weight:bolder;
padding-top:1rem;
}
将要转到另一个页面的代码包装在锚链接中，并将 href 设置为您要转到的页面。
<a href="http://example.com">
<div class="box">
<div class="image">
<img src="Products/ro.coat.png" width="50%;" alt="">
<div class="icons">
<a href= "#" class= "fas fa-heart"></a>
<a href= "#" class= "cart-btn">add to cart</a>
<a href= "#" class= "fas fa-heart"></a>
</div>
</div>
<div class="content">
<h3>HOODED COAT GREY/BLACK </h3>
<div class="price"> 4.250€ <span> </span> </div>
</div>
</div>
</a>
这将使整个 div 可点击并打开另一个页面