html - 将CSS磁贴链接到网站链接

Question

我正在使用HTML和CSS创建我的个人网站。我在CSS中创建了一些图块。我很难将其链接到另一个网站。我的意思是说，如果我单击该图块，则应该将我重定向到相应的链接。

这是我的html代码。

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);
*{
  box-sizing:border-box;
}
body {
  background:#246BB2;
}
h1{
  font-family:'Open Sans',Arial,Helvetica,sans-serif;
  font-size:72px;
  color:#FFFFFF;
  position: absolute;
  top:0px;
  margin:0px;
}
h2{
  font-family:'Open Sans',Arial,Helvetica,sans-serif;
  font-size:48px;
  color:#FFFFFF;
  position:relative;
  top:50px;
}
div {
  inline-block;
  padding:0px;
  margin:0px;
}
#container {
  height:40%;
  width:30%;
  margin:auto;
  position: absolute;
  top:30%;
  left:30%;
  background:#687F8B;

}
#tl{
  height:33.34%;
  width:33.34%;
  position:absolute;
  top:0%;
  left:0%;
  background:#FF5050;
  box-shadow:5px 7px 0px 0px #662020;
  transition:all ease .35s;
}
#tc{
  height:33.34%;
  width:33.34%;
  position:absolute;
  top:0%;
  left:33.34%;
  box-shadow:5px 7px 0px 0px #663D29;
  background:#FF9966;
  transition:all ease .35s;
}
#tr{
  height:33.34%;
  width:33.34%;
  position:absolute;
  top:0%;
  left:66.67%;
  background:#FFFF66;
  transition:all ease .35s;
}
#ml{
  height:33.34%;
  width:33.34%;
  position:absolute;  
  top:33.34%;
  left:0%;
  background:#99FF66;
  box-shadow:5px 7px 0px 0px #3D6629;
  transition:all ease .35s;
}
#mc{
  height:33.34%;
  width:33.34%;
  position:absolute;  
  top:33.34%;
  left:33.34%;
  background:#00FF99;
  box-shadow:5px 7px 0px 0px #00663D;
  transition:all ease .35s;
}
#mr{
  height:33.34%;
  width:33.34%;
  position:absolute;  
  top:33.34%;
  left:66.67%;
  background:#0099FF;
  transition:all ease .35s;
}

div p {
  font-family: 'Open Sans',Arial,Helvetica,sans-serif;
  color:#FFFFFF;
  font-weight:bold;
  text-align:center;
  position:relative;
  font-size:50px;
  top:30%;
  margin:0px;
}

<h1>CSS Tile Menu</h1>
<div id="container">
<div id="tl"><p>1</p></div>
<div id="tc"><p>2</p></div>
<div id="tr"><p>3</p></div>
<div id="ml"><p>4</p></div>
<div id="mc"><p>5</p></div>
<div id="mr"><p>6</p></div>

我尝试在代码的html部分插入，并将链接设置为href..it无效。

我也尝试过将其链接到CSS ..但是没有CSS就是不可能的。

有人可以帮我一些将CSS Tile链接到链接的想法吗？

从https://codepen.io/Tectonics0x3F/pen/EfAgr采用代码

Answer 1

为什么不简单地这样：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);
*{
  box-sizing:border-box;
}
body {
  background:#246BB2;
}
h1{
  font-family:'Open Sans',Arial,Helvetica,sans-serif;
  font-size:72px;
  color:#FFFFFF;
  position: absolute;
  top:0px;
  margin:0px;
}
h2{
  font-family:'Open Sans',Arial,Helvetica,sans-serif;
  font-size:48px;
  color:#FFFFFF;
  position:relative;
  top:50px;
}

#container {
  max-width:400px;
  margin:100px auto 0;
  background:#687F8B;

}
.tile {
  width:32.33%;
  height:100px;
  position:relative;
  top:0;
  left:0;
  display:inline-block;
  margin-bottom:5px;
   transition:all ease .35s;
}
.tile:hover {
top:-5px;
left:-5px;
}
#tl{
  background:#FF5050;
  box-shadow:5px 7px 0px 0px #662020;
}
#tc{
  box-shadow:5px 7px 0px 0px #663D29;
  background:#FF9966;
}
#tr{
  background:#FFFF66;
}
#ml{
  background:#99FF66;
  box-shadow:5px 7px 0px 0px #3D6629;
}
#mc{
  background:#00FF99;
  box-shadow:5px 7px 0px 0px #00663D;
}
#mr{
  background:#0099FF;
}

div a {
  font-family: 'Open Sans',Arial,Helvetica,sans-serif;
  color:#FFFFFF;
  font-weight:bold;
  text-align:center;
  font-size:50px;
  margin:0px;
  display:block;
  text-decoration:none;
}

<h1>CSS Tile Menu</h1>
<div id="container">
<div id="tl" class="tile"><a href="#">1</a></div>
<div id="tc" class="tile"><a href="#">2</a></div>
<div id="tr" class="tile"><a href="#">3</a></div>
<div id="ml" class="tile"><a href="#">4</a></div>
<div id="mc" class="tile"><a href="#">5</a></div>
<div id="mr" class="tile"><a href="#">6</a></div>
</div>

他们是很多绝对立场，我认为他们没有用。