用table和div元素实现简单的布局

我已经结束了关于C语言的课程，现在想要在前端有所尝试，一方面是C语言里的算法和内容的逻辑性很强，概念也很抽象，难度是不言而喻的，而且那些C/C++大佬的头发也很稀疏。
在这里插入图片描述
现在假期将至，刚好会有些时间可以自学。
在看了一些视频材料后，我也开始进行一些尝试。
1.div块的布局
先不对div进行设计

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--告诉浏览器，你的文档以HTML格式遵循W3C标准XHTML1.0协议--!>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--这个网页的格式是文本的,utf8的编码--！>
<title>div布局</title>
</head>

<body>
   <div id="banmain">  <!--全局的div块--!>
       <div id="heading">
          这是头部             <!--定义头部的div块--！>
       </div>
       <div id="menu">
       这块做一个类似菜单的东西    <!--定义左边的栏目--！>
       </div>
       <div id="main">
       主体部分          <!--定义留出的主要空间--！>
       </div>
       <div id="weiba">
       尾部             <!--定义尾部--！>
       </div>
   </div>
</body>
</html>

先运行以下，看一下效果。
在这里插入图片描述可以看到什么效果都没有
如果我们不对它进行样式的规定，是没有什么实际效果的
下面我们进行样式的设计

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div布局</title>
</head>
<style type="text/css">     <!--加入CSS样式--！>
#banmain{                       <!--#索引全局元素--！>
	width:100%;                   <!--宽度100%--！>
	height:900px;               <!--高度900个像素--！>
	background-color:#0C2;        <!--背景颜色--！>
}
#heading{
	width:100%;
	height:15%;
	background-color:#0F3;
}
#menu{
	width:30%;
	height:70%;
	background-color:#03C;
	float:left;                 <!--设置浮动，从左到右--！>
}
#main{
	width:70%;
	height:70%;
	background-color:#C66;
	float:left;         <!--设置浮动，从左到右--！>
}
#weiba{
	width:100%;
	height:15%;
	background-color:#F39;
	clear:left;   <!--清除浮动效果--！>
}
	
</style>

<body>
   <div id="banmain">
       <div id="heading">
          这是头部
       </div>
       <div id="menu">
       这块做一个类似菜单的东西
       </div>
       <div id="main">
       主体部分
       </div>
       <div id="weiba">
       尾部
       </div>
   </div>
</body>
</html>

下面再看一下效果；
在这里插入图片描述现在刚才的一些文字变成了4块颜色不同的区域，
我门就可以在这些区域中再进行改变，加入图片，链接，表单什么的。
2.table元素的布局
table元素是一种表格元素，就像这个Markdown编辑器中的表格编辑可能是从table元素简化来的
首先我们要知道一些基本的标签如
th 定义表格的表头。

tr 定义表格的行。

td 定义表格单元。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table元素布局</title>
</head>

<body marginheight="0px" marginwidth="0px">
<table width="100%" height="900px">  <!--设置长和宽--！>
    <tr>
       <td colspan="2" width="100%" height="10%" bgcolor="#00FFFF">
       这里是头部
       </td> <!--设置长和宽和背景颜色，同时合并2个单元格--！>
    </tr>
    
    <tr>
       <td width="30%" height="70%" bgcolor="#FF3333">
       左边
       </td>
       <td width="70%" height="70%" bgcolor="#9933CC">tamade</td>
    </tr>
    <tr>
       <td colspan="2" width="100%" height="20%" bgcolor="#00FF33"> 这里是末尾</td>
    </tr>
</table>
</body>
</html>

运行如下
在这里插入图片描述如果要将边框清除，则将body的margin设为0即可。
现在随便加入一个列表并链接样式文件和图片如图所示
也可以在其中设计表单来丰富其中的内容。
对于这两种方法我觉得第1种方法用DIV进行控制更加简单和方便，和样式的结合也更容易。

用table和div元素实现简单的布局

猜你喜欢