0
为什么我的样式不能显示在我的所有页面上？除了两页外，其他所有页面都显示我的样式。我检查了我的链接，脚本& css。我不知道我错过了什么！我是新来查询手机。我已经包括了我的HTML和CSS自定义样式不适用于所有jquery移动多页面
我的HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Untitled Document</title>
<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet" type="text/css">
<link href="styles/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
/* this is the first page */
<div data-role="page" id="page">
<div id="header" data-role="header">
<h1>Worldview</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-icon="false" data-inset="true">
<li><a href="#Asia">Asia</a></li>
<li><a href="#Africa">Africa</a></li>
<li><a href="#North America">North America</a></li>
<li><a href="#South America">South America</a></li>
<li><a href="#Antarctica">Antarctica</a></li>
<li><a href="#Europe">Europe</a></li>
<li><a href="#Australia">Australia/Oceania</a></li>
</ul>
</div>
<div data-role="footer" id="footer" data-position="fixed">
</div>
</div>
/* this is the second page */
<div data-role="page" id="Asia">
<div data-role="header">
<a href="#page" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-back">Back</a>
<h1>Asia</h1>
</div>
<div data-role="content">
<h4>Summary</h4>
<p>History: Asian culture are among the oldest in the world. Different influences have shaped their cultures.</p>
<p>Geographical: Asia is the Earth’s largest and most populated Continent, it’s located in the eastern and northern hemispheres. Asia’s boundaries are culturally determined as the geographical separation between it and Europe are not clear, both continents together form one continuous landmass referred to as Eurasia.</p>
<div data-role="collapsible" id="countries"><h3>Countries in Asia</h3>
<ul><li></Li>
</ul>
</div>
</div>
<div data-role="footer" id="socials" data-position="fixed">
<ul>
<li><a href="https://en.wikipedia.org/wiki/Asia"><img src="styles/images/wikipedia.png" alt="wikipedia" width="42" height="42"></a></li>
<li><a href="https://www.google.com"><img src="styles/images/google-plus.png" alt="google plus" width="42" height="42"></a></li>
<li><a href="http://www.bing.com"><img src="styles/images/bing.png" alt="bing" width="42" height="42"></a></li>
<li><a href="https://www.yahoo.com"><img src="styles/images/yahoo.png" alt="yahoo" width="42" height="42"></a></li>
<li><a href="https://www.linkedin.com"><img src="styles/images/linkedin.png" alt="linkedin" width="42" height="42"></a></li>
</ul>
</div>
</div>
/* this is the third page */
<div data-role="page" id="Africa" data-add-back-btn="true" data-back-btn-text="Previous">
<div data-role="header">
<a href="#page" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-back">Back</a>
<h1>Africa</h1>
</div>
<div data-role="content">
<h4>Summary</h4>
<p>History: African culture is rich and diverse, culture changes from one country to another and many different cultures can be found in each country as well.</p>
<p>Geographical: Africa is the World’s second-largest and second most populated continent, it’s located south of Europe and southwest of Asia. It is connected to Asia via the Sinai Peninsula in northeastern Egypt, and lies both all four hemispheres of the earth.</p>
<div data-role="collapsible" id="countries1"><h3>Countries of Africa</h3>
<ul><li></li>
</ul>
</div>
</div>
<div data-role="footer" class="socials" data-position="fixed">
<ul>
<li><a href="https://en.wikipedia.org/wiki/Africa"><img src="styles/images/wikipedia.png" alt="wikipedia" width="42" height="42"></a></li>
<li><a href="https://www.google.com"><img src="styles/images/google-plus.png" alt="google plus" width="42" height="42"></a></li>
<li><a href="http://www.bing.com"><img src="styles/images/bing.png" alt="bing" width="42" height="42"></a></li>
<li><a href="https://www.yahoo.com"><img src="styles/images/yahoo.png" alt="yahoo" width="42" height="42"></a></li>
<li><a href="https://www.linkedin.com"><img src="styles/images/linkedin.png" alt="linkedin" width="42" height="42"></a></li>
</ul>
</div>
</div>
/* this is the fourth page */
<div data-role="page" id="North America" data-add-back-btn="true" data-back-btn-text="Previous">
<div data-role="header">
<a href="#page" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-back">Back</a>
<h1>North America</h1>
</div>
<div data-role="content">
<h4>Summary</h4>
<p>History: North American Culture is diverse across the continent, from European to African influences have created the diverse culture we see today.</p>
<p>Geographical: North America is the third largest continent by area, North America is located in the Northern Hemisphere and Western Hemisphere, following Asia and Africa.
It’s bordered to the north by the Arctic Ocean, east by the Atlantic Ocean west and south by the Pacific Ocean, southeast by South America and the Caribbean Sea.</p>
<div data-role="collapsible" id="countries2"><h3>Countries of North America</h3>
<ul><li></li>
</ul>
</div>
</div>
<div data-role="footer" id="social" data-poisition="fixed">
<ul>
<li><a href="https://en.wikipedia.org/wiki/North America"><img src="styles/images/wikipedia.png" alt="wikipedia" width="42" height="42"></a></li>
<li><a href="https://www.google.com"><img src="styles/images/google-plus.png" alt="google plus" width="42" height="42"></a></li>
<li><a href="http://www.bing.com"><img src="styles/images/bing.png" alt="bing" width="42" height="42"></a></li>
<li><a href="https://www.yahoo.com"><img src="styles/images/yahoo.png" alt="yahoo" width="42" height="42"></a></li>
<li><a href="https://www.linkedin.com"><img src="styles/images/linkedin.png" alt="linkedin" width="42" height="42"></a></li>
</ul>
</div>
</div>
/* this is the fifth page */
<div data-role="page" id="South America" data-add-back-btn="true" data-back-btn-text="Previous">
<div data-role="header">
<a href="#page" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-back">Back</a>
<h1>South America</h1>
</div>
<div data-role="content">
<h4>Summary</h4>
<p>History: South America’s Culture and ethnic outlook originates from the interaction of the indigenous people with European conquerors, immigrants and locally with African slaves.</p>
<p>Geographical: South America is located the Western Hemisphere, largely in the Southern Hemisphere, minimally in the Northern Hemisphere. South America is bordered to the west by Pacific Ocean and north and east by the Atlantic Ocean, North America and the Caribbean Sea are to the north.</p>
<div data-role="collapsible" id="countries3"><h3>Countries of South America</h3>
<ul>,li></li>
</ul>
</div>
</div>
<div data-role="footer" class="social" data-position="fixed">
<ul>
<li><a href="https://en.wikipedia.org/wiki/South America"><img src="styles/images/wikipedia.png" alt="wikipedia" width="42" height="42"></a></li>
<li><a href="https://www.google.com"><img src="styles/images/google-plus.png" alt="google plus" width="42" height="42"></a></li>
<li><a href="http://www.bing.com"><img src="styles/images/bing.png" alt="bing" width="42" height="42"></a></li>
<li><a href="https://www.yahoo.com"><img src="styles/images/yahoo.png" alt="yahoo" width="42" height="42"></a></li>
<li><a href="https://www.linkedin.com"><img src="styles/images/linkedin.png" alt="linkedin" width="42" height="42"></a></li>
</ul>
</div>
</div>
/* this is the sixth page */
<div data-role="page" id="Antarctica" data-add-back-btn="true" data-back-btn-text="Previous">
<div data-role="header">
<a href="#page" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-back">Back</a>
<h1>Antarctica</h1>
</div>
<div data-role="content">
<h4>Summary</h4>
<p>History: Antarctica is governed by parties to the Antarctic Treaty System that have consulting status. In 1959 the Antarctic Treaty was signed in by 12 countries; presently 5O countries have signed the treaty. Scientist from different nations conduct ongoing experiments.</p>
<p>Geographical: Antarctica is located in the Antarctic region of the Southern Hemisphere, mostly south of the Antarctic Circle and is surrounded by the Southern Ocean. Antarctica is the fifth largest continent in area after Asia, Africa, North America, and South America. It is nearly twice the size of Australia, and 98% is covered by ice.</p>
</div>
<div data-role="footer" id="searches" data-position="fixed">
<ul>
<li><a href="https://en.wikipedia.org/wiki/Antarctica"><img src="styles/images/wikipedia.png" alt="wikipedia" width="42" height="42"></a></li>
<li><a href="https://www.google.com"><img src="styles/images/google-plus.png" alt="google plus" width="42" height="42"></a></li>
<li><a href="http://www.bing.com"><img src="styles/images/bing.png" alt="bing" width="42" height="42"></a></li>
<li><a href="https://www.yahoo.com"><img src="styles/images/yahoo.png" alt="yahoo" width="42" height="42"></a></li>
<li><a href="https://www.linkedin.com"><img src="styles/images/linkedin.png" alt="linkedin" width="42" height="42"></a></li>
</ul>
</div>
</div>
/* this is the seventh page */
<div data-role="page" id="Europe" data-add-back-btn="true" data-back-btn-text="Previous">
<div data-role="header">
<a href="#page" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-back">Back</a>
<h1>Europe</h1>
</div>
<div data-role="content">
<h4>Summary</h4>
<p>History: Europe’s culture (ancient Greece) became the birthplace of Western Culture, the culture began to change in the 18th century and spread throughout the world.</p>
<p>Geographical: Europe is the second smallest continent by surface area, located in the westernmost peninsula of Eurasia, Europe is bordered to the north by the Arctic Ocean, west by the Atlantic Ocean, south by the Mediterranean Sea and the southeast by the connected waterways of the Black Sea. The borders of the continent of Europe incorporates cultural and political elements.</p>
<div data-role="collapsible" id="countries4"><h3>Countries of Europe</h3>
<ul><li></li>
</ul>
</div>
</div>
<div data-role="footer" class="searches" data-position="fixed">
<ul>
<li><a href="https://en.wikipedia.org/wiki/Europe"><img src="styles/images/wikipedia.png" alt="wikipedia" width="42" height="42"></a></li>
<li><a href="https://www.google.com"><img src="styles/images/google-plus.png" alt="google plus" width="42" height="42"></a></li>
<li><a href="http://www.bing.com"><img src="styles/images/bing.png" alt="bing" width="42" height="42"></a></li>
<li><a href="https://www.yahoo.com"><img src="styles/images/yahoo.png" alt="yahoo" width="42" height="42"></a></li>
<li><a href="https://www.linkedin.com"><img src="styles/images/linkedin.png" alt="linkedin" width="42" height="42"></a></li>
</ul>
</div>
</div>
/* this is the eighth page */
<div data-role="page" id="Australia" data-add-back-btn="true" data-back-btn-text="Previous">
<div data-role="header">
<a href="#page" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-back">Back</a>
<h1>Australia/Oceania</h1>
</div>
<div data-role="content">
<h4>Summary</h4>
<p>History: Australian/Oceania culture began with the indigenous Australians. Through the many explorers who discovered Australian/Oceania, the continent’s culture has been influenced and diversified.</p>
<p>Geographical: Australia/Oceania is a region centered on the islands of the tropical Pacific Ocean, the continent comprises of Australia and proximate islands which is surrounded by the Indian and Pacific oceans.</p>
<div data-role="collapsible" id="countries5"><h3>Countries of Australia/Oceania</h3>
<ul><li></li>
</ul>
</div>
</div>
<div data-role="footer" id="icons" data-position="fixed">
<ul>
<li><a href="https://en.wikipedia.org/wiki/Australia"><img src="styles/images/wikipedia.png" alt="wikipedia" width="42" height="42"></a></li>
<li><a href="https://www.google.com"><img src="styles/images/google-plus.png" alt="google plus" width="42" height="42"></a></li>
<li><a href="http://www.bing.com"><img src="styles/images/bing.png" alt="bing" width="42" height="42"></a></li>
<li><a href="https://www.yahoo.com"><img src="styles/images/yahoo.png" alt="yahoo" width="42" height="42"></a></li>
<li><a href="https://www.linkedin.com"><img src="styles/images/linkedin.png" alt="linkedin" width="42" height="42"></a></li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).bind("mobileinit",function(){
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnText = "Previous";
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</body>
</html>
我的CSS
html body {
height: 100%;
}
.ui-mobile .ui-page, .ui-mobile .ui-page .ui-content {
height: 100%;
}
.ui-mobile .ui-page .ui-content .ui-listview {
position: relative;
left: 26%;
}
#header {
background-color: transparent;
}
@media only screen and (max-device-width: 736px) {
#page {
background-image:url(images/world-globes.png);
background-size: 100% 100%;
}
}
#page {
background-image:url(images/world-globes.png);
background-size: 100% 100%;
height: 736px;
background-repeat: no-repeat;
}
#page .ui-title {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: 22px;
color: #063273;
margin-top: 45px;
margin-bottom: 45px;
}
#page a {
color: #063273;
}
#page ul {
margin-top: 55px;
width: 180px;
}
#page ul li a{
background-color:transparent;
}
#Asia {
background-color:transparent;
}
#Asia .ui-header {
background-color:transparent;
}
#Asia .ui-btn {
background-color:transparent;
color: #063273;
}
#Asia .ui-footer {
background-color:transparent;
height: 80px;
}
@media only screen and (max-device-width: 736px) {
#Asia {
background-image:url(images/Asia.png);
background-size: 100% 100%;
}
}
#Asia {
background-image:url(images/Asia.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#Asia div h1 {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: 24px;
color: #063273;
margin-top: 45px;
margin-bottom: 45px;
}
#Asia p {
color: #063273;
}
#Asia div h1 {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: 24px;
color: #063273;
margin-top: 45px;
margin-bottom: 45px;
}
#Asia #countries {
width: 220px;
}
#Asia div ul {
list-style-type: none;
overflow-y: scroll; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch;
}
#Asia div ul #socials {
list-style-type: none;
}
#Africa .ui-header {
background-color:transparent;
}
#Africa .ui-btn {
background-color:transparent;
color: #063273;
}
#Africa .ui-footer {
background-color:transparent;
}
@media only screen and (max-device-width: 736px) {
#Africa {
background-image:url(images/Africa.png);
background-size: 100% 100%;
}
}
#Africa {
background-image:url(images/Africa.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#Africa div h1 {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: 24px;
color: #063273;
margin-top: 45px;
margin-bottom: 45px;
}
#Africa #countries1 {
width: 220px;
}
#Africa div ul {
list-style-type: none;
overflow-y: scroll; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch;
}
#Africa p {
color: #063273;
}
#Africa div ul .socials {
list-style-type: none;
}
#North America .ui-header {
background-color:transparent;
}
#North America .ui-btn {
background-color:transparent;
color: #063273;
}
#North America .ui-footer {
background-color:transparent;
}
@media only screen and (max-device-width: 736px) {
#North America {
background-image:url(images/North-America.png);
background-size: 100% 100%;
}
}
#North America {
background-image:url(images/North-America.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#North America div h1 {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: 24px;
color: #063273;
margin-top: 45px;
margin-bottom: 45px;
}
#North America p {
color: #063273;
}
#North America #countries2 {
width: 220px;
}
#North America div ul {
list-style-type: none;
overflow-y: scroll; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch;
}
#North America div ul #social {
list-style-type: none;
}
#South America .ui-header {
background-color:transparent;
}
#South America .ui-btn {
background-color:transparent;
color: #063273;
}
#South America .ui-footer {
background-color:transparent;
}
@media only screen and (max-device-width: 736px) {
#South America {
background-image:url(images/South-America.png);
background-size: 100% 100%;
}
}
#South America {
background-image:url(images/South-America.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#South America div h1 {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: 24px;
color: #063273;
margin-top: 45px;
margin-bottom: 45px;
}
#South America p {
color: #063273;
}
#South America #countries3 {
width: 220px;
}
#South America div ul {
list-style-type: none;
overflow-y: scroll; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch;
}
#South America div ul .social {
list-style-type: none;
}
#Antarctica .ui-header {
background-color:transparent;
}
#Antarctica .ui-btn {
background-color:transparent;
color: #063273;
}
#Antarctica .ui-footer {
background-color:transparent;
}
@media only screen and (max-device-width: 736px) {
#Antarctica {
background-image:url(images/Antarctica.png);
background-size: 100% 100%;
}
}
#Antarctica {
background-image:url(images/Antarctica.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#Antarctica div h1 {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: 22px;
color: #063273;
margin-top: 45px;
margin-bottom: 45px;
}
#Antarctica p {
color: #063273;
}
#Antarctica div ul {
list-style-type: none;
}
#Europe .ui-header {
background-color:transparent;
}
#Europe .ui-btn {
background-color:transparent;
color: #063273;
}
#Europe .ui-footer {
background-color:transparent;
}
@media only screen and (max-device-width: 736px) {
#Europe {
background-image:url(images/Europe.png);
background-size: 100% 100%;
}
}
#Europe {
background-image:url(images/Europe.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#Europe div h1 {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: 24px;
color: #063273;
margin-top: 45px;
margin-bottom: 45px;
}
#Europe p {
color: #063273;
}
#Europe #countries4 {
width: 220px;
}
#Europe div ul {
list-style-type: none;
overflow-y: scroll; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch;
}
#Europe div ul li {
float: left;
margin: 2px;
}
#Australia .ui-header {
background-color:transparent;
}
#Australia .ui-btn {
background-color:transparent;
color: #063273;
}
#Australia .ui-footer {
background-color:transparent;
}
@media only screen and (max-device-width: 736px) {
#Australia {
background-image:url(images/Australia.png);
background-size: 100% 100%;
}
}
#Australia {
background-image:url(images/Australia.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#Australia div h1 {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: 17px;
color: #063273;
margin-top: 45px;
margin-bottom: 45px;
}
#Australia p {
color: #063273;
}
#Australia #countries5 {
width: 300px;
}
#Australia div ul {
list-style-type: none;
overflow-y: scroll; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch;
}
#Australia div ul li {
float: left;
margin: 2px;
}
哦，我的天啊！非常感谢你，我一直盯着代码这么久，我甚至没有注意到这一点。它修复了它......再次感谢您.. – Anna
记得标记接受的答案，所以其他人可以看到这个问题得到解答。 :) – TuomasK