__x__(42)0910第六天__表格布局 老旧的布局方法

Posted tianxiaxuange

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了__x__(42)0910第六天__表格布局 老旧的布局方法相关的知识，希望对你有一定的参考价值。

table 布局

不易于维护，耦合太严重了。

不利于搜索引擎检索。

 

 

效果图：技术分享图片

 

html代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表格</title>
        
        <link rel="stylesheet" type="text/css" href="css/tableweb.css" />
    </head>

    <body>
        Hello Web!`    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        table 是<b>块元素</b>，独占一行
        
        <table id="myweb">
            <tbody>
                <tr>
                    <td id="myhead"></td>
                </tr>
                
                <tr>
                    <td>
                        <table id="mybody">
                            <tbody>
                                <tr>
                                    <td id="leftside"></td>
                                    <td id="rightcontent"></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                
                <tr>
                    <td id="myfoot"></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

 

 

css代码：

@charset "utf-8";

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: #3e4e54;
}

#myweb{
    margin: 0px auto;
    width: 100%;
    height: 700px;
    
    /* 单元格之间的距离。*/
    border-spacing: 0px;
    
    /* 表格的边框合并。设置以后 border-spacing 自动失效*/
    border-collapse: collapse;
}

#myweb th,td{
    border: 1px yellow solid;
}

#myhead,#myfoot{
    width: 100%;
    height: 150px;
}

#mybody{
    margin: 0px auto;
    width: 100%;
    height: 100%;
    
    /* 单元格之间的距离。*/
    border-spacing: 0px;
    
    /* 表格的边框合并。设置以后 border-spacing 自动失效*/
    border-collapse: collapse;
}

#leftside{
    width: 20%;
}

#rightcontent{
    width: 80%;
}

 

 

以上是关于__x__(42)0910第六天__表格布局 老旧的布局方法的主要内容，如果未能解决你的问题，请参考以下文章

__x__(81)1017第十六天__ JavaScript 严格模式

python设计模式第六天原型模式

python学习笔记：第六天（流程控制语句）

IT十八掌作业_java基础第六天_接口与适配器模式多态内部类

java基础第六天_接口与适配器模式多态内部类

python第六天面向对象的编程