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>
|