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>

  • 相关阅读:
    spoj227 树状数组插队序列问题
    hdu2838树状数组解逆序
    hdu2642二维树状数组单点更新
    hdu1556 树状数组区间更新单点查询板子
    hdu3015树状数组 poj1990的离散化版本
    poj1990两个树状数组
    Python中面向对象和类
    Python中面向对象和类
    Python中的字典dict
    Python中的字典dict
  • 原文地址:https://www.cnblogs.com/bluewelkin/p/3616201.html
Copyright © 2011-2022 走看看