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