0

我的 HTML 和 jQuery 代码有问题。我想知道是否有人可以告诉我它有什么问题。这是代码：

<!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>Main Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Scripts -->
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <!-- Stylesheets -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <!-- Color Scheme -->
    <!-- Beige: #eee8cd; Green: #008b8b; Blue: #203471; -->
</head>
<body>
    <div id="MainPage" style="background:#008b8b;color:#203471" data-role="page">
        <div style="background:#008b8b;color:#203471" data-role="content">
            <p style="background:#008b8b;color:#203471"><img alt="" src="Images/Header.png" style="width:100%" /></p>
            <p style="background:#008b8b;color:#eee8cd">The content for the main page is here</p>
            <a style="background:#eee8cd;color:#203471" href="AboutUs.htm" data-role="button">About Us</a>
            <a style="background:#eee8cd;color:#203471" href="ContactUs.htm" data-role="button">Contact Us</a>
        </div>
        <div style="background:#203471;color:#eee8cd" data-role="footer">
            <h4>Main Page Footer</h4>
        </div>
    </div>
</body>
</html>

我在解决两个问题时遇到了问题：

1）当我将此代码放在我的网络服务器上并通过我的 iPhone 导航到它时，当手机保持在垂直位置时很好。但是，当手机移动到水平位置时，按钮似乎显示在文本上方并且无法使用。关于如何解决这个问题的任何想法？

2）我尝试创建一个自定义 stylesheet.css 并通过各种标签的 class 属性链接到它。这行不通，所以我不得不输入内联代码（例如：）

<div style="background:#203471;color:#eee8cd"

有人可以告诉我如何使用这些属性创建一个 stylesheet.css 并在 HTML 中“标记”它们以使其正常工作吗？

非常感谢。

4

2 回答 2

0

好吧，你有一个指向 jQuery 的链接，你的 CSS 链接应该放在哪里。查看 www.codecademy.com ！

于 2012-12-20T23:22:46.203 回答
0

我已经将内联 css 分离出来，并且似乎渲染得很好。

在这里玩这个小提琴http://jsfiddle.net/kVqWJ/

您可以通过多种方式在 html 文件中包含 css 文件：

1)

<style type="text/css">
//your style here
</style>

2) 

    <link rel="stylesheet" type="text/css" href="css url here">

快速谷歌搜索会有所帮助。Mozilla 开发者网络是一个很好的起点。

于 2012-12-20T23:27:05.353 回答