--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. [JS代码]如何判断ipad或者iphone是否为横屏或者竖屏 - portrait或者landscape

    //判断横屏或者竖屏 function orient() { //alert('gete'); if (window.orientation == 0 || window.orientation == ...

  2. TreeMap实现原理

    摘要 研究项目底层代码时,发现项目中的数据的缓存用的是TreeMap来实现对数据的缓存管理.本片博文就TreeMap的源码.原理以及用法做一个探究 在用TreeMap之前我们要对TreeMap有个整体 ...

  3. 惊艳的随机化方法 -World Search (homework-04)

    homeword04-word search 0. 摘要 本次作业,要求完成一个word search的程序,具体要求是: 输入:一个包含20-60个单词的文件,各单词不大于20个字母,无空格. 输出 ...

  4. HDU 1213 How Many Tables （并查集）

    How Many Tables 题目链接: http://acm.hust.edu.cn/vjudge/contest/123393#problem/C Description Today is Ig ...

  5. UVa657 The die is cast

    // 题意:给一个图案,其中'.'表示背景,非'.'字符组成的连通块为筛子.每个筛子里又包含两种字符,其中'X'组成的连通块表示筛子上的点 // 统计每个筛子里有多少个"X"连通块 ...

  6. PostgreSQL的 initdb 源代码分析之十五

    继续分析: if (pwprompt || pwfilename) get_set_pwd(); 由于我启动initdb的时候,没有设置口令相关的选项,故此略过. 接下来: setup_depend( ...

  7. 部署应用程序脚本+GUIRunOnce命令

    部署应用程序脚本: 应用程序配置:运行脚本(cmd.exe): 可执行程序:cmd.exe 参数:        /c net user ppc boc.123 /add 运行方式账户: NT AUT ...

  8. SQL Server活动监视器

    打开SQL Server活动监视器:

  9. hdu 2037 今年暑假不AC （java）

    问题: 此题为贪心算法入门,思路是先将各个时间段依照结束时间进行排序(按结束越早遍历.节目愈多), 再从第一个节目開始,假设下一节目開始时间大于上一节目的開始时间则进行该节目.依次递推. 输入时,要求 ...

  10. Swift学习笔记五

    基础运算符 Swift的大部分运算符和C及OC相同,也分一元二元多元的,这里只记录一些Swift特有的性质或写法. 赋值运算符( = ) 在等号右边是一个有多个值的元组时,它的成员值可以分解并同时分别 ...