Question

我正在通过使用标记将mainpage.html加载到index.html来处理多页面应用程序我需要不同的html页面的背景图像，例如mainpage，page1，page2等。任何一个帮助??

的index.html

<html>
    <head>
        <meta charset="UTF-8">
        <title>wsdl Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="css/main.css">
        <script>window.$ = window.jQuery = WLJQ;</script>
    </head>
    <body style="display: none;">
        <!-- This is static header, it will be shown always -->
        <div id="header">
            <h1>WS DEMO</h1>
        </div>

        <div id="wrapper">
            <!-- This is a placeholder for dynamic page content -->
            <div id="pagePort"></div>
        </div>

        <script src="js/initOptions.js"></script>
        <script src="js/main.js"></script>
        <script src="js/messages.js"></script>
    </body>
</html>

＆＃13;

function wlCommonInit(){
	busyIndicator = new WL.BusyIndicator();

	// Special case for Windows Phone 8 only.
	if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
	    path = "/www/default/";
	}
	
	$("#pagePort").load(path + "pages/MainPage.html", function(){
		$.getScript(path + "js/MainPage.js", function() {
			if (currentPage.init) {
				currentPage.init();
			}
		});
	});
}

＆＃13;

body{
	 background: red; 
}	

<!-- begin snippet: js hide: false -->

＆＃13;

//mainpage.html

<script>
	$.getScript(path + "js/MainPage.js");
</script>

<p id="currentPage"></p>

<div class="container">
<label>username</label> <input type="text" id="username"><br><br>
<label>password</label> <input type="text" id="userpwd"><br><br>
<input type="submit" value="login" class="appButton" onclick="validate();">
</div>
<p id="mytable"></p>

＆＃13;

Answer 1

如果您的意思是希望将不同的背景图像应用于body元素但是您只能控制页面的片段，那么company year Bankruptcy Feature 1 Feature 2 … … Feature 150 A 2001 0 A 2002 0 A 2003 0 A 2004 0 A 2005 0 A 2006 0 A 2007 0 A 2008 0 A 2009 0 A 2010 0 A 2011 0 A 2012 0 B 2001 0 B 2002 0 B 2003 1元素应该可以工作 - 您可能需要style来覆盖默认值：

!important

Answer 2

关于我发表的评论，我决定将我的解决方案作为答案发布。我的解决方案相当简单，在body标签中添加一个类，然后使用外部CSS文件更改背景 - 基于所使用的类。

e.g：

...
<body class="index">
...

//in the CSS:

body.index {
  background: #F00;
}

然后，只需在每个不同的HTML页面中，更改body标签的类以适应您想要的背景。

检查this Plunk是否有实例

如果您需要任何澄清，请发表评论，我会回复你！</ p>

使用div标签加载的不同页面的不同背景图像

2 个答案: