div,css用ulli制作表格

1.第一种样式

#news {
    width:500px;
  <!--  border:2px solid #eee; -->
}
#news li{
    list-style-type:none;
     float:left;
    width: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; width:400px;margin:0px; padding:0px;}
.table li div { border-right:1px solid #ccc; border-bottom:1px solid #ccc; float:left; width: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>

时间: 2024-11-07 23:55:49

div,css用ulli制作表格的相关文章

Div+Css(1):Div+Css中transparent制作奥运五环

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>奥运五环</title> <style type="text/css"> body{ margin: 20px; background-color: #efefef; } ul.flag{ list-style: none;

DIV+CSS实战系列课程附实例源码

教程目录: 1._固定大小圆角边框. 2._.不固定大小圆角边框. 3.灵活的图片边框. 4.div.css视频教程--.ul横向菜单. 5.div.css视频教程_文字排版. 6.div.css视频教程_制作简单页面之ps布局. 7.div.css视频教程_.制作简单页面之css布局. 8.div.css视频教程_.制作简单页面之填充内容. 9.div.css视频教程_.如何改变布局成三列布局. 10.div.css.视频教程._页面组合式_菜单的调用. 11.DIV.CSS实战视频教程_.圆

div+css制作表格

html: <div class="table"> <h2 class="table-caption">花名册:</h2> <div class="table-column-group"> <div class="table-column"></div> <div class="table-column"></div&

DIV CSS制作网页时易犯的错误总结

CSS+DIV是网站标准(或称"WEB标准")中常用的术语之一,通常 为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的 方式实现各种定位.应用应用DIV+CSS编码时很容易犯一些错误.本文列举了一些常见的错误: 1. 检查HTML元素是否有拼写错误.是否忘记结束标记 Webjx.Com 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 网页教学

项目实战之玩转div+css制作自定义形状

项目需求: 要求制作上图所示的效果,能达到灵活可配的效果.我想初步想法是用div+css来制作. 抽象模型: 面对复杂的问题,要学会抽象当前的问题.下面的这个模型是我抽象出来的一个简单的解决方案. 这样我们就可以用各种css效果来组合出我们需要的效果,放到网站中可以灵活配置图形的各种样式. 技术难点: 1.如何做到让div旋转? -moz-transform: rotate(90deg); 如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转 2.如何设置div的层次关系? z

HTML、DIV+CSS网页制作中排版混乱的几种常见的情况

对于Web前端初学者或者经验不够丰富的人来说,出现页面排版布局混乱的情况并不罕见,有时候明明前面部分的网页都很整齐美观,可是在接下来的部分中经常会出现网页布局混乱,比如content无法调整到开发者需要的位置,或者出现页面重叠的现象.以下内容是我个人在网页制作过程中关于网页排版混乱及其解决办法的一些经验总结,不足之处,希望大家互相补充学习. )DIV+CSS网页错位的原因与解决方法 常常我们会遇到我们要设置在一行显示的布局,却因为种种原因造成了错位,看到结果是在一行的最后一个盒子布局错位掉下去了

div+css模式编写html静态网页例子_仿照网页制作

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="citizens.css"> 7 </head&

DIV+CSS制作二级横向弹出菜单,略简单

没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>纯DIV+CSS制作二级横向弹出菜单</title> 6 <style type="text/css"> 7 .menu{ 8 font-family:arial,sa

用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> <title>用div css模拟表格对角线</t