zoukankan      html  css  js  c++  java
  • 用css做类似表格的布局

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

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

    --1、html代码:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <%@ page language="java" contentType="text/html;charset=UTF-8" %>
     3   <head>   
     4     <title>演示用css实现表格</title>  
     5     <link rel="stylesheet" type="text/css" href="../css/mycss.css"> 
     6   </head>  
     7 <body>
     8 <center>
     9 下面是表格内容
    10     <div id="main"> 
    11     <ul> 
    12         <li>1-1</li>
    13             <li class="r">1-2</li> 
    14         <li>2-1</li>
    15             <li class="r">2-2</li> 
    16         <li>3-1</li>
    17             <li class="r">3-2</li> 
    18         <li>3-1</a></li>
    19             <li class="r">3-2</li> 
    20         <li class="b">最后一行</li> 
    21             <li class="b r">就是不一样</li> 
    22     </ul>
    23     </div>
    24 </center>
    25 
    26 <style type="text/css"> 
    27 /*用css实现表格  */
    28 * {margin:0;padding:0} 
    29 #main {border-style:solid;border-width:0px;border-color:blue;} 
    30 #main ul{width:390px;height:auto;list-style:none;//decimal} 
    31 #main li {border-left:1px solid #ccc;border-top:1px solid #ccc;
    32 float:left;width:190px;
    33 height:33px;
    34 text-align:center;
    35 line-height:33px} 
    36 #main li.b {border-bottom:1px solid #ccc} 
    37 #main li.r {border-right:1px solid #ccc} 
    38 </style>  
    39  </body>
    40 </html>

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

    效果图:

     

  • 相关阅读:
    windows设置自动登录
    windows zabbix agent
    同时给AD用户加入多个组
    zabbix监控DELL戴尔idrac卡
    Windows安装Zabbix Agent
    各服务器厂商默认密码
    AD域管理命令工具
    linux服务五——rsync 服务部署详解
    linux服务四——SSH服务详解
    LINUX核心命令实战总结十三——系统常用内置命令
  • 原文地址:https://www.cnblogs.com/qinche/p/3152284.html
Copyright © 2011-2022 走看看