markdown CSSのみでの日本地図

Posted 2021-05-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown CSSのみでの日本地図相关的知识，希望对你有一定的参考价值。

 ul.jp_map {
      position: relative;
      list-style-type: none;
      padding: 84% 0 0;
      margin: 0;
      border: solid 1px #000000;
      box-sizing: border-box;
    }
    
    .jp_map li {
      width: 7%;
      height: 10%;
      background-color: aqua;
      border: solid #ffffff 2px;
      box-sizing: border-box;
    }
    
    .jp_map li:nth-child(1) {
      position: absolute;
      top: 0;
      left: 85%;
      width: 15%;
    }
    
    .jp_map li:nth-child(2) {
      position: absolute;
      top: 11%;
      left: 85%;
      width: 14%;
      height: 5.5％;
    }
    
    .jp_map li:nth-child(3) {
      position: absolute;
      top: 16.5%;
      left: 92%;
    }
    
    .jp_map li:nth-child(4) {
      position: absolute;
      top: 26.5%;
      left: 92%;
    }
    
    .jp_map li:nth-child(5) {
      position: absolute;
      top: 16.5%;
      left: 85%;
    }
    
    .jp_map li:nth-child(6) {
      position: absolute;
      top: 26.5%;
      left: 85%;
    }
    
    .jp_map li:nth-child(7) {
      position: absolute;
      top: 36.5%;
      left: 92%;
    }
    
    .jp_map li:nth-child(8) {
      position: absolute;
      top: 46.5%;
      left: 92%;
    }
    
    .jp_map li:nth-child(9) {
      position: absolute;
      top: 46.5%;
      left: 85%;
    }
    
    .jp_map li:nth-child(10) {
      position: absolute;
      top: 46.5%;
      left: 78%;
    }
    
    .jp_map li:nth-child(11) {
      position: absolute;
      top: 56.5%;
      left: 85%;
    }
    
    .jp_map li:nth-child(12) {
      position: absolute;
      top: 56.5%;
      left: 92%;
    }
    
    .jp_map li:nth-child(13) {
      left: 85%;
      position: absolute;
      top: 66.5%;
    }
    
    .jp_map li:nth-child(14) {
      left: 78%;
      position: absolute;
      top: 66.5%;
    }
    
    .jp_map li:nth-child(15) {
      position: absolute;
      top: 36.5%;
      left: 78%;
      width: 14%;
    }
    
    .jp_map li:nth-child(16) {
      position: absolute;
      top: 36.5%;
      left: 71%;
    }
    
    .jp_map li:nth-child(17) {
      position: absolute;
      top: 36.5%;
      left: 64%;
    }
    
    .jp_map li:nth-child(18) {
      left: 64%;
      position: absolute;
      top: 46.5%;
    }
    
    .jp_map li:nth-child(19) {
      position: absolute;
      top: 56.5%;
      left: 78%;
    }
    
    .jp_map li:nth-child(20) {
      left: 71%;
      position: absolute;
      top: 46.5%;
      height: 20%;
    }
    
    .jp_map li:nth-child(21) {
      left: 64%;
      position: absolute;
      top: 56.5%;
    }
    
    .jp_map li:nth-child(22) {
      left: 71%;
      position: absolute;
      top: 66.5%;
    }
    
    .jp_map li:nth-child(23) {
      left: 64%;
      position: absolute;
      top: 66.5%;
    }
    
    .jp_map li:nth-child(24) {
      left: 57%;
      position: absolute;
      top: 66.5%;
    }
    
    .jp_map li:nth-child(25) {
      left: 57%;
      position: absolute;
      top: 46.5%;
    }
    
    .jp_map li:nth-child(26) {
      left: 50%;
      position: absolute;
      top: 46.5%;
    }
    
    .jp_map li:nth-child(27) {
      left: 50%;
      position: absolute;
      top: 56.5%;
    }
    
    .jp_map li:nth-child(28) {
      left: 43%;
      position: absolute;
      top: 46.5%;
      height: 20%;
    }
    
    .jp_map li:nth-child(29) {
      left: 57%;
      position: absolute;
      top: 56.5%;
    }
    
    .jp_map li:nth-child(30) {
      left: 50%;
      position: absolute;
      top: 66.5%;
    }
    
    .jp_map li:nth-child(31) {
      left: 36%;
      position: absolute;
      top: 46.5%;
    }
    
    .jp_map li:nth-child(32) {
      left: 29%;
      position: absolute;
      top: 46.5%;
    }
    
    .jp_map li:nth-child(33) {
      left: 36%;
      position: absolute;
      top: 56.5%;
    }
    
    .jp_map li:nth-child(34) {
      left: 29%;
      position: absolute;
      top: 56.5%;
    }
    
    .jp_map li:nth-child(35) {
      left: 22%;
      position: absolute;
      top: 51.5%;
    }
    
    .jp_map li:nth-child(36) {
      left: 36%;
      position: absolute;
      top: 78.5%;
    }
    
    .jp_map li:nth-child(37) {
      left: 36%;
      position: absolute;
      top: 68.5%;
    }
    
    .jp_map li:nth-child(38) {
      left: 29%;
      position: absolute;
      top: 68.5%;
    }
    
    .jp_map li:nth-child(39) {
      left: 29%;
      position: absolute;
      top: 78.5%;
    }
    
    .jp_map li:nth-child(40) {
      left: 14%;
      position: absolute;
      top: 46.5%;
    }
    
    .jp_map li:nth-child(41) {
      left: 7%;
      position: absolute;
      top: 46.5%;
    }
    
    .jp_map li:nth-child(42) {
      left: 0;
      position: absolute;
      top: 46.5%;
    }
    
    .jp_map li:nth-child(43) {
      left: 7%;
      position: absolute;
      top: 56.5%;
    }
    
    .jp_map li:nth-child(44) {
      left: 14%;
      position: absolute;
      top: 56.5%;
    }
    
    .jp_map li:nth-child(45) {
      left: 14%;
      position: absolute;
      top: 66.5%;
    }
    
    .jp_map li:nth-child(46) {
      left: 7%;
      position: absolute;
      top: 66.5%;
    }
    
    .jp_map li:nth-child(47) {
      left: 0;
      position: absolute;
      top: 76.5%;
    }

<ul class="jp_map">
      <li>
        <a href="#">北海道</a></li>
      <li>
        <a href="#">青森県</a></li>
      <li>
        <a href="#">岩手県</a></li>
      <li>
        <a href="#">宮城県</a></li>
      <li>
        <a href="#">秋田県</a></li>
      <li>
        <a href="#">山形県</a></li>
      <li>
        <a href="#">福島県</a></li>
      <li>
        <a href="#">茨城県</a></li>
      <li>
        <a href="#">栃木県</a></li>
      <li>
        <a href="#">群馬県</a></li>
      <li>
        <a href="#">埼玉県</a></li>
      <li>
        <a href="#">千葉県</a></li>
      <li>
        <a href="#">東京都</a></li>
      <li>
        <a href="#">神奈川県</a></li>
      <li>
        <a href="#">新潟県</a></li>
      <li>
        <a href="#">富山県</a></li>
      <li>
        <a href="#">石川県</a></li>
      <li>
        <a href="#">福井県</a></li>
      <li>
        <a href="#">山梨県</a></li>
      <li>
        <a href="#">長野県</a></li>
      <li>
        <a href="#">岐阜県</a></li>
      <li>
        <a href="#">静岡県</a></li>
      <li>
        <a href="#">愛知県</a></li>
      <li>
        <a href="#">三重県</a></li>
      <li>
        <a href="#">滋賀県</a></li>
      <li>
        <a href="#">京都府</a></li>
      <li>
        <a href="#">大阪府</a></li>
      <li>
        <a href="#">兵庫県</a></li>
      <li>
        <a href="#">奈良県</a></li>
      <li>
        <a href="#">和歌山県</a></li>
      <li>
        <a href="#">鳥取県</a></li>
      <li>
        <a href="#">島根県</a></li>
      <li>
        <a href="#">岡山県</a></li>
      <li>
        <a href="#">広島県</a></li>
      <li>
        <a href="#">山口県</a></li>
      <li>
        <a href="#">徳島県</a></li>
      <li>
        <a href="#">香川県</a></li>
      <li>
        <a href="#">愛媛県</a></li>
      <li>
        <a href="#">高知県</a></li>
      <li>
        <a href="#">福岡県</a></li>
      <li>
        <a href="#">佐賀県</a></li>
      <li>
        <a href="#">長崎県</a></li>
      <li>
        <a href="#">熊本県</a></li>
      <li>
        <a href="#">大分県</a></li>
      <li>
        <a href="#">宮崎県</a></li>
      <li>
        <a href="#">鹿児島県</a></li>
      <li>
        <a href="#">沖縄県</a></li>
    </ul>

CSSのみでの日本地図
-----------


A [Pen](https://codepen.io/inqsite/pen/MmVRrY) by [inqsite](https://codepen.io/inqsite) on [CodePen](https://codepen.io).

[License](https://codepen.io/inqsite/pen/MmVRrY/license).

以上是关于markdown CSSのみでの日本地図的主要内容，如果未能解决你的问题，请参考以下文章

php 170712 SVGをcssのみで导入

php 170831 cssのみでタブ切り替え

scss 170915【170831cssのみでタブ切り替え】実装

html 20181031 object-fitをCSSのみでIEにも対応

swift KVS + FPのみでなんとかする版

python 蟒蛇の瓶子で书いているAPIをテストするために，WebTest的を使ったテストツールを试してみました.unittestの基本的な构成のみですが，自分用メモ及公开しておきます。