--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. crontab读取环境变量方法

    crontab如果不注意的话早晚会出问题,而且这种问题一旦出一次,就会永远记得,因为这种问题很折腾人.                                                  ...

  2. 【现代程序设计】【期末作业】【homework-09】

    作业要求说明: http://www.cnblogs.com/xinz/p/3441537.html 我在做一个什么样的应用: 展示如何逐步求解一个加权矩阵的 最大子矩阵 任意联通图形 下面是软件的截 ...

  3. Oracle分组函数cube VS rollup

    分析函数cube和rollup魅力首先请看下面例子1)创建表create table group_test (group_id int, job varchar2(10), name varchar2 ...

  4. cannot load such file -- openssl

    [test@localhost usr]$ /usr/local/ruby/bin/gem install bundler ERROR: Loading command: install (LoadE ...

  5. codeforces 652B z-sort（思维）

    B. z-sort time limit per test 1 second memory limit per test 256 megabytes input standard input outp ...

  6. wordpress后台打开慢/卡顿的解决方法

    ---------------------2014年12月29日更新--------------------- 我已经用下面提到的第三种方法禁用了谷歌字体了,最近wordpress后台还是莫名奇妙地非 ...

  7. linux下查看端口的占用情况

    前提:首先你必须知道,端口不是独立存在的,它是依附于进程的.某个进程开启,那么它对应的端口就开启了,进程关闭,则该端口也就关闭了.下次若某个进程再次开启,则相应的端口也再次开启.而不要纯粹的理解为关闭 ...

  8. AngularJS 学习笔记一

    ng-app 指令 ng-app 指令定义了 AngularJS 应用程序的 根元素. ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序. 稍后您将学习到 ng-app 如何通过一个 ...

  9. Codeforces Round #149 (Div. 2) E. XOR on Segment (线段树成段更新+二进制)

    题目链接:http://codeforces.com/problemset/problem/242/E 给你n个数,m个操作,操作1是查询l到r之间的和,操作2是将l到r之间的每个数xor与x. 这题 ...

  10. C#学习笔记（七）：智能编译器

    自动实现属性 C#提供的set/get可以让我们很方便的使用属性,但是某些情况下书写还是稍微麻烦了点,如下: public class Test { private string _name; pub ...