zoukankan      html  css  js  c++  java
  • div,css用ulli制作表格

    1.第一种样式

    #news {
        500px;
      <!--  border:2px solid #eee; -->
    }
    #news li{
        list-style-type:none;
         float:left;
        100px;
        text-align:center;
        background:#ccc;
        margin-right:2px;
        margin-bottom:2px;
        line-height:30px;
        font-size:14px;
    }
    #news li.bt{font-size:16px; font-weight:bold; background:#999;}

    <div id="news">
            <ul>                
                <li class="bt">0</li>
                <li class="bt">0</li>
                <li class="bt">0</li>
                <li class="bt">0</li>
                
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                
                <li>2</li>
                <li>2</li>
                <li>2</li>
                <li>2</li>
                
                <li>3</li>
                <li>3</li>
                <li>3</li>
                <li>3</li>
                
                <li>4</li>
                <li>4</li>
                <li>4</li>
                <li>4</li>
            </ul>
        </div>

    2.第二种样式

    .table{border-top:1px solid #ccc; border-left:1px solid #ccc; 400px;margin:0px; padding:0px;}
    .table li div { border-right:1px solid #ccc; border-bottom:1px solid #ccc; float:left; 99px; height:30px; padding-top:10px;text-align:center;}
    ul{ list-style: none; float:left; list-style-type: margin:0px; padding:0px;*margin:0px; padding:0px;}

    <ul class="table" >
    <li style="float:left"><div>11111</div><div>222222</div><div>33333333</div><div>4444</div></li>
    <li style="float:left"><div>dfdf</div><div>dfdf</div><div>dfdf</div><div>dfdf</div></li>
    <li style="float:left"><div>dfdf</div><div>dfdf</div><div>dfdf</div><div>dfdf</div></li>
    <li style="float:left"><div>dfdf</div><div>dfdf</div><div>dfdf</div><div>dfdf</div></li>
    </ul>

  • 相关阅读:
    超酷的元素周期表
    TestLink在线Excel用例转换xml
    我也学习JAVA多线程-join
    request.getSession(true/false)的区别
    nginx location配置详细解释
    RestTemplate--解决中文乱码
    扇贝-每日一句
    Hexo博客系列(三)-将Hexo v3.x个人博客发布到GitLab Pages
    C程序的内存分区(节选自黑马训练营day1)
    CodeBlocks更换界面主题界面、汉化及去掉注释及字符串的下划线(汉化包的链接来自本站的BeatificDevin大神)
  • 原文地址:https://www.cnblogs.com/chencheng365/p/4352827.html
Copyright © 2011-2022 走看看