Question

我的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中“标记”它们以便这样做吗？

非常感谢。

Answer 1

嗯，你已经获得了一个链接到jQuery，你的CSS链接应该去哪里。查看www.codecademy.com！

Answer 2

我已将内联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">

快速的Google搜索将有所帮助。 Mozilla developer network是一个很好的起点。

HTML代码无法正确呈现

2 个答案: