Html5实例之婚庆界面

最新推荐文章于 2024-02-23 15:35:24 发布

luoyang2

最新推荐文章于 2024-02-23 15:35:24 发布

阅读量1.6k

点赞数

分类专栏： Android

Android 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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);
 
 
 
    }
 
}

luoyang2

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Html5实例之婚庆界面

HTML5广义上讲是指包括HTML、CSS和JavaScript在内的一套技术组合.主要用于web网页应用.更适合于移动web网页开发.HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。婚庆页面效果图:如何实现的呢，首先根据界面效果准备图片资源页面代码实现 weding.html
复制链接

扫一扫

专栏目录