0
HTML과 CSS를 사용하여 개인 웹 사이트를 만들고 있습니다. CSS에서 타일을 거의 만들지 않았습니다. 다른 웹 사이트와 연결하는 데 어려움을 겪고 있습니다. 타일을 클릭하면 적절한 링크로 리디렉션됩니다.CSS 타일을 웹 사이트 링크에 연결
이것은 내 HTML 코드입니다.
내가 코드의 HTML 부분에 삽입하고 href..it didnt 한 작품으로 링크를 제공하는 시도
@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>CSS로 연결하려고했는데 CSS 없이는 불가능합니다.
CSS 타일을 링크에 연결하는 데 도움이되는 사람이 있습니까?
코드는 https://codepen.io/Tectonics0x3F/pen/EfAgr
href가 작동하지 않는 이유는 무엇입니까? –