使用HTML的DIV元素进行网页布局米

北京痤疮医院专家 http://news.39.net/bjzkhbzy/210625/9105280.html

div元素在网页中是最常用的元素,可以把div元素看成一个矩形区域的容器,在这个容器内可以存放其它HTML元素,也包括div元素,因此div元素是可以嵌套的。借助于CSS样式,能够把div元素放置在网页的任何位置,实现网页的精致排版。为了更好理解div的功能和使用方法,文中使用了一些CSS样式,对这些样式的作用本文不作详解,在后面CSS的课程中,会详细解释CSS样式的作用。

没有样式的div就是一个简单的具备容器功能的块元素,起到分段的作用。例如下面的网页文档展示了div分段的作用。

下图是浏览器的显示效果。从显示效果可以看出,使用div元素的效果和段落元素p的效果相同,都起到了分段的作用。如果div元素仅起到分段的作用,那就没有多大用处了,div最厉害的地方是对网页的布局作用。一般来说网页设计者会把div元素当作容器来使用,用于网页的布局。即把div放置在网页的一个位置,然后在div内部放置更多的HTML元素,通过多个div的布局可以让网页有更好的排版效果。

在上面的的HTML文档中,《落花生》这篇文章的内容占据了整个网页的宽度。现在需要把网页的宽度分为左右两部分,网页的左边部分放置《落花生》文章内容,网页的右边部分放置《济南的冬天》文章内容。这样的网页布局也称为左右布局或两栏布局,只要给div元素加上浮动样式,就可以轻松实现网页的两栏布局。例如下面的网页文档实现了网页的两栏布局。

下图是浏览器的显示效果。从显示效果可以看出,网页实现了上述要求,网页被布局为左右两栏,左边一栏是一个div元素,右边一栏也是一个div元素。左边一栏的div元素添加了居左浮动样式属性和值为45%(浏览器窗口宽度的45%)的宽度样式属性,右边一栏的div元素添加了居右浮动样式属性和值为45%(浏览器窗口宽度的45%)的宽度样式属性。两个div的宽度属性分别设置为45%,剩余的10%宽度为两栏间的间距。在上面的网页文档中,div作为容器元素起到了对网页进行布局的作用。

网页文档一般都有导航条,大多数导航条被布局在网页的顶部。应用div元素可以为上面的网页文档添加导航条。在body元素起始标签下面添加下面的网页代码。

为了网页美观使用了很多CSS样式属性,现在不明白这些样式属性的作用没关系,后面的CSS课程会详细讲述。width和height的属性比较容易理解,就是设置网页元素的宽度和高度,单位是px(1px是1像素);background-color是网页元素的背景色,color是文本颜色,颜色的值采用十六进制表示;margin-left设置被应用该样式的元素与左边网页元素相隔的距离。

span属于行元素,可以把行内内容划分为多个行区域,每个行区域可以单独应用样式属性。导航条使用了2个span元素,把导航条分成两个行区域,第一个行区域放置内容“落花生”,第二个行区域放置内容“济南的冬天”,每个行区域都单独应用样式属性,显示不同的外观。下图是浏览器的显示效果图。

文中网页案例应用div元素实现了网页的一个基本布局,网页顶部是导航条,网页内容被分为左右两栏。div元素借助于CSS样式,可以很容易实现复杂美观的网页布局。作为一个前端工程师,如能灵活使用div进行网页布局,就不会惧怕美术设计师设计的网页作品了。




转载请注明:http://www.aierlanlan.com/tzrz/1638.html

  • 上一篇文章:
  •   
  • 下一篇文章: