Chinaunix首页 | 论坛 | 博客
  • 博客访问: 316040
  • 博文数量: 69
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 759
  • 用 户 组: 普通用户
  • 注册时间: 2014-09-09 14:15
个人简介

〆 人生就是拼命地奔跑,和华丽的跌倒。 つ

文章分类

全部博文(69)

文章存档

2017年(2)

2016年(16)

2015年(21)

2014年(30)

分类: Html/Css

2016-07-08 11:01:13

一.table布局:

      1.table布局是传统的网页布局方式,早期网页由于内容较少,布局简单,都是使用tanle布局。
    
      2.优点:比较简单容易理解。

      3.缺点:对于复杂的布局,表格嵌套太多,比较繁琐,后期维护和修改很不方便。

      4.table布局思路:用表格把屏幕分成几块,不同的单元格存放不同的内容。

二.下面一个小实例:
      1.用到了内联框架iframe;

      使用Sublime编写源代码:

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>table布局</title>
  6. </head>
  7. <body style="margin: 0">
  8.     <table style="background: DarkGray; width: 100%; height: 392px;">
  9.         <tr style="background: green">
  10.             <td colspan="3" style="height: 10%"></td>
  11.         </tr>

  12.         <tr>
  13.             <td style="background: Lavender; width: 20%">
  14.                 <ul>
  15.                     <li style="list-style: none">
  16.                         <a href="" target="myframe">
  17.                          <img src="bd.png" width="150px" height="50px">
  18.                         </a>
  19.                         <a href="" target="myframe">
  20.                          <img src="fh.jpg" width="150px" height="50px">
  21.                         </a>
  22.                         <a href="" target="myframe">
  23.                          <img src="jd.png" width="150px" height="50px">
  24.                         </a>
  25.                     </li>
  26.                 </ul>
  27.             </td>
  28.             
  29.             <td colspan="2" style="background: Cornsilk">
  30.                 <iframe src="" width="100%" height="100%" name="myframe"></iframe>
  31.             </td>
  32.         </tr>

  33.         <tr style="background: blue">
  34.             <td colspan="3" style="height: 10%"></td>
  35.         </tr>
  36.     </table>
  37. </body>
  38. </html>
运行结果:
阅读(1305) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~