一、HTML<div>和<span>
1.1、HTML<div>元素
<div>是块级元素，他是可以用于组合其他HTML元素的容器。
<div>元素没有特定的含义，他和css一起使用，可以对大的内容块设置样式属性。
<div>元素的另一个用途就是对文档的布局。它取代了使用<table>布局老式布局方式。
1.2、HTML<span>元素
<span>元素是内联元素，可用做文本的容器。
<span>元素也没有特殊的含义，和css一起使用，用于对部分文本设置样式属性。
1.3、网站布局。
大多数网站都会把内容安排在多个列中(像杂志和报纸)
可以使用<div>或者<table>来创建多列，CSS进行对元素定位，或者为页面创建背景及色彩丰富的外观。
提示：即使可用HTML元素表格来创建漂亮的布局，但设计表格的目的是呈现表格式数据。表格不是布局工具。
以下样式属性设置的没有放置在CSS样式中，而是处在<head>元素中。推荐样式布局在css中设置。
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header{background-color:#99bbbb}
div#menu{background-color:#ffff99;height:200px;width:100px;float:left;}
div#content{background-color:#eeeeee;height:200px;width:400px;float:left;}
div#footer{background-color:#99bbbb;clear:both;text-align:centre;}
h1{margin-bottom:0;}
h2{margin-bottom:0;font-size:14px;}
ul{margin-bottom:0}
li{list-style:none}
</style>
</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>
浏览器显示结果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
