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>

  • 相关阅读:
    c++11强制转化类型
    关于parent指针以及对话框属性
    关于connect函数(Qt)
    lambda表达式
    学习过程中要注意的一些问题
    自动类型转换
    gakki
    排序算法(2)——简单选择排序和直接插入排序
    [Leetcode]414. Third Maximum Number
    [Leetcode]283. Move Zeroes
  • 原文地址:https://www.cnblogs.com/chencheng365/p/4352827.html
Copyright © 2011-2022 走看看