HTML中<div>标签的一个简单的使用和介绍

来源：互联网发布：mac日历如何共享编辑：程序博客网时间：2024/05/16 06:02

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div#container{width: 500px}
div#header{background-color: #99bbbb}
div#menu{background-color:#ffff99;height: 200px;width:150px;float: left;}
div#content{background-color: #EEEEEE;height: 200px;width:350px;float: right;}
div#footer{background-color: #99bbbb;clear: both;text-align: center;}
h1{margin:bottom:0;}
h2{margin-bottom:0;font-size: 18px;}
ul{margin:0;}
li{list-style: none;}
</style>
<title>布局练习</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>
</body>
</html>

0 0