轻松上手HTML：网页布局元素DIV
- 前端
- 2024-06-01
- 408热度
- 0评论
认识DIV元素
div元素在网页中是最常用的元素，可以把div元素看成一个矩形区域的容器，在这个容器内可以存放其它HTML元素，也包括div元素，因此div元素是可以嵌套的。借助于CSS样式，能够把div元素放置在网页的任何位置，实现网页的精致排版。为了更好理解div的功能和使用方法，文中使用了一些CSS样式，对这些样式的作用本文不作详解，在后面CSS的课程中，会详细解释CSS样式的作用。
没有样式的div就是一个简单的具备容器功能的块元素，起到分段的作用。例如下面的网页文档展示了div分段的作用。
<html>
<head>
<title>落花生</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>落花生</h1>
<h5>许地山</h5>
<hr>
<div>
我们家的后园有半亩空地。母亲说：“让它荒着怪可惜的，你们那么爱吃花生，就开辟出来种花生吧。”我们姐弟几个都很高兴，买种，翻地，播种，浇水，没过几个月，居然收获了。
</div>
<div>
母亲说：“今晚我们过一个收获节，请你们的父亲也来尝尝我们的新花生，好不好？”母亲把花生做成了好几样食品，还咐附就在后园的茅亭里过这个节。
</div>
</body>
</html>
下图是浏览器的显示效果。从显示效果可以看出，使用div元素的效果和段落元素p的效果相同，都起到了分段的作用。如果div元素仅起到分段的作用，那就没有多大用处了，div最厉害的地方是对网页的布局作用。一般来说网页设计者会把div元素当作容器来使用，用于网页的布局。即把div放置在网页的一个位置，然后在div内部放置更多的HTML元素，通过多个div的布局可以让网页有更好的排版效果。
在上面的的HTML文档中，《落花生》这篇文章的内容占据了整个网页的宽度。
网页分栏
现在需要把网页的宽度分为左右两部分，网页的左边部分放置《落花生》文章内容，网页的右边部分放置《济南的冬天》文章内容。这样的网页布局也称为左右布局或两栏布局，只要给div元素加上浮动样式，就可以轻松实现网页的两栏布局。例如下面的网页文档实现了网页的两栏布局。
<html>
<head>
<title>落花生与济南的冬天</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div style="float:left; width:45%;">
<h1>落花生</h1>
<h5>许地山</h5>
<hr>
<p>
我们家的后园有半亩空地。母亲说：“让它荒着怪可惜的，你们那么爱吃花生，就开辟出来种花生吧。”我们姐弟几个都很高兴，买种，翻地，播种，浇水，没过几个月，居然收获了。
</p>
<p>
母亲说：“今晚我们过一个收获节，请你们的父亲也来尝尝我们的新花生，好不好？”母亲把花生做成了好几样食品，还咐附就在后园的茅亭里过这个节。
</div>
<div style="float:right; width:45%;">
<h1>济南的冬天</h1>
<h5>老舍</h5>
<hr>
<p>
对于一个在北平住惯的人，像我，冬天要是不刮风，便觉得是奇迹；济南的冬天是没有风声的。对于一个刚由伦敦回来的人，像我，冬天要能看得见日光，便觉得是怪事；济南的冬天是响晴的。自然，在热带的地方，日光是永远那么毒，响亮的天气，反有点叫人害怕。可是，在北中国的冬天，而能有温晴的天气，济南真得算个宝地。
</p>
设若单单是有阳光，那也算不了出奇。请闭上眼睛想：一个老城，有山有水，全在天底下晒着阳光，暖和安适地睡着，只等春风来把它们唤醒，这是不是个理想的境界？
<p>
</div>
</body>
</html>
下图是浏览器的显示效果。从显示效果可以看出，网页实现了上述要求，网页被布局为左右两栏，左边一栏是一个div元素，右边一栏也是一个div元素。左边一栏的div元素添加了居左浮动样式属性和值为45%（浏览器窗口宽度的45%）的宽度样式属性，右边一栏的div元素添加了居右浮动样式属性和值为45%（浏览器窗口宽度的45%）的宽度样式属性。两个div的宽度属性分别设置为45%，剩余的10%宽度为两栏间的间距。在上面的网页文档中，div作为容器元素起到了对网页进行布局的作用。
导航条
网页文档一般都有导航条，大多数导航条被布局在网页的顶部。应用div元素可以为上面的网页文档添加导航条。在body元素起始标签下面添加下面的网页代码。
<div style="width:100%; height:45px; background-color:#000000; color:#ffffff;">
<span style="height:45px;line-height:45px;margin-left:20px;">落花生</span>
<span style="height:45px;line-height:45px;margin-left:20px;">济南的冬天</span>
</div>
为了网页美观使用了很多CSS样式属性，现在不明白这些样式属性的作用没关系，后面的CSS课程会详细讲述。width和height的属性比较容易理解，就是设置网页元素的宽度和高度，单位是px（1px是1像素）；background-color是网页元素的背景色，color是文本颜色，颜色的值采用十六进制表示；margin-left设置被应用该样式的元素与左边网页元素相隔的距离。
span属于行元素，可以把行内内容划分为多个行区域，每个行区域可以单独应用样式属性。导航条使用了2个span元素，把导航条分成两个行区域，第一个行区域放置内容“落花生”，第二个行区域放置内容“济南的冬天”，每个行区域都单独应用样式属性，显示不同的外观。下图是浏览器的显示效果图。
文中网页案例应用div元素实现了网页的一个基本布局，网页顶部是导航条，网页内容被分为左右两栏。div元素借助于CSS样式，可以很容易实现复杂美观的网页布局。作为一个前端工程师，如能灵活使用div进行网页布局，就不会惧怕美术设计师设计的网页作品了。
