zoukankan      html  css  js  c++  java
  • html+css实现蜂窝状分布排列

    html

       <ul>
            <li>
              <span class="hex"><span class="hexIn">1</span></span>
            </li>
            <li>
              <span class="hex"><span class="hexIn">2</span></span>
            </li>
            <li>
              <span class="hex"><span class="hexIn">3</span></span>
            </li>
            <li>
              <span class="hex"><span class="hexIn">4</span></span>
            </li>
            <li>
              <span class="hex"><span class="hexIn">5</span></span>
            </li>
            <li>
              <span class="hex"><span class="hexIn">6</span></span>
            </li>
            <li>
              <span class="hex"><span class="hexIn">7</span></span>
            </li>
            <li>
              <span class="hex"><span class="hexIn">8</span></span>
            </li>
            <li>
              <span class="hex"><span class="hexIn">9</span></span>
            </li>
            <li>
              <span class="hex"><span class="hexIn">10</span></span>
            </li>
        </ul>

    css

        <style>
            ul {
                margin: 0;
                padding: 0;
            }
            ul {
                list-style: none;
                 560px;
                margin: 100px auto;
            }
            li {
                float: left;
                margin: 0 5px;
                height: 96px;
            }
            .hex {
                overflow: hidden;
                display: block;
                 100px;
                height: 116px;
                transform: rotate(-60deg) skewY(30deg);
            }
            .hexIn {
                background-color: #ccc;
                display: block;
                 100px;
                height: 116px;
                line-height: 116px;
                text-align: center;
                transform: skewY(-30deg) rotate(60deg);
            }
            li:nth-child(9n + 6) {
                margin-left: 60px;
            }
        </style>

     效果

  • 相关阅读:
    jQuery的$.extend
    es5中的严格模式理解(‘use strict’)
    微信小程序制作下拉列表
    微信小程序之路由
    微信小程序自定义弹窗
    微信小程序小总结
    npm link的使用
    vue 全局变量的处理方式
    大屏项目屏幕分辨率适配
    git flow的使用
  • 原文地址:https://www.cnblogs.com/150536FBB/p/13703615.html
Copyright © 2011-2022 走看看