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>

私が理解するのに問題がある2つの問題があります：

1）このコードをWebサーバーに配置し、iPhone経由でナビゲートする場合、電話を垂直位置に保持しても問題ありません。ただし、電話を水平位置に移動すると、ボタンがテキストの上に表示されているように見え、機能しません。これを解決する方法について何かアイデアはありますか？

2）カスタムstylesheet.cssを作成し、さまざまなタグのclass属性を介してそれにリンクしようとしました。これは機能しないので、インラインコードを配置する必要がありました（例:)

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

誰かがこれらの属性を使用してstylesheet.cssを作成し、これが機能するようにHTMLで「タグ付け」する方法を教えてもらえますか？

本当にありがとう。

4

2 に答える 2

0

そうですね、CSSへのリンクが必要なjQueryへのリンクがあります。www.codecademy.comをチェックしてください！

于 2012-12-20T23:22:46.203 に答える
0

インライン css を独自に分離したところ、問題なくレンダリングされたようです。

ここでこのフィドルで遊んでくださいhttp://jsfiddle.net/kVqWJ/

css ファイルを html ファイルに含めるには、さまざまな方法があります。

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 に答える