首页 > 代码库 > Html5笔记 表格 布局

Html5笔记 表格 布局

2024-09-23 08:18:59   219人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5学习笔记</title>
    <style type="text/css">
        p{
            color: #ffff00;
        }
        body
        {
            margin: 0px;
        }
        #container
        {
            width: 100%;
            height: 950px;
            background-color: cornflowerblue;
        }
        #heading
        {
            width: 100%;
            height: 33%;
            background-color: #cccccc;
        }
        #content_menu{
            width: 30%;
            height: 57%;
            background-color: darkcyan;
            float: left;
        }
        #content_body{
            width: 70%;
            height: 57%;
            background-color: lightcoral;
            float: left;
        }
        #footing{
            width: 100%;
            height: 10%;
            background-color: #af845e;
            clear: both;
        }
    </style>
</head>

<body marginheight="0px" marginwidth="0px">
    <table width="100%" height="950px" style="background-color: #af845e">
        <tr>
            <td colspan="2" width="100%" height="10%" style="background-color: darkorange"> 这是表头，colspan是合并单元格命令</td>
        </tr>
        <tr>
            <td width="33%" height="80%" style="background-color: darkseagreen">左菜单</td>
            <td width="33%" height="80%" style="background-color: darkgreen">右菜单</td>
            <td width="33%" height="80%" style="background-color: darkred">
                <ul>
                    <li>锦秋社区</li>
                    <li>三号支沟</li>
                </ul>
            </td>
        </tr>
    </table>
    <div id="container">
        <div id="heading">头部</div>
        <div id="content_menu">内容菜单</div>
        <div id="content_body">内容主体</div>
        <div id="footing">底部</div>
        divTest
    </div>


    <br/><br/>
    <table border="1">
        <tr>
            <td>表格1</td>
            <td>表格2</td>
            <td>表格3</td>

        </tr>
        <tr>
            <td>表格2</td>
            <td>
                <ul type="square">
                    <li><a href=http://www.mamicode.com/"http://www.baidu.com" >m1</a> m1</li>
                    <a name="internalLink">内联測试</a>
                    <li>m2</li>
                    <li>m3</li>
                    <li><a href=http://www.mamicode.com/"#internalLink">转到上面的链接</a> </li>
                </ul>
                <p>以上是一个无序标签列表</p>
                <ol type="I" start="3">
                    <li>Nikolai</li>
                    <li>Soap</li>
                    <li>Price</li>
                </ol>
                <div style="color: aqua">以上是有序列表</div>



                <ul>
                    <li>德拉格维奇</li>
                        <ul>
                            <li>秘密电台</li>
                            <li>古巴革命</li>
                        </ul>
                </ul>
                <br/>以上是嵌套列表

                <dl>
                    <dt>使命6</dt>
                        <dd>马卡洛夫与谢菲尔德之争</dd>
                    <dt>使命8</dt>
                        <dd>141大战马卡洛夫</dd>
                        <dd>DeltaForce VS Makarov</dd>
                </dl>
                <br/>以上是自己定义列表，即自己定义每一个条目的标识符

                <br/>
                <a href=http://www.mamicode.com/"#internalLink">转到上面的链接</a>
            </td>

        </tr>
    </table>
</body>
</html>

Html5笔记 表格 布局


联系
我们