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第六天__表格布局 老旧的布局方法的更多相关文章

  1. __x__(44)0910第六天__表单

    form表单: form必须属性:action,指定一个服务器地址. 若希望表单中的数据发送给服务器,必须设置name属性. 用户填写的信息,将会追加在url地址?后面,以查询字符串的形式发送给服务器 ...

  2. __x__(45)0910第六天__各种表单

    效果图: html代码: <!doctype html> <html> <head> <meta charset="utf-8" /> ...

  3. __x__(46)0910第六天__框架集

     框架集frameset 和 内联框架iframe 的作用类似: 在一个页面中,引入其他的外部html页面. 框架集可以同时引入多个页面. 在 html5 中,推荐使用框架集,而不推荐使用iframe ...

  4. __x__(49)0910第六天__命名规范

    id class 命名规范: 小驼峰命名法: aaaBbbCcc,helloWorld 大驼峰命名法: AaaBbbCcc,HelloWorld 匈牙利命名法: 类型+描述 formUserName, ...

  5. __x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷

    <div class="box1"> <tabl></table> <div class="box2">< ...

  6. __x__(47)0910第六天__IE6到IE11对于包含中文路径的png显示问题

    问题:IE6额外地除了中文路径外,对于png24的支持度不高,以致于无法透明. 解决方法1,png8 替换: png8 比 png24 小,质量较低,但是在这里可以替代,以解决问题. 使用 ps 打开 ...

  7. __x__(48)0910第六天__CSS Hack

    CSS Hack: 不到万不得已,不要使用.不易于维护. 有一些情况,需要一段特殊代码在遇到特殊浏览器环境才执行,而在其他条件下,不执行. 此时,CSS Hack 就能实现. CSS Hack 实际上 ...

  8. 浅谈分析表格布局与Div+CSS布局的区别

    (1)表格布局 表格布局容易掌握,布局方便.但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距,这样布局的网页中表格会生成大量难以阅读和维护的代码:而且表格布局的网页要等整个表 ...

  9. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

随机推荐

  1. 第十节：基于MVC5+Unity+EF+Log4Net的基础结构搭建

    一. 前言 本节继续探讨一种新的框架搭建模式,框架的结构划分和上一节是相同的,本节IOC框架换成了Unity,并且采用构造函数注入的方式,另外服务层的封装模式也发生了变化,下面将详细的进行探讨. (一 ...

  2. Latex "Error: Extra alignment tab has been changed to \cr. "

    Latex 编译时出现 Error: Extra alignment tab has been changed to \cr.  是因为\begin{tabular}后面的参数指定为7列,而实际排了8 ...

  3. Newton's Dark Secrets《牛顿探索》

    1643年1月4日,在英格兰林肯郡小镇沃尔索浦的一个自耕农家庭里,牛顿诞生了.牛顿是一个早产儿,出生时只有三磅重,接生婆和他的亲人都担心他能否活下来.谁也没有料到这个看起来微不足道的小东西会成为了一位 ...

  4. topshelf 服务启动运行

    topshlf 服务启动运行方式 安装:servicename.exe install 启动:servicename.exe start 卸载:servicename.exe uninstall

  5. Spring系列(三) Bean装配的高级技术

    profile 不同于maven的profile, spring的profile不需要重新打包, 同一个版本的包文件可以部署在不同环境的服务器上, 只需要激活对应的profile就可以切换到对应的环境 ...

  6. localhost和127.0.0.1的区别

    localhost(local)是不经网卡传输,它不受网络防火墙和网卡相关的的限制. 127.0.0.1是通过网卡传输,依赖网卡,并受到网络防火墙和网卡相关的限制. ::1     是IPv6中的12 ...

  7. 基于深度学习的目标检测技术演进：R-CNN、Fast R-CNN、Faster R-CNN

    object detection我的理解,就是在给定的图片中精确找到物体所在位置,并标注出物体的类别.object detection要解决的问题就是物体在哪里,是什么这整个流程的问题.然而,这个问题 ...

  8. mac 电脑进入root用户

    一.使用命令:sudo su -:命令执行后输入密码

  9. 滑动时候报错：Unable to preventDefault inside passive event listener, 移动端滑动性能优化

    https://www.jianshu.com/p/04bf173826aa 记录下  这篇帖子 解决办法1: 在touch的事件监听方法上绑定第三个参数{ passive: false }, 通过传 ...

  10. centos6.5环境下的web项目mysql编码方式导致的中文乱码问题

    最近在centos6.5下部署web项目时网页出现中文乱码的问题,在排除掉php之后,把问题锁定在mysql的编码方式上. 解决方法如下: 首先进入mysql命令行,输入命令:SHOW VARIABL ...