communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > le corps du texte

Route de développement mobile HTML5 de Xiaoqiang (46) - Calculateur de taux de change [2]

黄舟
Libérer： 2018-05-12 16:58:12
original
2688 Les gens l'ont consulté

Dans l'article précédent nous avons complété la page de calcul du taux de change, complétons maintenant l'affichage de la page de paramétrage du taux de change. 

	<p class="setRates">
		<p class="header">
			<p class="back"><a href="#" data-rel="back" id="backAndSave"><img src="images/tm.gif" width="93" height="54" border="0"></a></p>
		</p>
		<p class="bg">
			<!--列表-->
			<p class="list">
			  <p class="currency w100"><span class="strong">100</span><span class="f25">美元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r2" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民币</p>
			</p>
			
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">日元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r3" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民币</p>
			</p>
			
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">里尔</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r4" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民币</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">新加坡元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r5" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民币</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">欧元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r6" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民币</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">克朗</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r7" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民币</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">英镑</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r8" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民币</p>
			</p>
		</p>
		<p class="footer"></p>
	</p>
Copier après la connexion

Le code source de toutes les interfaces est donné ci-dessous :

index.html





无标题文档









	

		

			

		

		

			
			

				
人民币

				

			

			

				
美元

				

			

			

				
日元

				

			

			

				
里尔

				

			

			

				
新加坡元

				

			

			

				
欧元

				

			

			

				
克朗

				

			

			

				
英镑

				

			

		

		

	





	<p class="setRates">
		<p class="header">
			<p class="back"><a href="#" data-rel="back" id="backAndSave"><img src="images/tm.gif" width="93" height="54" border="0"></a></p>
		</p>
		<p class="bg">
			<!--列表-->
			<p class="list">
			  <p class="currency w100"><span class="strong">100</span><span class="f25">美元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r2" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民币</p>
			</p>
			
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">日元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r3" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民币</p>
			</p>
			
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">里尔</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r4" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民币</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">新加坡元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r5" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民币</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">欧元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r6" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民币</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">克朗</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r7" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民币</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">英镑</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r8" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民币</p>
			</p>
		</p>
		<p class="footer"></p>
	</p>
Copier après la connexion

style.css

/* CSS Document */
body{
	background-color:#c19e7d;
	font-family:"黑体";
	margin:0px;
	padding:0px;
}

/*
1.text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。
2.margin:0 auto 设置块元素（或与之类似的元素）的居中。
*/

.exchangeRates,.setRates{
	width:480px; 
	height:100%;
	margin:0 auto;
	font-family:"黑体";	
}

.header{
	width:480px;	
	height:116px;
	background:url(../images/title.png) no-repeat;
}

.header .right{ 
	float:right;
	width:80px;
	height:54px;
}
.header .right a{
	float:right;
	width:80px;
	height:54px;	
}
.header .right a:hover{
	float:left;
	width:80px;
	height:54px;	
	background:url(../images/setting.png) no-repeat;
}

.bg{
	width:480px;
	height:598px;
	background:url(../images/bg.png) no-repeat;
	background-color:#999933;
	overflow:hidden;
}

.bg .list{
	float:left;
	width:480px;
	height:77px;
	background:url(../images/line.png) 0px 64px no-repeat;	
}

.bg .list .currency{
	float:left;
	width:150px;
	height:77px;
	text-align:left;
	font-size:28px;
	line-height:50px;
	color:#bea58c;
	padding-left:30px;
}

.bg .list .money{ 
	float:left; 
	width:240px;
	height:77px; 
	text-align:right; 
	font-weight:bold; 
	line-height:50px; 
	color:#ffefda;
	padding-top:3px;
}
.bg .list .money input{
	float:right; 
	background-color:transparent; 
	width:210px; 
	height:25px;
	border:0px; 
	font-size:30px; 
	color:#ffefda; 
	font-family:Arial, Helvetica, sans-serif;
	padding-left:6px; 
	padding-right:6px; 
	text-align:right;
}

.strong{ font-weight:bold}

.footer{
	width:480px; 
	height:49px; 
	background:url(../images/bottom.png) no-repeat;
}


.bg .list .equal{
	float:left; 
	width:20px; 
	height:77px; 
	text-align:center; 
	font-size:30px; 
	font-weight:bold; 
	line-height:50px; 
	color:#ffefda; 
}
.bg .list .setRates{ 
	float:left; 
	width:153px; 
	height:77px; 
	text-align:left; 
	padding-top:3px;}
.bg .list .setRates input{
	float:right; 
	background-color:transparent; 
	width:128px; 
	height:28px; 
	border:2px solid #be9975; 
	background-color:#84613f; 
	border-radius:7px; 
	font-size:28px; 
	color:#ffefda; 
	font-family:Arial, Helvetica, sans-serif; 
	padding-right:6px; 
	text-align:right;
}
.bg .list .flagRight{
	float:left; width:67px;
	 height:77px; 
	 text-align:left; 
	 padding-left:6px; 
	 color:#bea58c; 
	 line-height:50px;
	 font-size:22px;}
/*setting*/
.setRates .header{
	width:464px; 
	height:116px; 
	background:url(../images/setting_title.png) no-repeat; 
	padding-left:16px; 
}
.setRates .header .back{ 
	float:left; 
	width:93px; 
	height:54px; 
} 
.setRates .header .back a{ 
	float:left; 
	width:93px; 
	height:54px; 
} 
.setRates .header .back a:hover{ 
	float:left; 
	width:93px; 
	height:54px; 
	background:url(../images/setting_back.png) no-repeat; 
} 

.f25{ font-size:25px;}
.w100{ width:100px;}

/*解决 jqmobile切换闪屏*/
.ui-page {  
	backface-visibility: hidden;  
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
Copier après la connexion

Effet de fonctionnement sur téléphone mobile :

Ce qui précède est le chemin de développement mobile HTML5 de Xiaoqiang (46) - calculateur de taux de change [2] Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois (www.php.cn) !


Étiquettes associées：
HTML5，移动开发，汇率计算器
source：php.cn
Article précédent：Route de développement mobile HTML5 de Xiaoqiang (45) - Calculateur de taux de change [1] Article suivant：Route de développement mobile HTML5 de Xiaoqiang (47) - cadre de page de base mobile jquery
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1868
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
2033
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1711
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1613
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1626
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal