【任务5-2】使用AP Div布局页面

【任务描述】

  （1）创建外部样式文件0502global.css，在该样式文件中定义必要的CSS样式。

  （2）创建外部样式文件0502pages.css，在该样式文件中定义必要的CSS样式。

  （3）创建网页文档0502.html，该网页主体结构主要应用AP Div进行布局，局部结构应用了Div CSS和定义列表、项目列表进行布局。网页0502.html还应用了CSS样式对文字、图片、超链接和列表进行美化。

【任务实施】

1．创建外部样式文件0502global.css

   创建外部样式文件0502global.css，保存在文件夹“5-2css”中，在该样式文件中定义必要的CSS样式。

2．创建外部样式文件0502pages.css

   创建外部样式文件0502pages.css，保存在文件夹“5-2css”中，在该样式文件中定义必要的CSS样式。

3．创建网页文档0502.html

   创建网页文档0502.html，保存在文件夹“5-2”中，该网页主体结构主要应用AP Div、绝对定位和相对定位进行布局，局部结构应用了Div CSS和定义列表、项目列表进行布局。

   应用了CSS样式对文字、图片、超链接和列表进行美化。

   该网页为左右结构，通过绝对定位方式实现左右布局。

（1）插入Div标签page_wrapper

（2）插入Div标签pages_nav

（3）插入AP元素l_sidebar

（4）插入AP元素r_content

（5）插入多个Div标签和AP元素

4．保存网页与浏览网页效果

   保存网页0502.html，然后按快捷键F12浏览该网页，其浏览效果如下图所示。

网页0502.html效果图