HTML5广义上讲是指包括HTML、CSS和JavaScript在内的一套技术组合.主要用于web网页应用.更适合于移动web网页开发.
HTML 5有两大特点：
首先，强化了 Web 网页的表现性能。
其次，追加了本地数据库等 Web 应用的功能。
1
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
| 2 | <head> |
| 3 | <title>婚庆主页</title>
|
4
<Meta http-equiv=
"content-type" content="text/html; charset=utf-8">
| 5 | <Meta name="viewport" "width=device-width,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes"6
|
<!--<Meta name="width=640,initial-scale=0.5,maximum-scale=0.5" />-->
|
| 7 | "apple-mobile-web-app-capable" "YES"8
|
<link rel="stylesheet" href="mycss.css" type="text/css" />
|
| 9 |
10
</head>
| 11 | 12 | <body bgcolor="#680011"13
|
14 | <div class="wrapcontain" style="width: 300px;padding: 10px;padding-top: 0px;margin: 0 auto;background-color:#680011;"15
|
"imgTop"16
|
<img "imgtop_bg" src="./img/index_top_bg.png" 17
|
"imgtop_lb""./img/index_microphone.png"/>
|
18
<h3
"p3"19
<p id="sp11" "sp1">离我们婚礼</p>
20
<p
"sp2"21
还有<span "sp3">35</span>天
22
</p>
| 23 | </h3> |
24
</div>
| 25 | 26 | "imgShow"27
|
28 | <img src="./img/index_yaoqinghan.png" 29
|
"./img/index_zhufuqiang.png" 30
|
"./img/index_yaoyiyao.png" 31
|
"./img/index_hunsha.png" 32
|
33 | 34 | "footer"35
|
36 | <a href="###">婚礼承办方:成都幸福公社婚庆公司<img
|
| 37 | "./img/redRightarrow.png" /></a>
|
38
| 39 | </div> |
40
41
42
</body>
| 43 | </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; |
44
45
46
.sp3 {
| 47 | font-size: 20px; |
48
49
50
.imgShow {
| 51 | width: 320px; |
52
height: 210px;
| 53 | overflow: hidden; |
54
margin-left: -10px;
| 55 | margin-top: 14px; |
56
57
58
59
.imgShow img {
60
width: 145px;
| 61 | height: 110px; |
62
display: inline-block;
| 63 | float: left;
|
64
65
margin-bottom: 10px;
66
67
.footer {
68
margin-top: 14px;
| 69 | text-align: center; |
70
71
72
.footer a {
| 73 | color: #92192d; |
74
font-size: 14px;
| 75 | 76 | 77 | .footer img { |
78
width: 20px;
| 79 | display: inline-block; |
80
position: relative;
| 81 | top: 2px; |
82
margin-left: 8px;
| 83 | } |
通过上述步骤我们已经实现页面效果，接着我们将把界面显示到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"
"match_parent" </LinearLayout>
|
