--2013年6月24日12:08:49

今天突然不想用table了，就在园子里找了几个用css的解决办法，直接上代码：

--1、html代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <%@ page language="java" contentType="text/html;charset=UTF-8" %>

   <head>

     <title>演示用css实现表格</title>

     <link rel="stylesheet" type="text/css" href="../css/mycss.css">

   </head>

 <body>

 <center>

 下面是表格内容

     <div id="main">

     <ul>

         <li>1-1</li>

             <li class="r">1-2</li>

         <li>2-1</li>

             <li class="r">2-2</li>

         <li>3-1</li>

             <li class="r">3-2</li>

         <li>3-1</a></li>

             <li class="r">3-2</li>

         <li class="b">最后一行</li>

             <li class="b r">就是不一样</li>

     </ul>

     </div>

 </center>

 <style type="text/css">

 /*用css实现表格  */

 * {margin:0;padding:0}

 #main {border-style:solid;border-width:0px;border-color:blue;}

 #main ul{width:390px;height:auto;list-style:none;//decimal}

 #main li {border-left:1px solid #ccc;border-top:1px solid #ccc;

 float:left;width:190px;

 height:33px;

 text-align:center;

 line-height:33px}

 #main li.b {border-bottom:1px solid #ccc}

 #main li.r {border-right:1px solid #ccc}

 </style>

  </body>

 </html>

--2、css代码：已经写在页面中了。

效果图：

用css做类似表格的布局的更多相关文章

  1. css 一行自适应等比例布局

    一.浮动布局+百分比 .row { width:100%; overflow:hidden; zoom:1; } .item { float: left; width: 20%; } 该样式兼容性较好 ...

  2. CSS 文本和表格中文字溢出显示省略号

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  3. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  4. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...

  5. 如何使用Flexbox和CSS Grid，实现高效布局

    CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来 ...

  6. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  7. 如何使用 Flexbox 和 CSS Grid，实现高效布局

    CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来 ...

  8. 范仁义html+css课程---8、新元素布局

    范仁义html+css课程---8.新元素布局 一.总结 一句话总结: 推荐用新标签(语义化的标签)来布局:header(头部),footer(尾部),aside(侧边栏),nav(导航),artic ...

  9. [19/06/08-星期六] CSS基础_表格&表单

    一.表格 如生活中的Excel表格,用途就是同来表示一些格式化的数据,如课程表.工资条.成绩单. 在网页中也可以创建出不同的表格,在HTML中使用table标签来创建一个表格.table是个块元素. ...

随机推荐

  1. HDU-4726 Kia's Calculation 贪心

    题目链接:http://acm.hdu.edu.cn/userstatus.php?user=zhsl 题意:给两个大数,他们之间的加法法则每位相加不进位.现在可以对两个大数的每位重新排序,但是首位不 ...

  2. 探索ORACLE之ASM概念

    一.     ASM(自动存储管理)的来由: ASM是Oracle 10g R2中为了简化Oracle数据库的管理而推出来的一项新功能,这是Oracle自己提供的卷管理器,主要用于替代操作系统所提供的 ...

  3. jQuery-validate error messages in Twitter ...

    http://www.jefclaes.be/2012/11/jquery-validate-error-messages-in.html something satisfactory. In thi ...

  4. Apache Spark Mesos

    Mesos是一个资源管理框架,提供类似于YARN的功能. 用户可以在其中插件式地运行Spark. MapReduce. Tez等计算框架的任务. Mesos会对资源和任务进行隔离,并实现高效的资源任务 ...

  5. 链表逆序(JAVA实现)

    题目:将一个有链表头的单向单链表逆序 分析: 链表为空或只有一个元素直接返回: 设置两个前后相邻的指针p,q,使得p指向的节点为q指向的节点的后继: 重复步骤2,直到q为空: 调整链表头和链表尾: 图 ...

  6. POJ 1062 昂贵的聘礼 （最短路）

    昂贵的聘礼 题目链接: http://acm.hust.edu.cn/vjudge/contest/122685#problem/M Description 年轻的探险家来到了一个印第安部落里.在那里 ...

  7. CodeForces 732D Exams (二分)

    题意:某人要考试,有n天考m个科目,然后有m个科目要考试的时间和要复习多少天才能做,问你他最早考完所有科目是什么时间. 析:二分答案,然后在判断时,直接就是倒着判,很明显后出来的优先,也就是一个栈. ...

  8. Android BLE开发之Android手机搜索iBeacon基站

    本文来自http://blog.csdn.net/hellogv/ ,引用必须注明出处! 上次讲了Android手机与BLE终端之间的通信,而最常见的BLE终端应该是苹果公司倡导的iBeacon基站. ...

  9. Covarience And ContraVariance

    using System; using System.Collections.Generic; using System.IO; namespace CovarientAndContraVarient ...

  10. Codeforces GYM 100114 D. Selection 线段树维护DP

    D. Selection Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100114 Descriptio ...