zoukankan      html  css  js  c++  java
  • 3行3列表格 table实现,div+css实现

    table实现:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>

    <body>
     <table width="446" height="236" border="1">
      <tr>
         <td width="111" rowspan="2" ></td>
            <td colspan="2"></td>
        </tr>
         <tr>
         <td width="134"></td>
            <td width="132"></td>
        </tr>
         <tr>
         <td width="111"></td>
            <td width="134"></td>
            <td width="132"></td>
        </tr>
       
      
     </table>
    </body>
    </html>

    div+css实现:(少最后三列)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    #big{border:1px solid #000; 500px; height:500px;}
    #bigleft{ border:1px solid #000;100px; height:200px; float:left;}
    #bigright{ border:1px solid #000;396px; height:200px; float:right;}
    #bigrightT{border:1px solid #000;396px; height:100px;}
    #bigrightB{border:1px solid #000;396px; height:96px;}
    #bigrightB1{border:1px solid #000;200px; height:96px;}
    #bigrightB1{border:1px solid #000;192px; height:96px;}
    #bigleft2{ border:1px solid #000;500px; height:300px; clear:both;}
    </style>
    </head>

    <body>
    <div id="big">
     <div id="bigleft"></div>
        <div id="bigright">
         <div id="bigrightT"></div>
            <div id="bigrightB">
             <div id="bigrightB1"></div>
                <div id="bigrightB2"></div>
            </div>
        </div>
        <div id="bigleft2">
       
        </div>
    </div>
    </body>
    </html>

    ----------------------------------------------------------------------------

    id对应的是#

    class对应的是.

    -----------------------------------------------------

    题:一个div在另外一个div中

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>

    <style type="text/css">
    #one{margin-left:160px;background-color:#F00;260px;height:240px;}
    #two{margin-right:10px;background-color:#FF0;210px;height:140px;margin-top:150px;margin-left:1px;}
    </style>
    </head>


    <body>
    <div  id="one">
       <div id="two">
        </div>

    </div>
    </body>
    </html>

  • 相关阅读:
    ORACLE CASE WHEN 及 SELECT CASE WHEN的使用方法
    myeclipse6.0下载及注冊码
    tcpdump抓包分析具体解释
    经常使用的android弹出对话框
    我对Laravel ThinkPHP Yii symfony2 CI cakephp 的看法
    MFC原创:三层架构01(人事管理系统)DAL
    struts2操作数据库
    EJB究竟是什么,真的那么神奇吗??
    Android简单发送邮件(可带附件)
    java实现SPFA算法
  • 原文地址:https://www.cnblogs.com/bluewelkin/p/3616201.html
Copyright © 2011-2022 走看看