使用HTML的DIV元素进行网页布局
3639字,阅读需时13分钟
来自专栏
课程/专栏

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的布局可以让网页有更好的排版效果。

image.png

在上面的的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作为容器元素起到了对网页进行布局的作用。

 image.png

网页文档一般都有导航条,大多数导航条被布局在网页的顶部。应用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元素,把导航条分成两个行区域,第一个行区域放置内容“落花生”,第二个行区域放置内容“济南的冬天”,每个行区域都单独应用样式属性,显示不同的外观。下图是浏览器的显示效果图。

image.png

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

我要评论
全部评论
郎宏林
授课老师
授课老师简介
项目经理,系统分析和架构师,从事多年中文信息处理技术。熟悉项目管理、擅长项目需求分析和设计、精通Java、C#、Python等编程语言。
下载APP

手机、电脑同步学

用微信或手机浏览器扫描二维码,即可下载APP。

  • 备案号:鲁ICP备15001146号
  • @1997-2018 潍坊米粒花网络技术有限公司版权所有