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

最新推荐文章于 2024-07-28 08:03:31 发布

Younge__

最新推荐文章于 2024-07-28 08:03:31 发布

阅读量1w

点赞数 4

分类专栏： html 文章标签：布局 html

本文链接：https://blog.csdn.net/yongaini10/article/details/52419836

版权

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

摘要由CSDN通过智能技术生成

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>
  <body>
	<div id="container">
		<div id="header">头部</div>
		<div id="content_left_menu">左菜单</div>
		<div id="content_body">内容主体</div>
		<div id="content_right_menu">右菜单</div>
		<div id="footer">底部</div>
	</div>
  &