html 円盘上のリンクを作ってみた

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 円盘上のリンクを作ってみた相关的知识，希望对你有一定的参考价值。

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
  <meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	  #wrap {
  	  border: 2px solid silver;
	  }
  	.ring {
  	  border: thin solid black;
  	  width: 150px;
  	  height: 150px;
    	border-radius: 150px;
    	display: inline-block;
    	margin: auto 5px;
  	}
  	.ring > a {
  	  display: block;
    	margin: auto;
    	height: auto;
    	width: inherit;
    	/* line-height: 9em; */
    	line-height: 110pt;
    	text-align: center;
    	text-decoration: none;
    	color: inherit;
  	}
  	.ring > a:hover {
  	  border-radius: inherit;
  	  width: inherit;
  	  height: inherit;
    	background: inherit;	
  	}
  	.green {
    	 border: thin solid green;
    	 background: rgba(50, 240, 0, 0.5);
  	}
  	.red {
    	border: thin solid red;
    	background: rgba(240, 50, 0, 0.5);
  	}
	</style>
</head>
<body>
  <div id="wrap">
  	<div class="ring green"><a href="http://www.google.co.jp/">eample.com</a></div>foo
  	<div class="ring red"><a href="http://www.google.co.jp/">foo.example.com</a></div>bar
  </div>
</body>
</html>

以上是关于html 円盘上のリンクを作ってみた的主要内容，如果未能解决你的问题，请参考以下文章

javascript スマホのみ电话番号へのリンクを张る

sh 减价でファイルリスト一覧リンクを作るためのシェルスクリプト（到位桶用）

html 様々な役割のリンク要素。

apache_conf 直リンクを防止する。

csharp [WIP]クリスマスっぽい何かを作っている

javascript 推特のシェアリンクをエンコード