--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. Spring4整合Hibernate4详细示例

    1. Spring整合Hibernate,主要是解决什么问题? a.让Spring提供的IOC容器来管理Hibernate的SessionFactory b.让Hibernate使用Spring提供的 ...

  2. Hibernate之继承映射

    1. Hibernate支持三种继承映射策略: –使用 subclass进行映射:将域模型中的每一个实体对象映射到一个独立的表中,也就是说不用在关系数据模型中考虑域模型中的继承关系和多态. –使用 j ...

  3. JNI调用测试

    有需求使用JNI调用,籍着这个机会按照<Linux下测试Java的JNI(Java Native Interface)>上进行了下测试. 这篇文章记录得很清楚了,对原理未做深入的分析,希望 ...

  4. ocp 1Z0-047 131-276题解析

    131. Which view would you use to display the column names and DEFAULT valuesfor a table?A. DBA_TABLE ...

  5. [C语言 - 4] 指针

    存放变量地址的变量 int a = 1; int *p; p = &a;   在64位系统中,占用8个字节 直接引用 间接引用 *p : 指针指向的变量的值 不要使用未初始化的指针     1 ...

  6. Educational Codeforces Round 7 - E. Ants in Leaves

    题目链接:http://www.codeforces.com/contest/622/problem/E 题意是给你一棵树,1为根,每个叶子节点有一个蚂蚁,移动到一个邻接节点时间耗费为1,一个节点上不 ...

  7. HDU 1010 Tempter of the Bone （DFS+剪枝）

    题意:从S走到D,能不能恰好用T时间. 析:这个题时间是恰好,并不是少于T,所以用DFS来做,然后要剪枝,不然会TEL,我们这样剪枝,假设我们在(x,y),终点是(ex,ey), 那么从(x, y)到 ...

  8. oracle 11g 之 result cache

    oracle 11g 之 result cache 今天是2013-10-12,打算最近时间研究一下shared pool的相关原理以及awr报告分析.今天学习一下在oracle 11g shared ...

  9. jeecms附件标签用法

    [#if content.attachments?size gt 0] [#list content.attachments as attach] <a id="attach${att ...

  10. 33条C#、.Net经典面试题目及答案[zt]

    33条C#..Net经典面试题目及答案[zt] 本文集中了多条常见的C#..Net经典面试题目例如“.NET中类和结构的区别”.“ASP.NET页面之间传递值的几种方式?”,并简明扼要的给出了答案,希 ...