0
私はHTMLとCSSを使用して個人用ウェブサイトを作成しています。私は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 didntの作品としてリンクを与えて試してみました。
私はCSSにリンクしてみましたが、CSSなしでは不可能です。
誰かがCSSタイルをリンクにリンクするのに役立つと思いますか？
コードがhttps://codepen.io/Tectonics0x3F/pen/EfAgr
なぜhrefが機能していないのですか？ –