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

2023-12-31 大全 28 作者：考证青年

我已经结束了关于C语言的课程，现在想要在前端有所尝试，一方面是C语言里的算法和内容的逻辑性很强，概念也很抽象，难度是不言而喻的，而且那些C/C++大佬的头发也很稀疏。

现在假期将至，刚好会有些时间可以自学。

在看了一些视频材料后，我也开始进行一些尝试。

1.div块的布局

先不对div进行设计


<!--告诉浏览器，你的文档以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>

先运行以下，看一下效果。

可以看到什么效果都没有

编写布局界面__布局元素有哪些

如果我们不对它进行样式的规定，是没有什么实际效果的

下面我们进行样式的设计


<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">                            width:100%;height:15%;background-color:#0F3;
}
#menu{width:30%;height:70%;background-color:#03C;float:left;                 width:70%;height:70%;background-color:#C66;float:left;         width:100%;height:15%;background-color:#F39;clear:left;