Html5实例之婚庆界面

周sir | 2015年8月4日 | Android UI界面 | 0 条评论 | 1971

HTML5广义上讲是指包括HTML、CSS和JavaScript在内的一套技术组合.主要用于web网页应用.更适合于移动web网页开发.
HTML 5有两大特点：
首先，强化了 Web 网页的表现性能。
其次，追加了本地数据库等 Web 应用的功能。

婚庆页面效果图:

如何实现的呢，首先根据界面效果准备图片资源

页面代码实现 weding.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>婚庆主页</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0,user-scalable=yes">
	<!--<meta name="viewport" content="width=640, initial-scale=0.5,maximum-scale=0.5" />-->
	<meta name="apple-mobile-web-app-capable" content="YES">
	<link rel="stylesheet" href="mycss.css" type="text/css" />

</head>

<body bgcolor="#680011">

	<div class="wrapcontain" style="width: 300px;padding: 10px;padding-top: 0px;margin: 0 auto;background-color:#680011;">
		<div class="imgTop">
			<img class="imgtop_bg" src="./img/index_top_bg.png" />
			<img class="imgtop_lb" src="./img/index_microphone.png"/>
			<h3 class="p3">
				<p id="sp11" class="sp1">离我们婚礼</p>
				<p class="sp2">
					还有<span class="sp3">35</span>天
				</p>
			</h3>
		</div>

		<div class="imgShow">

			<img src="./img/index_yaoqinghan.png" />
			<img src="./img/index_zhufuqiang.png" />
			<img src="./img/index_yaoyiyao.png" />
			<img src="./img/index_hunsha.png" />
		</div>

		<div class="footer">

			<a href="###">婚礼承办方:成都幸福公社婚庆公司<img
				src="./img/redRightarrow.png" /></a>

		</div>
	</div>

</body>
</html>

css代码 mycss.css

.imgTop {
	width: 320px;
	margin-left: -10px;
	margin-right: -10px;
	min-height: 200px;
	position:relative;
	border-bottom:1px solid #ffeeac;
}

.imgTop .imgtop_bg{
	width: 100%;
}

.imgTop .imgtop_lb {
	margin-top: 10px;
	margin-left: 10px;
	position: absolute;left: 10px; top:10px;
}
.p3 {
	width: 118px;
	height: 22px;

	/* background-color: #ff6766; */
	/* margin: 10px; */
	/* float: right;*/
	/* margin-top:110px; */

	padding: 30px;
	position: absolute;
	right: 10px;
	bottom : 0px; 

}

.sp1 {
	font-size: 10px;
	color: #ffeeac;
}

.sp2 {
	font-size: 10px;
	color: #ffeeac;
	text-align: right;
}

.sp3 {
	font-size: 20px;
}

.imgShow {
	width: 320px;
	height: 210px;
	overflow: hidden;
	margin-left: -10px;
	margin-top: 14px;

}

.imgShow img {
	width: 145px;
	height: 110px;
	display: inline-block;
	float: left;
	margin-left: 10px;
	margin-bottom: 10px;
}
.footer {
	margin-top: 14px;
	text-align: center;
}

.footer a {
	color: #92192d;
	font-size: 14px;
}

.footer img {
	width: 20px;
	display: inline-block;
	position: relative;
	top: 2px;
	margin-left: 8px;
}

通过上述步骤我们已经实现页面效果，接着我们将把界面显示到Android应用中，需要一个叫webView的控件，我们看下代码.
activity_weding_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <WebView
        android:id="@+id/weding_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

WebViewActivity.java

public class WedingActivity extends Activity {
	private WebView mWebView;
	private String url = "http://www.warmtel.com/html/weding.html"; //上面实现的网页 

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_weding_layout);

		mWebView = (WebView) findViewById(R.id.weding_webview);

		mWebView.loadUrl(url);

	}
}