• div a块状布局


    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .odiv{width:100%;padding:0;margin:0;}
            .odiv a {
                float: left;
                width: 32%;
                height:46px;
                padding: 15px 0;
                text-align: center;
                display: block;
                background: #ECECEC;
                position: relative;
                color: #000;
                border-right: 1px solid #FCF7F7;
                border-bottom: 1px solid #FCF7F7;
                text-decoration: none;
    
                /*  border: 1px solid rgba(0,0,0,0.3);
                border: 1px solid #2D343E;
                border-right: 1px solid #333;
                border-bottom: 1px solid #333;  */
            }
            .btn-default {
                color: #333;
                border-color: rgba(0, 0, 0, 0.0);
            }
            .btn {
                display: inline-block;
                padding: 6px 12px;
                margin-bottom: 0px;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.42857;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                cursor: pointer;
                -moz-user-select: none;
                background-image: none;
                border: 1px solid transparent;
                /*border-radius: 4px;*/
                border-radius: 0;
            }
    
        </style>
    </head>
    <body>
    <div style="clear: both;margin-top:1px;">.</div>
    <div  class="odiv">
        <p ><!-- 顶部导航 --></p>
        <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">红楼梦</a>
        <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">平凡的世界</a>
        <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">曾国藩家书</a>
        <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">大谋小计50年</a>
        <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">阳光心态</a>
        <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">一花一世界</a>
        <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">商经</a>
        <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">创业者在知乎</a>
        <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">庄子</a>
        <a class="btn btn-default" href="#" onclick="javascript:location.href='#' ">人生若只如初见</a>
    </div>
    </body>
    </html>
    View Code
  • 相关阅读:
    Windows 操作系统引导过程 BIOS & EFI
    Mac 系统引导过程概述 & BootCamp 的秘密
    Windows 10 安装 Ubuntu 子系统
    nrm 安装及报错处理
    司马懿人物关系
    大江大河
    曹操人物关系
    必要条件探路(导数)
    该题七种想法(一题一课之外接球)
    欧拉-查柏(Euler-Chapple)公式及其推广
  • 原文地址:https://www.cnblogs.com/zxyun/p/4703106.html
Copyright © 2020-2023  润新知