| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| <title>在 HTML5 应用程序中使用 CSS 样式表 - NetBeans 教程</title> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| <meta name="description" content="A tutorial that demonstrates how the IDE provides tools that can help you work with CSS rules to modify the layout of |
| an application."> |
| <meta name="keywords" content="NetBeans, IDE, integrated development environment, jQuery, CSS, HTML5"> |
| </head> |
| <body> |
| |
| <!-- |
| Copyright (c) 2013, Oracle and/or its affiliates. All rights reserved. |
| --> |
| |
| <h1>在 HTML5 应用程序中使用 CSS 样式表</h1> |
| |
| <p>NetBeans IDE 7.3 引入了新的项目类型用于帮助您开发 HTML5 应用程序。HTML5 应用程序通常结合了 HTML、CSS 和 JavaScript，用于创建在浏览器中运行并显示在多种设备（包括智能手机、平板电脑和笔记本电脑）上的应用程序。本文档说明了 IDE 如何为您提供工具来帮助使用 CSS 规则以修改应用程序的布局。</p> |
| |
| <p>用于 Chrome 浏览器的 NetBeans Connector 扩展可帮助您查看应用程序在不同设备上的显示情况。该扩展实现了 Chrome 浏览器与 IDE 彼此之间的通信。使用“在 NetBeans 中检查”模式，您只需在浏览器中选择元素即可在源代码中找到它们。在浏览器中选择元素之后，可以使用 IDE 来查看应用到该元素的 CSS 规则和属性。 |
| </p> |
| |
| <p>有关如何为 Chrome 浏览器安装 NetBeans Connector 扩展的详细信息，请参阅教程 <a href="html5-gettingstarted.html">HTML5 应用程序入门</a>。</p> |
| |
| <p class="tips">要观看此教程的截屏视频，请参阅<a href="../../docs/web/html5-css-screencast.html">在 HTML5 应用程序中使用 CSS 样式表的视频</a>。</p> |
| |
| <h3>目录</h3> |
| <img alt="此页上的内容适用于 NetBeans IDE 7.3" class="stamp" src="../../../images_www/articles/73/netbeans-stamp.png" title="此页上的内容适用于 NetBeans IDE 7.3"> |
| |
| <ul class="toc"> |
| <li><a href="#createproject">创建 NetBeans HTML5 应用程序</a></li> |
| <li><a href="#viewing">在不同设备上查看应用程序</a></li> |
| <li><a href="#layout">修改布局</a> |
| <ul> |
| <li><a href="#newstylesheet">创建媒体样式表</a> |
| <li><a href="#addrules">添加 CSS 规则</a> |
| </ul> |
| </li> |
| <li><a href="#summary">小结</a></li> |
| <li><a href="#seealso">另请参见</a></li> |
| </ul> |
| |
| <h4>要完成本教程，需要使用以下资源。</h4> |
| |
| <table id="requiredSoftware"> |
| |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">软件或资源</th> |
| <th class="tblheader" scope="col">要求的版本</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE，Java</a></td> |
| <td class="tbltd1">7.3</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java 开发工具包 (JDK)</a></td> |
| <td class="tbltd1">6 或 7</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.google.com/chrome">Chrome 浏览器</a></td> |
| <td class="tbltd1">--</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa?utm_source=chrome-ntp-icon">用于 Chrome 的 NetBeans Connector 扩展</a></td> |
| <td class="tbltd1">1.0.0</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip">HTML5DemoSiteTemplate.zip</a></td> |
| <td class="tbltd1">--</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p><strong class="notes">注：</strong></p> |
| |
| <ul> |
| <li><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip">HTML5DemoSiteTemplate.zip</a> 是创建项目时将要使用的站点模板。</li> |
| |
| <li>如果要将您的项目与工作解决方案进行比较，可以下载已完成项目的<a href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoCssSiteTemplate.zip">站点模板</a>。</li> |
| |
| <li>本文档假定您具备 HTML、CSS 和 JavaScript 的一些基本知识或编程经验。</li> |
| </ul> |
| |
| |
| <!-- ++++++++++++++++ Creating the Application ++++++++++++++++ --> |
| <a name="create"></a> |
| <h2>创建 HTML5 应用程序</h2> |
| <p>在本教程中，您将使用站点模板来创建 HTML5 项目。您在此教程中使用的站点模板是您在 <a href="html5-gettingstarted.html">HTML5 应用程序入门</a>教程中保存的同一个站点模板。如果您执行了入门教程中的步骤，则可以使用上一部分中保存的站点模板。此外，您可以下载 HTML5DemoSiteTemplate.zip 站点模板。</p> |
| |
| <p>执行以下步骤可以从站点模板创建应用程序。</p> |
| <ol> |
| <li>下载 HTML5 站点模板 (<a href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip">HTML5DemoSiteTemplate</a>)</li> |
| <li>从主菜单中选择 "File"（文件）> "New Project"（新建项目）（Ctrl-Shift-N 组合键；在 Mac 上为 ⌘-Shift-N 组合键），以打开新建项目向导。</li> |
| <li>选择 <strong>HTML/JavaScript</strong> 类别，然后选择 <strong>HTML5 Application（HTML5 应用程序）</strong>。单击 "Next"（下一步）。</li> |
| <li>键入 <strong>HTML5DemoCss</strong> 作为项目名称，并指定位置。单击 "Next"（下一步）。</li> |
| <li>选择 <strong>Select Template（选择模板）</strong>选项并单击 "Browse"（浏览）以查找站点模板 (<tt>HTML5DemoSiteTemplate.zip</tt>)。单击 "Finish"（完成）。<br> <img alt=""New HTML5 Application"（新建 HTML5 应用程序）向导的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-newproject.png" title="在 "New HTML5 Application"（新建 HTML5 应用程序）向导中指定站点模板"> |
| </li> |
| </ol> |
| |
| <p>单击 "Finish"（完成）时，IDE 将创建项目并在编辑器中打开 <tt>index.html</tt> 文件。在 "Projects"（项目）窗口中，可以看到项目包含 <tt>index.html</tt>、一个 CSS 样式表、一些 JavaScript 库和一些图像。IDE 中还将打开 "CSS Rules"（CSS 规则）和 "Navigator"（导航器）窗口。</p> |
| |
| |
| <!-- ++++++++++++++++ Viewing the Application ++++++++++++++++ --> |
| <a name="viewing"></a> |
| <h2>在不同设备上查看应用程序</h2> |
| <p>在本教程中，您将在安装了 NetBeans Connector 扩展的 Chrome 浏览器中运行应用程序。安装扩展之后，您可以在浏览器中使用 NetBeans 菜单以方便地调整浏览器窗口大小，用于查看应用程序在一些常用设备上的显示。 |
| </p> |
| |
| <p class="notes"><strong>注：</strong>对于本教程，建议使用 Chrome 浏览器并安装用于 Chrome 的 NetBeans 扩展。有关如何安装 NetBeans Connector 扩展的详细信息，请参阅教程 <a href="html5-gettingstarted.html">HTML5 应用程序入门</a>。</p> |
| |
| <p>执行以下步骤以在 Chrome 浏览器中运行应用程序。</p> |
| <ol> |
| <li>确认在工具栏的下拉列表中选择了 "Chrome with NetBeans Integration"（带有 NetBeans 集成的 Chrome）。 |
| </li> |
| <li>在工具栏中单击 "Run"（运行）按钮可以在 Chrome 浏览器中运行项目。 |
| |
| <p>在浏览器中，可以看到简单的可扩展菜单。</p> |
| <p>您可以看到，浏览器标签中有一个黄色的栏，通知您 NetBeans Connector 正在调试标签。在黄色栏可见时，IDE 和浏览器已连接，能够彼此通信。从 IDE 启动 HTML5 应用程序时，JavaScript 调试器将自动启用。将对文件所做的更改保存到 CSS 样式表时，您无需重新加载页，因为浏览器窗口将自动更新以显示更改。</p> |
| |
| <p class="alert">如果选择关闭黄色栏或者单击 "Cancel"（取消），您将断开 IDE 与浏览器之间的连接。如果断开了连接，则需要从 IDE 启动 HTML5 应用程序。</p> |
| |
| <p>您还可以看到，NetBeans 图标在浏览器的 URL 位置字段中可见。您可以单击图标以打开提供了各种选项的菜单，用于更改浏览器的显示大小和启用在 NetBeans 中检查模式。</p> |
| </li> |
| <li>单击浏览器 URL 字段中的 "Open NetBeans Action"（打开 NetBeans 操作）图标以打开 NetBeans 菜单，然后在菜单中选择 "Tablet Portrait"（平板电脑纵向）。 |
| <p>窗口的大小将调整为平板电脑浏览器在纵向模式下的大小。菜单扩展以填充右侧，整个菜单可见。</p> |
| <img alt="浏览器在平板电脑纵向视图下的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-tabletbrowser1.png" title="浏览器中的平板电脑纵向显示大小"> |
| <p>如果在菜单中选择了默认设备之一，则浏览器窗口将调整到该设备尺寸的大小。这使您可以查看应用程序在所选设备上的外观如何。HTML5 应用程序通常设计为可以根据查看这些应用程序所用设备的屏幕大小做出响应。您可以使用响应屏幕大小的 JavaScript 和 CSS 规则并修改应用程序的显示方式，这样就可以针对设备优化布局。 </p></li> |
| |
| <li>再次单击 NetBeans 图标并在 NetBeans 菜单中选择 "Smartphone Landscape"（智能手机横向）。<br> <img alt="浏览器中 NetBeans 菜单的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-tabletbrowser2.png" title="在浏览器的 NetBeans 菜单中选择 "Smartphone Landscape"（智能手机横向）"> |
| <p>窗口的大小将调整为智能手机横向的大小，您可以看到，需要滚动才能看到菜单的底部。</p> |
| <img alt="浏览器窗口大小调整为智能手机横向大小的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-smartphonebrowser1.png" title="浏览器窗口大小调整为智能手机横向大小"></li> |
| </ol> |
| |
| <p>在下一部分中，您将修改样式表，使其无需在智能手机横向视图上滚动即可查看整个菜单。</p> |
| |
| |
| |
| <!-- ++++++++++++++++ Modifying the Application Layout ++++++++++++++++ --> |
| <a name="layout"></a> |
| <h2>修改布局</h2> |
| |
| <p>可以对页元素进行一些小的更改，这样就无需滚动。这些更改只应在浏览器的大小与智能手机的大小相同或更小时应用。当方向为横向视图时，智能手机的浏览器窗口为 480 像素宽，320 像素高。</p> |
| |
| <div class="indent"> |
| <!-- ++++++++++++++++ Media Style Sheet ++++++++++++++++ --> |
| <a name="newstylesheet"></a> |
| <h3>创建媒体样式表</h3> |
| <p>在本练习中，您将创建新的样式表，并为具有智能手机显示屏的设备添加媒体规则。然后，可以向媒体规则添加一些 CSS 规则。</p> |
| <ol> |
| <li>在“项目”窗口中，右键单击 <tt>css</tt> 文件夹节点，然后在弹出菜单中选择“新建”>“级联样式表”。</li> |
| <li>键入 <strong>mycss</strong> 作为文件名。单击 "Finish"（完成）。 |
| <p>单击“完成”时，新样式表将在编辑器中打开。</p></li> |
| <li>将以下媒体规则添加到样式表中。 |
| <pre class="examplecode">/*My rule for smartphone*/ |
| @media (max-width: 480px) { |
| |
| }</pre> |
| <p>您在方括号之间为此规则添加的任意 CSS 规则仅在浏览器尺寸的宽度小于等于 480 像素时应用。</p> |
| <p class="tips">为可能经常使用的代码片段创建代码模板。您可以在“选项”窗口中“编辑器”类别的“代码模板”标签中创建 CSS 代码模板。</p> |
| </li> |
| <li>保存所做的更改。</li> |
| <li>在编辑器中打开 <tt>index.html</tt>。</li> |
| <li>将以下样式表链接添加到 <tt>index.html</tt> 的 <tt><head></tt> 标记之间。保存所做的更改。 |
| <pre class="examplecode"><link type="text/css" rel="stylesheet" href="css/mycss.css"></pre> |
| <p class="tips">可以使用编辑器中的代码完成功能来帮助您添加样式表链接。</p> |
| </li> |
| </ol> |
| |
| <!-- ++++++++++++++++ Add CSS Rules ++++++++++++++++ --> |
| <a name="addrules"></a> |
| <h3>添加 CSS 规则</h3> |
| <ol> |
| <li>在 Chrome 浏览器中，单击 NetBeans 图标并在菜单中选择 "Inspect in NetBeans Mode"（在 NetBeans 中检查模式）。</li> |
| <li>单击浏览器中的图像。 |
| <p>在检查模式下选中了某个元素时，该元素将突出显示。在本屏幕快照中，您可以看到图像以蓝色突出显示。</p> |
| <img alt="在浏览器中选择的图像的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-selectimage.png" title="在 Chrome 浏览器中选择的图像"> |
| <p>在 IDE 中，您可以看到应用到 <tt>img</tt> 的 CSS 规则和属性在 "CSS Styles"（CSS 样式）窗口中列出。"CSS Styles"（CSS 样式）窗口的 "Selection"（选择）标签有三个窗格，提供有关所选元素的详细信息。</p> |
| <img alt="选择了图像时的 "CSS Styles"（CSS 样式）窗口的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-styleswindow1.png" style="float:left;" title="选择了图像时的 "CSS Styles"（CSS 样式）窗口"> |
| <h4>顶部窗格</h4> |
| <p> |
| 在窗口顶部的 "Properties"（属性）窗格中，您可以看到应用到 <tt>img</tt> 元素的六个属性-值对。其中三对（<tt>border</tt>、<tt>float</tt> 和 <tt>margin</tt>）通过 <tt>img</tt> 元素的 CSS 规则应用。由于 <tt>img</tt> 元素继承了类选择器的属性（这些选择器应用到包含 <tt>img</tt> 元素的对象），因此应用了剩下的三对。您可以在 "Navigator"（导航器）窗口中清楚看到 DOM 的结构。当前在 "CSS Styles"（CSS 样式）窗口的 "Properties"（属性）窗格中选择了 <tt>border</tt> 属性。 |
| </p> |
| <h4>中间窗格</h4> |
| <p>在中间 "Applied Styles"（应用的样式）窗格中，您可以看到在定义 <tt>img</tt> 元素的 CSS 规则中指定了 <tt>border</tt> 属性和值。该规则位于 <tt>basecss.css</tt> 文件的第 12 行。单击窗格中的位置可以在编辑器中打开样式表。</p> |
| |
| <h4>底部窗格</h4> |
| <p>底部窗格显示在 CSS 规则中为在中间窗格中选择的规则定义的所有属性。在本例中，您可以看到 <tt>img</tt> 的规则定义了 <tt>border</tt>、<tt>float</tt> 和 <tt>margin-right</tt> 属性。</p> |
| |
| |
| <br clear="all"> |
| </li> |
| <li>在 "CSS Styles"（CSS 样式）窗口的 "Applied Styles"（应用的样式）窗格中，单击 "Edit CSS Rules"（编辑 CSS 规则）按钮 (<img alt=""Edit CSS Rules"（编辑 CSS 规则）按钮" src="../../../images_www/articles/73/web/html5-gettingstarted/newcssrule.png" title=""Edit CSS Rules"（编辑 CSS 规则）按钮">) 可打开 "Edit CSS Rules"（编辑 CSS 规则）对话框。</li> |
| <li>为 "Selector Type"（选择器类型）选择 "Element"（元素），为 "Selector"（选择器）选择类型 <strong>img</strong>。</li> |
| <li>为 "Style Sheet"（样式表）选择 <tt>css/mycss.css</tt>，为 "At-Rule"（@ 规则）选择 <strong>(max-width:480px)</strong>。单击 "OK"（确定）。<br> <img alt=""Edit CSS Rules"（编辑 CSS 规则）对话框的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-editcssrules.png" title=""Edit CSS Rules"（编辑 CSS 规则）对话框"> |
| <p>单击 "OK"（确定）时，IDE 将在媒体规则的方括号之间，为 <tt>css/mycss.css</tt> 样式表中的 <tt>img</tt> 创建 CSS 规则。新规则现在列出在 "Applied Styles"（应用的样式）窗格中。您可以看到 <tt>img</tt> 有两个 CSS 规则。一个规则位于 <tt>mycss.css</tt> 中，一个规则位于 <tt>basecss.css</tt> 中。</p></li> |
| <li>选择新的 <tt>img</tt> 规则（在 "CSS Styles"（CSS 样式）窗口的 "Applied Styles"（应用的样式）窗格的 <tt>mycss.css</tt> 中定义）。<br> <img alt=""CSS Styles"（CSS 样式）窗口中所选元素样式的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-styleswindow2.png" title=""CSS Styles"（CSS 样式）窗口中所选元素的样式"> |
| <p>在窗口的底部窗格中，可以看到该规则没有任何属性。</p> |
| </li> |
| <li>在 "CSS Styles"（CSS 样式）窗口底部窗格中单击 "Add Property"（添加属性）按钮可以打开 "Add Property"（添加属性）对话框。</li> |
| <li>在对话框顶部的过滤器字段中键入 <strong>width</strong>，然后键入 <strong>90px</strong> 作为 <tt>width</tt> 属性的值。单击 "OK"（确定）。<br> <img alt=""Add Property"（添加属性）对话框的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-addproperty.png" title=""Add Property"（添加属性）对话框"> |
| <p>单击 "OK"（确定）时，浏览器中图像的大小将自动调整为 90 像素宽。IDE 将属性添加到 <tt>mycss.css</tt> 样式表中的 CSS 规则。在编辑器中，样式表不应包含以下规则。</p> |
| |
| <pre class="examplecode">/*My rule for smartphone*/ |
| @media (max-width: 480px) { |
| |
| img { |
| width: 90px; |
| } |
| |
| }</pre> |
| <p>由于菜单仍不适合窗口，还需要对样式表做一些其他更改。 </p> |
| </li> |
| <li>在浏览器窗口中选择无序列表 (<tt><ul></tt>) 元素。<br> <img alt="列出在浏览器中选择的元素的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-smartphonebrowser2.png" title="列出在浏览器中选择的元素"> |
| <p>选择元素时，在 "Navigator"（导航器）窗口中可以看到选择了 <tt><ul></tt>，在 "CSS Styles"（CSS 样式）窗口中可以看到应用到该元素的样式。</p> |
| <img alt=""Navigator"（导航器）窗口的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-navigatorwindow.png" title="列出在 "Navigator"（导航器）窗口中选择的元素"> |
| <p>在 "CSS Styles"（CSS 样式）窗口中选择 <tt>font-family</tt> 时，可以看到在 <tt>.ui-widget</tt> 类选择器中定义了 <tt>font-family</tt> 属性和值。</p> |
| </li> |
| <li>在编辑器中单击 <tt>index.html</tt> 文件，然后在 "CSS Styles"（CSS 样式）窗口中单击 "Document"（文档）标签。</li> |
| <li>在 "CSS Styles"（CSS 样式）窗口中展开 <tt>css/mycss.css</tt> 节点。<br> <img alt=""CSS Styles"（CSS 样式）窗口 "Document"（文档）标签的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-styleswindow3.png" title="在 "CSS Styles"（CSS 样式）窗口的 "Document"（文档）标签中选择的样式表"> |
| <p><tt>mycss.css</tt> 样式表当前具有默认的 <tt>root</tt> 规则和之前为 <tt>img</tt> 创建的规则。</p> |
| </li> |
| <li>在 "CSS Styles"（CSS 样式）窗口中，单击 "Edit CSS Rules"（编辑 CSS 规则）按钮 (<img alt=""Edit CSS Rules"（编辑 CSS 规则）按钮" src="../../../images_www/articles/73/web/html5-gettingstarted/newcssrule.png" title=""Edit CSS Rules"（编辑 CSS 规则）按钮">) 可打开 "Edit CSS Rules"（编辑 CSS 规则）对话框。</li> |
| <li>为 "Selector Type"（选择器类型）选择 "Class"（类），为 "Selector"（选择器）选择类型 <strong>ui-widget</strong>。</li> |
| <li>为 "Style Sheet"（样式表）选择 <strong><tt>css/mycss.css</tt></strong>，为 "At-Rule"（@ 规则）选择 <strong>(max-width:480px)</strong>。</li> |
| <li><strong>取消选择</strong> "Apply Changes to the Element"（应用对元素的更改）。单击 "OK"（确定）。<br> <img alt=""Edit CSS Rules"（编辑 CSS 规则）对话框的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-editcssrules2.png" title="在 "Edit CSS Rules"（编辑 CSS 规则）对话框中创建类选择器"> |
| <p>单击 "OK"（确定）时，IDE 将新规则添加到 <tt>mycss.css</tt> 样式表并在编辑器中打开文件。如果文件未在编辑器中打开，您可以在 "CSS Styles"（CSS 样式）窗口中双击 <tt>css/mycss.css</tt> 节点下的 <tt>ui-widget</tt> 规则以打开样式表。光标放在样式表中包含规则的行内。</p></li> |
| <li>向 <tt>ui-widget</tt> 的规则添加以下属性和值（粗体）。 |
| <pre class="examplecode">.ui-widget { |
| <strong>font-size: 0.9em;</strong> |
| }</pre> |
| <p>更改样式表中的值时，浏览器窗口中的页将自动更新。</p> |
| <p class="tips">您可以在编辑器中键入属性和值，然后使用代码完成功能获取帮助。此外，您可以在顶部窗格中选择 <tt>.ui-widget</tt> 规则，然后在底部窗格中单击 "Add Property"（添加属性）按钮以打开 "Add Property"（添加属性）对话框。</p> |
| <img alt="编辑器中 CSS 代码完成功能的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-csseditor1.png" title="编辑器中的 CSS 代码完成"> |
| <p>添加规则之后，可以看到菜单现在与页面大小相符。</p> |
| <img alt="浏览器中应用了 CSS 规则之后页面的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-smartphonebrowser3.png" title="在浏览器中查看应用了新 CSS 规则的页面"> |
| </li> |
| <li>单击浏览器中的 NetBeans 图标并在菜单中选择 "Tablet Portrait"（平板电脑纵向）。 |
| <p>浏览器窗口大小调整时，可以看到，屏幕宽度大小超过 480 像素时，对样式表的更改不会影响显示。</p></li> |
| |
| </ol> |
| </div> |
| |
| |
| |
| <h2 id="summary">小结</h2> |
| |
| <p>在本教程中，您学到了如何添加和修改 HTML5 应用程序的 CSS 规则以改善应用程序在较小屏幕大小上的显示方式。在浏览器中可以查看将大小调整到标准智能手机显示大小的应用程序。在 Chrome 浏览器中使用“在 NetBeans 中检查”模式可帮助您查找 CSS 样式规则，然后修改规则以优化针对较小屏幕大小的布局。</p> |
| |
| |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&subject=Feedback:%20Working%20With%20CSS%20Style%20Sheets%20in%20an%20HTML5%20Application">发送有关此教程的反馈意见</a> |
| </div> |
| |
| <br style="clear:both;"> |
| |
| <br> |
| <h2 id="seealso">另请参见</h2> |
| |
| |
| <p>有关 <a href="https://netbeans.org/">netbeans.org</a> 中 HTML5 应用程序支持的详细信息，请参见以下资源：</p> |
| |
| <ul> |
| <li><a href="html5-gettingstarted.html">HTML5 应用程序入门</a>。此文档说明如何安装用于 Chrome 的 NetBeans Connector 扩展以及创建和运行简单 HTML5 应用程序。</li> |
| <li><a href="html5-js-support.html">在 HTML5 应用程序中调试和测试 JavaScript</a>。此文档说明 IDE 如何提供工具来帮助您在 IDE 中调试和测试 JavaScript 文件。</li> |
| <li><a href="../ide/javascript-editor_zh_CN.html">编辑 JavaScript</a>。介绍 IDE 提供的基本 JavaScript 编辑功能的文档。</li> |
| </ul> |
| |
| <p>有关 jQuery 的更多信息，请参见官方文档：</p> |
| <ul> |
| <li>官方主页：<a href="http://jquery.com">http://jquery.com</a></li> |
| <li>UI 主页：<a href="http://jqueryui.com/">http://jqueryui.com/</a></li> |
| <li>教程：<a href="http://docs.jquery.com/Tutorials">http://docs.jquery.com/Tutorials</a></li> |
| <li>文档主页：<a href="http://docs.jquery.com/Main_Page">http://docs.jquery.com/Main_Page</a></li> |
| <li>UI 演示和文档：<a href="http://jqueryui.com/demos/">http://jqueryui.com/demos/</a></li> |
| </ul> |
| |
| |
| </body> |
| </html> |
