移动App开发日志开发实例

最新推荐文章于 2024-08-02 20:11:41 发布

RyeWh1skey

最新推荐文章于 2024-08-02 20:11:41 发布

阅读量5.2k

点赞数 4

文章标签： app html css

本文链接：https://blog.csdn.net/RyeWh1skey/article/details/80890882

版权

简单的移动端App开发案例，持续更新。。。

案例是在HBuilder中开发完成的，因为能够方便的一边编写一边及时查看显示结果，而且编写完成后的打包也是简便（可以通过编写web移动app便捷的云打包为apk文件上传实机测试）。

——然后，案例比较简单，是我作为初学者学习的案例，见笑。。。

第一天实现简单的基本界面

界面设计（ps：因为初学者的缘故，所以没有想太过复杂的界面规划）

将页面分为三个div块，分别为Top\Content\Footer，作为标题，内容，底部标签区块。

Content内容块可以滚动，但Top和Footer区块不受滚动条影响。

Footer底部区块平分三块嵌入类似于button的标签。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   			
   		});
   		
    </script>
    
    <style>
    body{
    margin: 0px;
    padding: 0px;
    }
    
    	.body{
    	border:1px solid #000;
    	position: absolute;
    	height:100%;
    	width: 100%;

    	}
    	
    	/*头部*/
    	.top{
    	height: 10%;
    	width: 100%;
    	position: fixed;
    	background-color: #084981;
    	top: 0px;
    	}
    	
    	/*内容*/
    	.content{
    	position: relative;
    	height: 75%;
    	margin-top: 10%;
    	}
    	
    	/*底部*/ 
    	.foot{
    	position: fixed;
    	height: 15%;
    	width: 100%;
    	background-color: #084981;
    	bottom: 0px;
    	
    	}
    	
    	
    	/*标签图片*/
    	.pic{
    	width: 100%;
    	height: 70%;
    	height: auto;
    	width: 33.3%;
    	}
    	
    	
    	/*底部三分区块*/
    	.cell{
    	float: left;
    	height: 100%;
    	width: 33.3%;
    	text-align: center;
    	}
    	/*第一块*/
    	.cell-1{
    	height: 80%;
    	}
    	/*第二块*/
    	.cell-2{
    	height: 80%;
    	}
    	/*第三块*/
    	.cell-3{
    	height: 80%;
    	}
    	
    	
    	/*Top中的标题字*/
    	.top-title1{
    		height: 70%;
    		font-size: 40px;
    		color: #fff;
    	}
    	.top-title2{
    		height: 30%;
    		font-size: 12px;
    		color: #fff;
    	}
    	/*底部标签字体*/
    	.foot-font{
    		height: 20%;
    		color: #FFFFFF;
    	}
    	
    </style>
</head>
<body>
	<!--外部div-->
	<div class="body">
		
		<!--头部-->
		<div class="top">
		<div class="

最低0.47元/天解锁文章

RyeWh1skey

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
移动App开发日志开发实例

简单的移动端App开发案例，持续更新。。。案例是在HBuilder中开发完成的，因为能够方便的一边编写一边及时查看显示结果，而且编写完成后的打包也是简便。——然后，案例比较简单，是我作为初学者学习的案例，见笑。。。第一天实现简单的基本界面界面设计（ps：因为初学者的缘故，所以没有想太过复杂的界面规划）将页面分为三个div块，分别为Top\Content\Footer，作为标题，内容，底部标签区块...
复制链接

扫一扫