zoukankan      html  css  js  c++  java
  • CSS:用DIV+CSS实现表格形式的数据排列

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>www.webjx.com</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    font-size:12px;
    color:#000;
    }

    #biaoge {
    405px;
    margin:50px auto;
    }

    #biaoge li,#biaoge li.biaotou {
    list-style-type:none;
    100px;
    height:30px;
    line-height:30px;
    text-align:center;
    float:left;
    margin-left:1px;
    margin-bottom:1px;
    background:#ccc;
    }

    #biaoge li.biaotou {
    background:#999;
    }
    </style>
    </head>
    <body>

    <ul id="biaoge">
    <li class="biaotou">第一列</li>
    <li class="biaotou">第二列</li>
    <li class="biaotou">第三列</li>
    <li class="biaotou">第四列</li>

    <li>数据1-1</li>
    <li>
    数据1-2</li>
    <li>数据1-3</li>
    <li>数据1-4</li>
    <li>数据2-1</li>
    <li>数据2-2</li>
    <li>数据2-3</li>
    <li>数据2-4</li>
    <li>数据3-1</li>
    <li>数据3-2</li>
    <li>数据3-3</li>
    <li>数据3-4</li>
    <li>数据4-1</li>
    <li>数据4-2</li>
    <li>数据4-3</li>
    <li>数据4-4</li>
    </ul>
    </body>

    </html>
  • 相关阅读:
    Navicat加载缓慢
    使用Typora上传博客到博客园
    echart柱状图X轴文字换行
    pc端可以滑动,手机端不能滑动
    select选择最近3年的年份查询
    JQ延时模糊查询
    reset.css
    base64加密
    第四次博客作业结对项目
    WPF DataGrid显示网格 和TImer定时器
  • 原文地址:https://www.cnblogs.com/JamyWong/p/1813889.html
Copyright © 2011-2022 走看看