html -- div table布局 -- 加布局简单例子

最新推荐文章于 2025-09-05 14:28:50 发布

原创

最新推荐文章于 2025-09-05 14:28:50 发布 · 1w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #html

本文通过实例展示了如何使用HTML的div元素进行简单的页面布局，包括创建一个基础的div布局和结合CSS进行样式定制。此外，还提及了将div元素应用于表格布局的方法。

div布局，div.html：

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta name="div" content="div layout div" />
    <meta />
    <title>div布局</title>
	<style>
		body{
			margin:0px;
			
		}
		div#container{
			width:100%;
			height:920px;
			background-color:darkgray;
		}
		div#header{
			width:100%;
			height:10%;
			background-color:blue;
		}
		div#content_left_menu{
			width:20%;
			height:80%;
			background-color:red;
			float:left;
		}
		div#content_body{
			width:60%;
			height:80%;
			background-color:darkcyan;
			float:left;
		}
		div#content_right_menu{
			width:20%;
			height:80%;
			background-color:darkgreen;
			float:left;
		}
		div#footer{
			width:100%;
			height:10%;
			background-color:green;
			clear:both;
		}
	</style>
  </head>
  &