지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > Xiaoqiang의 HTML5 모바일 개발 로드(46) - 환율 계산기 [2]

Xiaoqiang의 HTML5 모바일 개발 로드(46) - 환율 계산기 [2]

黄舟
풀어 주다： 2018-05-12 16:58:12
원래의
2711명이 탐색했습니다.

이전 글에서는 환율 계산 페이지를 완료했다면 이제 환율 설정 페이지 표시를 완료해 보겠습니다. 

	<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>
로그인 후 복사

모든 인터페이스의 소스 코드는 다음과 같습니다.

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>
로그인 후 복사

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;
}
로그인 후 복사

실행 효과 휴대폰:

위는 Xiaoqiang의 HTML5 모바일 개발 로드(46) - 환율 계산기[2]의 내용입니다. 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!


관련 라벨：
HTML5，移动开发，汇率计算器
원천：php.cn
이전 기사：Xiaoqiang의 HTML5 모바일 개발 로드(45) - 환율 계산기 [1] 다음 기사：Xiaoqiang의 HTML5 모바일 개발 로드(47) - jquery 모바일 기본 페이지 프레임워크
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2201
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2347
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1965
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1853
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1914
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿