如何使jquery用户界面中的元素具有正确的样式和格式

这是我的问题。我曾多次下载jquery ui并尝试使用它。不过,会发生的是,在下载中提供的示例中,UI元素看起来很好,但是在我的页面中,当我尝试使用它们时,所有的格式和样式都是混乱的。以下是日期选取器的示例:

Good Example
Bad Example

这是我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Reports</title>

    <meta charset="UTF-8" />
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
    <meta http-equiv="PRAGMA" content="NO-CACHE" />

    <link type="text/css" href="../css/jquery.ui.all.css" rel="stylesheet" />

    <script type="text/javascript" src="../scripts/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="../scripts/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../scripts/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../scripts/jquery.ui.datepicker.js"></script>

    <script type="text/javascript">

        $(function() {

            $('#start_date').datepicker({
                changeMonth: true,
                changeYear: true
            });

            $('#end_date').datepicker({
                changeMonth: true,
                changeYear: true
            });

        });

    </script>
</head>
<body>
    <form id="Form_Reports" method="post" action="Reports.aspx" runat="server">

    <!-- The date input form -->
    <table>
        <tbody>
            <tr>
                <td class="label">Start Date:</td>
                <td><input class="text" type="text" name="start_date" id="start_date" runat="server"/></td>
            </tr>
            <tr>
                <td class="label">End Date:</td>
                <td><input class="text" type="text" name="end_date" id="end_date" runat="server"/></td>
            </tr>
            <tr>
                <td class="label">Program</td>
                <td><select class="text" name="program_name" id="program_name" runat="server"></select></td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td colspan="2" style="text-align:center"><input type="submit" name="cmdReport" value="Get the Report"/></td>
            </tr>
        </tbody>
    </table>

    </form>
</body>

这是他们的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQuery UI Datepicker - Display month &amp; year menus</title>
    <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
            $('#datepicker').datepicker({
                    changeMonth: true,
                    changeYear: true
            });
    });
    </script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->

<div class="demo-description">

<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.  Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>

</div><!-- End demo-description -->

</body>

对于我的页面(一个“.aspx”页面,如果这有什么区别的话),我将图像文件夹中的所有图像都放在CSS文件的下面一个级别,就像它在示例文件夹中一样,脚本文件都放在另一个文件夹中。有什么我不需要的吗?我不需要“demo.css”文件,是吗?网站形式的物品是否有特殊的命名约定?是否有一些特殊的方法需要我设置文件夹/css文件/源脚本,比如某个文件夹配置,以使其工作?

有点迷路了。可能是一个非常简单的修复方法,但我对使用它还很陌生。感谢您的帮助。