个人中心
gpt4 book ai didi

html - 外部链接的 .css 文件不适用于 html5 代码

转载 作者：行者123 更新时间：2023-11-28 09:18:02 25 4
gpt4 key购买 nike

我的 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 选择器，这是为什么呢？

我们将不胜感激所有想法和建议。

谢谢

最佳答案

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

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

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

The data-theme attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. While the data-theme attribute could be added to the content container, we recommend adding it instead to div or container that has been assigned the data-role="page" attribute to ensure that the background color is applied to the full page.

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

关于html - 外部链接的 .css 文件不适用于 html5 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26225337/

25 4 0
文章推荐： javascript - 我应该如何使用 Jasmine 在 JavaScript 中对单例进行单元测试？
文章推荐： swift - 在 Swift 中关闭 GameCenter View
文章推荐： javascript - 将 ajax 调用返回的数据添加到 UL，然后更新 jQuery 流沙
文章推荐： javascript - Maven 的 Jasmine 插件 : issue with SNAPSHOT
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com