Question

我在visual studio 2013项目中有以下html文件

!DOCTYPE html>
<html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/my.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css">
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
    #loginBody {
        color: aqua;
    }
</style>

<script type='text/javascript'>
    $(document).on('pageinit', function () {
        //$.support.cors =true,
        //$.mobile.allowCrossDomainPages = true;

        $('#frmLogin').validate(
            {
            rules: {
                username: {
                    required: true
                },
                password: {
                    required: true
                }
            },
            messages: {
                username: {
                    required: "Please enter your username."
                },
                password: {
                    required: "Please enter your password."
                }
            },
            errorPlacement: function (error, element) {
                error.appendTo(element.parent().prev());
            },
            submitHandler: function (form) {
                //$("#frmLogin").submit(function (event) {
                //event.preventDefault();
                var credentials = { username: $("#username").val(), password: $("#password").val() };
                $.ajax({
                    type: "POST",
                    url: "api/auth", // this url is just a placeholder
                    cache: false,
                    data: JSON.stringify(credentials),
                    contentType: "application/json; charset=utf-8",
                    success: function(data,status,jqxhr)
                    {
                        //validate the response here, set variables... whatever needed
                        //and if credentials are valid, forward to the next page
                        if (data.status == "success")
                        {
                            var obj = $.parseJSON(data);
                            localStorage.setItem("acccessToken", obj.accessToken);
                            alert(obj.accessToken);
                            $(":mobile-pagecontainer").pagecontainer ("change", "Authorization.html", { role: "page" });
                            //window.location.href = "http://www.jqueryvalidation.org";
                        }
                        else if(data.status== "error")
                        {
                            alert("Authentication Invalid.Please try again!");
                            return false;
                        }
                        //or show an error message
                    },
                    error: function (jqxhr, status, errorMsg)
                    {
                        // server couldn't be reached or other error 
                        alert("jqXHR Status : " + jqxhr.status + " Status: " + status + " Error: " + errorMsg);
                    }
                }, "json");
                return false;
            }//);
        });
    });
</script>
<style type="text/css">
label.error
{
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
float: none;
}

 @media screen and (orientation: portrait){
label.error { margin-left: 0; display: block; }
 }

@media screen and (orientation: landscape){
label.error { display: inline-block; margin-left: 22%; }
}
em { color: red; font-weight: bold; padding-right: .25em; }
</style>
</head>
<body id="loginBody">
    <div data-role="page" id="login">
        <div data-role="header">
            <h1> Intergraph </h1>
        </div>
        <div data-role="content">
            <form id="frmLogin" method="post" action="api/auth" data-ajax="false">
                <div data-role="fieldcontain">
                    <label for="username">
                        <em>* </em> Username:
                    </label>
                    <input type="text" id="username"
                           name="username" />
                </div>
                <div data-role="fieldcontain">
                    <label for="password">
                        <em>* </em>Password:
                    </label>
                    <input type="password" id="password"
                           name="password" />
                </div>

                <div class="ui-body ui-body-b">
                    <button class="btnLogin" type="submit" id="loginBtn"
                            data-theme="a">
                        Login
                    </button>
                </div>
            </form>
        </div>
        <!--<div data-role="page" id="success" data-theme="b">
            <div data-role="header">
             <h1>Thank You!!!</h1>
            </div>
        </div>-->
    </div>
    </body>
    </html>

这是my.css文件中的代码

#loginBody
{
    background: url('../images/my-generic-curved-background.png') no-repeat fixed center bottom;
background-size:390px 320px; color:blue;
}

#loginContent
{
   text-align:center;
   margin-top:210px;
   color:aquamarine;
}

现在奇怪的是这个文件没有被读取或没有加载（我不确定，甚至我不知道如何确定）但是当我用*（全部）替换#loginBody选择器时我可以看到页面背景中的图像显示，并且页面中未被图像覆盖的部分也显示蓝色（因此可能是my.css文件在运行时加载，我想）。所以我的意思是，css规则也适用于*（所有）选择器和其他选择器，但不适用于#loginBody选择器，为什么呢？

所有的想法和建议都将受到高度赞赏。

由于

Answer 1

您需要覆盖JQM设置的基本样式。 .ui-overlay-a课程设置了您不会覆盖的颜色，并且您还会在任何JQM包含之前放置my.css。要覆盖，您的my.css必须是包含链接的最后一个，您需要使用!important。

我建议您前往官方主题页面的底部，查看每个部分的覆盖内容。他们没有提供有关背景图片的信息，但会向您展示开箱即用的功能。

http://demos.jquerymobile.com/1.0rc2/docs/api/themes.html

data-theme属性可以应用于页眉和页脚用于应用任何字母主题颜色样本的容器。而我们可以将data-theme属性添加到内容容器中建议将其添加到已分配的div或容器中 data-role =＆＃34; page＆＃34;属性以确保背景颜色应用于整页。

我还建议使用开发人员工具来检查元素以及JQM是如何设置样式的。在Chrome / FF中，您右键单击元素并选择Inspect Element。

外部链接的.css文件无法使用html5代码

1 个答案: