使用HTML的DIV元素进行网页布局
方法/步骤
1、div元素螅岔出礤在网页中是最常用的元素，可以把div元素看成一个矩形区域的容器，在这个容器内可以存放其它HTML元素，也包括div元素，因此div元素是可以嵌套的。借助于CSS样式，能余践甍尝够把div元素放置在网页的任何位置，实现网页的精致排版。为了更好理解div的功能和使用方法，文中使用了一些CSS样式，对这些样式的作用本文不作详解，在后面CSS的课程中，会详细解释CSS样式的作用。没有样式的div就是一个简单的具备容器功能的块元素，起到分段的作用。例如下面的网页文档展示了div分段的作用。
2、下图是浏览器的显示效果。从显示效果可以看出，使用div元素的效果和段落元素p的效果相同，都起到了分段的作用。如果div元素仅起到分段的作用，那就没有多大用处了，div最厉害的地方是对网页的布局作用。一般来说网页设计者会把div元素当作容器来使用，用于网页的布局。即把div放置在网页的一个位置，然后在div内部放置更多的HTML元素，通过多个div的布局可以让网页有更好的排版效果。
3、在上面的的HTML文档中，《落花生》这篇文章的内容占据了整个网页的宽度。现在需要把网页的宽度分为左右两部分，网页的左边部分放置《落花生》文章内容，网页的右边部分放置《济南的冬天》文章内容。这样的网页布局也称为左右布局或两栏布局，只要给div元素加上浮动样式，就可以轻松实现网页的两栏布局。例如下面的网页文档实现了网页的两栏布局。
4、下图是浏览器的显示效果。从显示效果可以看出，网页实现了上述要求，网页被布局为左右两栏，左边一栏是一个div元素，右边一栏也是一个div元素。左边一栏的div元素添加了居左浮动样式属性和值为45%（浏览器窗口宽度的45%）的宽度样式属性，右边一栏的div元素添加了居右浮动样式属性和值为45%（浏览器窗口宽度的45%）的宽度样式属性。两个div的宽度属性分别设置为45%，剩余的10%宽度为两栏间的间距。在上面的网页文档中，div作为容器元素起到了对网页进行布局的作用。
5、网页文档一般都有导航条，大多数导航条被布局在网页的顶部。应用div元素可以为上面的网页文档添加导航条。在body元素起始标签下面添加下面的网页代码。
6、为了网页美观使用了很多觊皱筠桡CSS样式属性，现在不明白这些样式属性的作用没关系，后面的CSS课程会详细讲述。width和height的属性比较同柙丕牌容易理解，就是设置网页元素的宽度和高度，单位是px（1px是1像素）；background-color是网页元素的背景色，color是文本颜色，颜色的值采用十六进制表示；margin-left设置被应用该样式的元素与左边网页元素相隔的距离。span属于行元素，可以把行内内容划分为多个行区域，每个行区域可以单独应用样式属性。导航条使用了2个span元素，把导航条分成两个行区域，第一个行区域放置内容“落花生”，第二个行区域放置内容“济南的冬天”，每个行区域都单独应用样式属性，显示不同的外观。下图是浏览器的显示效果图。文中网页案例应用div元素实现了网页的一个基本布局，网页顶部是导航条，网页内容被分为左右两栏。div元素借助于CSS样式，可以很容易实现复杂美观的网页布局。作为一个前端工程师，如能灵活使用div进行网页布局，就不会惧怕美术设计师设计的网页作品了。
