3.4 实战练习

3.4.1 CSS+DIV设计网站首页

难度系数：★★★

题目描述

任何一个网站都必须有一个首页文件，可能有的首页文件结构比较简单。但是随着互联网的快速发展，个人PC（个人计算机）在不知不觉中进入千家万户。人们对浏览网站的美观度和综合度要求越来越高。所以设计一个合理、漂亮的网站首页已经是一位程序员不可或缺的知识储备。本实例利用CSS+DIV技术编写一个中型网站的结构化布局模板，其运行效果如图3.17所示。

技术指导

本项目主要通过CSS+DIV定位技术对页面进行布局。设置例如float、width、height、margin等属性，笔者为了展示更好的用户体验加入了IE的圆角边支持插件，使用户可以很容易地实现定位圆角边框。首先，下载该插件，然后复制到实例的根目录下，并且在CSS样式文件中通过behavior属性载入该插件，最后应用该插件完成圆角边框的设计。在CSS样式中载入IE圆角边支持插件和应用该插件的代码如下。

紧急救援

如果您在做本例题的过程中遇到困难或疑惑，可以按照下面救援通道提供的网址获取本例题的源代码和技术文档。

救援通道：http://www.mrbccd.com/PHP/lovePHP/3.4.1

3.4.2 DIV标签设计论坛后台管理页面

难度系数：★★★

题目描述

所有的Web开发者几乎都是从最简单的HTML语言开始学起，所以较<div>标签来说，程序员更喜欢用<table>标签来完成网页框架的布局。但是从网站优化的角度来说，<div>标签确实优于<table>标签。在本项目中通过div标签设计后台管理页面，希望通过此项目的练习，读者对div标签布局能够有更深刻地理解，能够更加灵活地运用它，本实例的运行效果如图3.18所示。

技术指导

在常见的网站后台系统中，本项目中应用比较常用的布局方法，也堪称是经典布局。本应用在使用div模块上与前面讲解的内容中没有什么区别，笔者只是想给用户多一种选择多一种参考而已。同样是在页面中添加<div>标签，然后通过CSS样式定义<div>标签的各种属性，完成页面的布局，其关键代码如下。

通过CSS样式定义<div>标签的属性，其部分代码如下。

紧急救援

如果您在做本例题的过程中遇到困难或疑惑，可以按照下面救援通道提供的网址获取本例题的源码和技术文档。

救援通道：http://www.mrbccd.com/PHP/lovePHP/3.4.2 0rlDCMV3DihxCwvxCd1II/4Gd86R8xuVT1rohRwA/Q5hVNXOZ4XSEWgpLD98iOei