zoukankan      html  css  js  c++  java
  • 一大盒子平均分为三个盒子

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>一大盒子平均分为三个盒子</title>
        <style>
            html, body { color:#222; font-family:Microsoft YaHei; margin:0; padding: 0; text-decoration: none; }
            body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
            img { border:0; }
            ol, ul,li{ list-style: none; margin:0; padding: 0; text-decoration: none}
            a { color:#000000; text-decoration: none; }
    
            .mainmenu:after { clear: both; content: " "; display: block; }
            .mainmenu li{ float:left;margin-left: 2.5%;  width: 30%;  border-radius:3px; overflow:hidden;}
           .mainmenu li a{ display:block;  color:#FFF; text-align:center }
            .mainmenu li a b{ display:block; height:80px;}
            .mainmenu li a img{ margin: 15px auto 15px;  width: 50px;  height: 50px;}
            .mainmenu li:nth-child(8n+1) {background-color:#36A1DB}
            .mainmenu li:nth-child(8n+2) {background-color:#678ce1}
            .mainmenu li:nth-child(8n+3) {background-color:#8c67df}
        </style>
    </head>
    <body>
            <div class="mainmenu">
                <li><a href="/" ><b><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_1.jpg" /></b></a></li>
                <li><a href="/" ><b><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_2.jpg" /></b></a></li>
                <li><a href="/" ><b><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_3.jpg" /></b></a></li>
            </div>
    </body>
    </html>

    效果图:

  • 相关阅读:
    洛谷 P2634 BZOJ 2152 【模板】点分治(聪聪可可)
    洛谷 P3819 松江1843路
    洛谷 P1005 矩阵取数游戏
    洛谷 P2712 摄像头
    洛谷 P2774 方格取数问题
    洛谷 P3369 BZOJ 3224 【模板】普通平衡树(Treap/SBT)
    洛谷 P2805 BZOJ 1565 植物大战僵尸
    洛谷 P2312 解方程
    洛谷 P3355 骑士共存问题
    洛谷 P2762 太空飞行计划问题
  • 原文地址:https://www.cnblogs.com/heyiming/p/6566689.html
Copyright © 2011-2022 走看看