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>

     效果

  • 相关阅读:
    C++常用工具收集
    Ubuntu禁用触摸板
    Vim简本
    JS原型链模式和继承模式
    JS原型链模式
    JS中的单例模式/工厂模式/构造函数模式(并非完全意义上的设计模式)
    JS中一道关于this和闭包的题
    JS中的this关键字
    JS闭包
    JS作用域和作用域链
  • 原文地址:https://www.cnblogs.com/150536FBB/p/13703615.html
Copyright © 2011-2022 走看看