--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. 【现代程序设计】【期末作业】【homework-09】

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

  2. SpringMVC学习笔记

    1.严格实现MVC设计思想的框架,严格分层,减少耦合: 2.组件(红色必需) 2.1 DispatcherServlet 前端控制器 2.2 Controller 业务控制器 2.3 Handler ...

  3. BUILD_BUG_ON 的解释

    知乎上个问题<C 语言有什么奇技淫巧?>排名第一的是一个“抖机灵”的答案. C有一个鲜为人知的运算符叫”趋向于”, 写作“-->”.比如说如果要实现一个倒数的程序,我们可以定义一个变 ...

  4. POJ 1511 Invitation Cards （最短路spfa）

    Invitation Cards 题目链接: http://acm.hust.edu.cn/vjudge/contest/122685#problem/J Description In the age ...

  5. MSXML读取XML中文

    // QueryNodes.cpp : Defines the entry point for the console application. // #include <stdio.h> ...

  6. [5] Zygote

    Android设备中的两大进程,如下图 1,由init进程创建的Daemon进程 2,由 Zygote进程创建的应用程序进程 什么是Zygote? zygote是“受精卵”的意思.在Android里, ...

  7. UVaLive 7374 Racing Gems (DP，LIS)

    题意:以辆赛车可以从x轴上任意点出发,他的水平速度允许他向每向上移动v个单位,就能向左或向右移动v/r个单位(也就是它的辐射范围是个等腰三角形) 现在赛车从x轴出发,问它在到达终点前能吃到的最多钻石. ...

  8. Unity3D中关于场景销毁时事件调用顺序的一点记录

    先说一下我遇到的问题,我弄了一个对象池管理多个对象,对象池绑定在一个GameObject上,每个对象在OnBecameInvisible时会进行回收(即移出屏幕就回收),但是当场景切换或停止运行程序时 ...

  9. Linux下修改用户home目录

    一般在Linux上新建一个用户,会在/home目录下自动创建一个以用户名命名的home目录 修改linux下用户自动建立的家目录 vi编辑器打开/etc/default/useradd 这个文件,然后 ...

  10. Java：浅谈InputStream的close方法

    原则:最好在任何时候使用InputStream或者OutputStream的时候,在finally中调用close()方法,显式关闭. 一个典型的示例 InputStream in = null; t ...