Chinaunix首页 | 论坛 | 博客

泉水南

首页　| 　博文目录　| 　关于我

小闹腾

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

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

文章分类

全部博文（69）

文章存档

2017年（2）

2016年（16）

2015年（21）

2014年（30）

我的朋友
最近访客
推荐博文
table布局

分类： 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>

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

  35.         <tr style="background: blue">
  36.             <td colspan="3" style="height: 10%"></td>
  37.         </tr>
  38.     </table>
  39. </body>
  40. </html>
运行结果：
阅读(1361) | 评论(0) | 转发(0) |
0

上一篇：一张简单的3DsMax场景图

下一篇：JavaScript-简单介绍与准备知识

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6