HOME / Docs & Support

使用 PHP 创建数据库驱动的应用程序

第 8 课：使用 CSS 技术改进应用程序的外观

教程目录：

在本课程中，您将了解如何执行以下操作：

通过实现 JavaScript 函数，在不使用输入表单时将其隐藏。
改进具有空单元格的表的外观。
通过应用层叠样式表，定义页面元素样式和位置。
使用 div 实现应用程序设计。

当前文档是“在适用于 PHP 的 NetBeans IDE 中创建 CRUD 应用程序”教程的一部分。

来自上一课的应用程序源代码

MySQL 用户：单击此处以下载源代码，该代码反映了在完成上一课后的项目状态。

Oracle 数据库用户：单击此处以下载源代码，该代码反映了在完成上一课后的项目状态。

隐藏表单

目前，应用程序的主 index.php 页始终显示整个登录和 showWishList 表单。要改进应用程序的外观，您可以隐藏表单并将其替换为按钮。当用户按下按钮时，将展开相应的隐藏表单。

要实现该行为，请执行以下操作：

将 <script></script> 块添加到 index.php 文件的结束 </body> 标记的正上方。
在这些标记内开发两个 JavaScript 函数。
对 index.php 文件进行小小的更改

JavaScript 函数

JavaScript 函数不需要任何输入参数，并且不返回任何结果。以下代码检查相应表单的可视性状态，然后将其更改为相反的状态。该代码还会更改按钮上的文本。要完成这些更改，请在 <script></script> 标记内输入以下代码：

<script>
function showHideLogonForm() {
    if (document.all.logon.style.visibility == "visible"){
        document.all.logon.style.visibility = "hidden";
        document.all.myWishList.value = "My Wishlist >>";
    } 
    else {
        document.all.logon.style.visibility = "visible";
        document.all.myWishList.value = "<< My Wishlist";
    }
}
function showHideShowWishListForm() {
    if (document.all.wishList.style.visibility == "visible") {
        document.all.wishList.style.visibility = "hidden";
        document.all.showWishList.value = "Show Wish List of >>";
    }
    else {
        document.all.wishList.style.visibility = "visible";
        document.all.showWishList.value = "<< Show Wish List of";
    }
}
</script>

更新 `index.php`

在登录表单中添加一个 style 属性：
```
<form name="logon" action="index.php" method="POST" 
        style="visibility:<?php if ($logonSuccess) echo "hidden";
        else echo "visible";?>">
```
style 属性定义了是隐藏还是显示表单。<?php ?> 块用于将表单保持可见，直至用户成功登录。
在登录输入表单代码上方输入以下代码：
```
 <input type="submit" name="myWishList" value="My Wishlist >>" onclick="javascript:showHideLogonForm()"/>
```
该代码实现一个包含 "My Wishlist >>" 文本的按钮。该按钮位于登录表单所在的位置。如果按下该按钮，则会调用 showHideLogonForm 函数。

在 wishList 表单中添加一个 style 属性：

<form name="wishList" action="wishlist.php" method="GET" style="visibility:hidden">
Show wish list of: <input type="text" name="user"/>
            <input type="submit" value="Go" />
</form>

在 wishList 表单上方输入以下代码：

<input type="submit" name="showWishList" value="Show Wish List of >>" onclick="javascript:showHideShowWishListForm()"/>

从表单中删除以下代码，因为它已位于按钮上：
```
Show wishlist of: 
```

使用层叠样式表定义样式

目前，应用程序中的控件彼此“粘”在一起，它们通常位于屏幕的左上角。要改进应用程序的页面外观，请定义样式并为特定控件指定这些样式以指定控件的大小、位置、颜色、字体和其他参数。样式是在单独的层叠样式表 (CSS) 文件中定义的。

有关应用程序设计的所有建议都是可选的。下面的样式定义仅用于举例说明如何改进应用程序的外观。这些设置适用于 1024x768 像素或更高的屏幕分辨率。

创建 CSS 文件

在“源文件”节点上单击鼠标右键，然后从上下文菜单中选择“新建”>“层叠样式表”。
在“层叠样式表”面板上，在“文件名”编辑框中输入 wishlist。单击“完成”。

将在项目树中显示新文件 wishlist.css。

定义 CSS 样式

NetBeans IDE 提供了友好的样式生成器代码生成工具以用于定义样式。请直接从列表中选择相应的设置，然后在预览区域中评估样例文本的显示效果。将自动生成用于实现样式的代码。对样式进行的所有更改将会立即反映出来，因此，您可以根据您的需要和习惯调整应用程序外观。

打开 wishlist.css 文件。该文件已包含一个 "root" 类，您可以将其删除。您可以在此处下载本教程的完成版本以获取 wishlist.css 副本。该代码简单直观并且包含：

两个样式（"body" 和 "input"），它们是在任何 <body></body> 或 <input/> 标记内自动应用的。
应用的 CSS 类（如果明确指定）。类名前面包含圆点，例如，.createWishList。某些类可以多次使用，例如，将 ".error" 类应用于应用程序中的所有错误消息。另外一些类只能使用一次，例如，".showWishList"、".logon"。

使用 HTML Div 实现设计

有关应用程序设计的所有建议都是可选的。与上面的样式定义一样，它们仅用于举例说明如何改进应用程序的外观。

下面的示例介绍了如何改进 index.php 页面的外观。

要启用定义的 CSS 类，请在 <head></head> 块中输入以下代码：
```
     <link href="wishlist.css" type="text/css" rel="stylesheet" media="all" />
```
将在相应标记内自动应用 "body" 和 "input" 样式，因此，您不需要明确指定这些样式。

要将任何其他样式（类）应用于某个区域，请将实现该区域的代码包含在 <div class=""></div> 标记中：

 <div class="showWishList">
            <input type="submit" name="showWishList" value="Show Wish List of >>" onclick="javascript:showHideShowWishListForm()"/>
            
            <form name="wishList" action="wishlist.php" method="GET" style="visibility:hidden">
               <input type="text" name="user"/>
               <input type="submit" value="Go" />
            </form>
</div>

注意：在标记中指定类时，

不需要在前面添加圆点。

您可以使用嵌入式 <div> 标记：

<div class="logon">
     <input type="submit" name="myWishList" value="My Wishlist >>" onclick="javascript:showHideLogonForm()"/>
            <form name="logon" action="index.php" method="POST" 
                      style="visibility:<?php if ($logonSuccess) echo "hidden"; else echo "visible";?>">
                Username: <input type="text" name="user"/>
                Password:  <input type="password" name="userpassword"/><br/>
                <div class="error">
                  <?php
                     if (!$logonSuccess) echo "Invalid name and/or password";
                   ?>
                </div>
                <input type="submit" value="Edit My Wish List"/>
            </form>
</div>

"logon" 类应用于整个表单，而 "error" 类应用于表单中的错误消息。

有关使用层叠样式表 (CSS) 的更多详细信息，请参见 http://www.htmlpedia.org/wiki/List_of_CSS_Properties。