html5编写一个手机app的首页

最新推荐文章于 2024-05-25 19:14:02 发布
最新推荐文章于 2024-05-25 19:14:02 发布
阅读量2.6w 收藏 163
点赞数 24
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanseguhui/article/details/80630580
版权

 

为了适配各种手机用一段简单的js代码解决

 

<script>

autoSize();

window.onresize = function(){

autoSize();

}

function autoSize(){

// 获取当前浏览器的视窗宽度，放在w中

var w = document.documentElement.clientWidth;

// 计算实际html font-size大小

var size = w * 100 / 375 ;

// 获取当前页面中的html标签

var html = document.querySelector('html');

// 设置字体大小样式

html.style.fontSize = size + 'px';

}

</script>

 

头部和底部固定不动，用fixed固定定位

 

中间用overflow:scroll;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="./css/font-awesome.css">
	<title>Document</title>
	<style type="text/css">
	   html{
		 font-size: 100px;	
		}
		div{
			box-sizing: border-box;
		}
		body,input,i,a{
			padding:0;
			margin:0;
			text-decoration: none;
			outline: none;
			font-size: 0.12rem;
		}
		body{
			background: rgb(240,240,240);
		}
		.header>.top{
			position: fixed;
			left:0;
			top:0;
			z-index: 10;
			height: 0.44rem;
			background: #26A69A;
			font-size: 0.14rem;
			color:white;
			width: 100%;
			text-align: center;
			padding-left: 0.17rem;
			padding-right: 0.17rem;
			line-height: 0.44rem;
		}
		.header:after{
			content: "";
			display: block;
			clear: both;
		}
		.top>.address{
			float: left;
		}
		.top input{
			width: 2.54rem;
			height: 0.28rem;
		}
		.search>i{
			position: absolute;
			left:0.83rem;
			top:0.17rem;
			z-index: 10;
			color: gray;


		}
		.top>.xx{
			position: absolute;
			left:3.1rem;
			top:0.08rem;
			z-index: 5;
			color: gray;
			font-size: 0.14rem;
		}
		.top>.sm{
			position: absolute;
			left:3.35rem;
			top:0rem;
			z-index:5;
			color: white;
			font-size: 0.28rem;	
			margin-left: 0.1rem;


		}
		.header>.banner{
			margin-top:0.44rem;
		}
		.banner>.img{
			position: relative;
			width: 100%;
			height: 1.64rem;
		}
		.banner>.img>img{
			width: 100%;
			height:1.64rem;
			object-fit: cover;
		}
		.banner .cut1,.banner .cut2{
			font-size: 0.4rem;
			color:white;
			font-weight: lighter;
		}
		.banner .cut1{
			position:absolute;
			left:0.1rem;
			top:0.55rem;
			z-index: 5; 
		}
		.banner .cut2{
			position: absolute;
			right: 0.1rem;
			top:0.55rem;
			z-index: 5;
		}
		.nav{
			height: 1.08rem;
			width: 100%;
			background: white;
			display: flex;
			flex-flow: row ;
			justify-content: space-around;
			padding-top: 0.16rem;
			text-align: center;
			color: #666666;


		}
		.nav>.first>.top,.nav>.sec>.top,.nav>.third>.top,.nav>.four>.top{
			width: 0.6rem;
			height: 0.6rem;	
			margin-bottom: 0.08rem;
		}
		.nav>.first>.top{
			background: #48BDB2;
		}
		.nav>.sec>.top{


			background: #FF5353 ;


		}
		.nav>.third>.top{
			background: #5B96F7  ;


		}
		.nav>.four>.top{
			background: #F38A42 ;


		}
		.top>i{
			font-size: 0.35rem;
			color: white;
			margin-top:0.1rem;
		}
		.intro{
			width: 100%;
			height: 0.36rem;
			background: rgb(234,246,245);


			display: flex;
			flex-flow: row;
			justify-content: flex-start;
			font-size: 0.09rem;
		    color: #333333;
		    border: 1px solid #26A69A;


		}
		.intro>img{
			width: 0.43rem;
			height: 0.342rem;
			margin-right: 0.09rem;
		}
		.intro span{
			color: red;
		}
		.show{
			height: 1rem;
		}
		.content>.first{
			height: 1.85rem;
			background: white;
			padding-left: 0.12rem;
			padding-top: 0.13rem;
			padding-right: 0.17rem;
		}
		.content{
			overflow: scroll;
		}
	    .content>.first>.title{
	    	color: #666666;


	    }
		.first>.title>span{
			color: green;
			font-weight: bold;
			font-size: 0.12rem;
			margin-left: 0.08rem;
		}


		.first>.title>a{
			float: right;
			color: #666666;
		}
		.first>.left{
			width: 2.16rem;
			height: 1.36rem;
			background: red;
		}
		.first>.left>img{
			width: 2.16rem;
			object-fit: cover;
		}
       .content>.first>.firstImg{
       	display: flex;
       	flex-flow: row wrap;
       	justify-content: space-between;
       }
       .first .right>.top{
       	margin-top: 0.12rem;
       	margin-bottom: 0.1rem;
       }
       .first .left{
       	margin-top: 0.12rem;


       }
       .cell{
       	padding-left: 0.12rem;
       	padding-right: 0.17rem;
       	margin-top:0.13rem;
       	background: white;
       	padding-top: 0.17rem;
    




       }


       .cell>.title{
       	height: 0.2rem;
       }
		.cell>.title>span{
			color: green;
			font-weight: bold;
			font-size: 0.12rem;
			margin-left: 0.08rem;
			margin-top: 0.12rem;
		}
		 .content>.cell>.title{
	    	color: #666666;


	    }
	    .cell>.title>a{
			float: right;
			color: #666666;
		}
        .cell .cell1{
        	width: 47%;
        	height: 1.85rem;
        }


	    .cell1>.left{
	    	width: 100%;
	    	height: 1.85rem;
	    }
	    .cell1 img{
	    	width: 100%;
	    	object-fit: cover;
	    	display: block;
	    }
	    .cell1 .name{
	    	color: green;
	    }
	    .cell1>.left>.view{
	    	font-size: 0.09rem;
	    	color: gray;
	    	border-bottom:1px dashed gray;
	    	margin-bottom: 0.08rem;
	    	padding-bottom: 0.03rem;
	    }
        .cell1>.left>.shop{
        	float: right;
        	background: #26A69A;
			border-radius: 4px;
			padding: 0.03rem 0.05rem;
			font-size: 0.12rem;
			color: white;
			margin-right: 0.03rem;
        }
        .cell1>.left>span{
        	color: green;
        	font-size: 0.13rem;


        }
        .cell>.bottom{
        	   	display: flex;
       	flex-flow: row wrap;
       	justify-content: space-between;


        }
        .cell .cell1{
        	margin-bottom: 0.15rem;
        }


       .footer{
       	position: fixed;
       	width: 100%;
       	left:0;
       	bottom: 0;
       	z-index: 5;
       	height: 0.48rem;
        background: #26A69A ;
        display: flex;
        flex-flow: row;
        justify-content: space-around;
        line-height: 0.24rem;
       }
       .footer>.option{
       	width: 25%;
       	text-align: center;
       }
      .content{
      	margin-bottom: 0.5rem;
      }
      .footer{
      	color: white;
      }
      .footer i{
      	font-size: 0.15rem;
      }
      .footer .list{
      	font-size: 0.08rem;
      }
      .footer>.option:hover{
      	background: white;
      	color:  #26A69A;
      }








	</style>
</head>
<body>
	<div class="header">
		<div class="top">
			<div class="address">北京</div>
			<div class="search">
				 <i class="fa fa-search"> Sketch</i>


				 <input type="text" >
			</div>
			<i class="fa fa-times-circle-o xx"></i>
			<i class="fa fa-minus-square-o sm"></i>
   	         
		</div>
		<div class="banner">
			<div class="img">
				<img src="./content4.png" alt="">
				<div class="cut1"> < </div>
				<div class="cut2"> > </div>
			</div>
		</div>
		<div class="nav">
			<div class="first">
				<div class="top"><i class="fa fa-gift"></i></div>
				<div class="bottom">优惠活动</div>
			</div>
			<div class="sec">
				<div class="top"><i class="fa fa-handshake-o"></i></div>
				<div class="bottom">商家联盟</div>
			</div>
			<div class="third">
				<div class="top"><i class="fa fa-th-large"></i></div>
				<div class="bottom">汽车资讯</div>
			</div>
			<div class="four">
				<div class="top"><i class="fa fa-headphones"></i></div>
				<div class="bottom">售后服务</div>
			</div>
					
		</div>


		<div class="intro">
			<img src="./lv.jpg" alt="">
			<div class="right">
				<div class="top">
					目前<span>10000人</span>为绿化做出贡献
				</div>
				<div class="bottom">
					您可以成为<span>第100002名</span>为绿化做贡献者
				</div>
			</div>
			
			
		</div>
		<div class="show">
			<img src="./content1.png" alt="">
		</div>
	</div>
	<div class="content">
		<div class="first">
			<div class="title">
				<span>|</span> TOP排行
				<a href="">更多 > </a>
			</div>
			<div class="firstImg">	
              <div class="left">
              	<img src="./content2.png" alt="">
              </div>
              <div class="right">
              	<div class="top">
              		<img src="./content3.png" alt="">
              	</div>
              	<div class="bottom">
              		<img src="./content3.png" alt="">
              	</div>
              </div>
			</div>
		</div>
		<div class="cell">
			<div class="title">
				<span>|</span> 新能源品牌热卖
				<a href="">更多 ></a>
			</div>
			<div class="bottom">
					<div class="cell1">
				<div class="left">
					<div class="img">
						<img src="./title.jpg" alt="">
					</div>
					<div class="name">
						特斯拉
					</div>
					<div class="view">
						特斯拉特斯拉特斯拉特斯拉
					</div>	
					<span>￥34.223.00</span>
					<span class="shop">加入购物车</span>
				
				</div>	
			</div>
			<div class="cell1">
				 <div class="left">
					<div class="img">
						<img src="./title.jpg" alt="">
					</div>
					<div class="name">
						特斯拉
					</div>
					<div class="view">
						特斯拉特斯拉特斯拉特斯拉
					</div>	
					<span>￥34.223.00</span>
					<span class="shop">加入购物车</span>
				
			</div>	
			</div>
			<div class="cell1">
				<div class="left">
					<div class="img">
						<img src="./title.jpg" alt="">
					</div>
					<div class="name">
						特斯拉
					</div>
					<div class="view">
						特斯拉特斯拉特斯拉特斯拉
					</div>	
					<span>￥34.223.00</span>
					<span class="shop">加入购物车</span>
				
				</div>	
			</div>
			<div class="cell1">
				<div class="left">
					<div class="img">
						<img src="./title.jpg" alt="">
					</div>
					<div class="name">
						特斯拉
					</div>
					<div class="view">
						特斯拉特斯拉特斯拉特斯拉
					</div>	
					<span>￥34.223.00</span>
					<span class="shop">加入购物车</span>
				
				</div>	
			</div>
			</div>
		</div>
		<div class="cell">
			<div class="title">
				<span>|</span> 新能源品牌热卖
				<a href="">更多 ></a>
			</div>
			<div class="bottom">
					<div class="cell1">
				<div class="left">
					<div class="img">
						<img src="./title.jpg" alt="">
					</div>
					<div class="name">
						特斯拉
					</div>
					<div class="view">
						特斯拉特斯拉特斯拉特斯拉
					</div>	
					<span>￥34.223.00</span>
					<span class="shop">加入购物车</span>
				
				</div>	
			</div>
			<div class="cell1">
				 <div class="left">
					<div class="img">
						<img src="./title.jpg" alt="">
					</div>
					<div class="name">
						特斯拉
					</div>
					<div class="view">
						特斯拉特斯拉特斯拉特斯拉
					</div>	
					<span>￥34.223.00</span>
					<span class="shop">加入购物车</span>
				
			</div>	
			</div>
			<div class="cell1">
				<div class="left">
					<div class="img">
						<img src="./title.jpg" alt="">
					</div>
					<div class="name">
						特斯拉
					</div>
					<div class="view">
						特斯拉特斯拉特斯拉特斯拉
					</div>	
					<span>￥34.223.00</span>
					<span class="shop">加入购物车</span>
				
				</div>	
			</div>
			<div class="cell1">
				<div class="left">
					<div class="img">
						<img src="./title.jpg" alt="">
					</div>
					<div class="name">
						特斯拉
					</div>
					<div class="view">
						特斯拉特斯拉特斯拉特斯拉
					</div>	
					<span>￥34.223.00</span>
					<span class="shop">加入购物车</span>
				
				</div>	
			</div>
			</div>
		</div>
		
	</div>
	<div class="footer">
      <div class="option  shouye">
      
      	<i class="fa fa-home"></i>
      	<div class="list">首页</div>
   
      	
      </div>
       <div class="option">
          <i class="fa fa-th-large"></i>
      	  <div class="list">分类</div>
      </div>
       <div class="option">
	<i class="fa fa-list-ul"></i>
      	<div class="list">定位</div>
      </div>
       <div class="option">
      	<i class="fa fa-user-o"></i>
      	<div class="list">我</div>
      </div>
		

	</div>

<script>




autoSize();



window.onresize = function(){

autoSize();

   

}



function autoSize(){

// 获取当前浏览器的视窗宽度，放在w中

var w = document.documentElement.clientWidth;

// 计算实际html font-size大小

var size = w * 100 / 375 ;

// 获取当前页面中的html标签

var html = document.querySelector('html');

// 设置字体大小样式

html.style.fontSize = size + 'px';

}

</script>



</body>
</html>

整理了一些书籍分享给大家，可关注公众号菜单栏点击推荐书籍获取链接

JavaScript高级程序设计(红宝书)     你不知道的JavaScript（上卷）  你不知道的JavaScript（中卷）  你不知道的JavaScript（下卷）.pdf

js权威指南.pdf    深入理解ES6.pdf    es6标准入门(第三版).pdf    HTML与CSS入门经典   Javascript高级程序设计

JavaScript设计模式    性能网站建设进阶指南   精通正则表达式   HTML5程序设计  CSS权威指南  JavaScript权威指南

JavaScript面向对象编程指南   HTTP权威指南.pdf   计算的本质：深入剖析程序和计算机.pdf

 

 

七上八下的爆米花
关注
  • 24
    点赞
  • 踩
  • 163
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
手机app主页网站模板
04-02
手机app主页网站模板
html手机端网站
08-10
利用Vue-cli webpack脚手架 进行项目构建 对手机浏览器的完美支持
快速入门：低代码开发APP软件的步骤详解
最新发布
dunniang的博客
05-25 469
创建沙盒App应用软件可以让您和您的同事测试App应用软件，发现任何错误，测试不同的用例，并在部署最终结果之前实施更改。如果您的App软件是独一无二的，并且市场上还没有类似的App应用软件，这是最理想的。通过我们的拖放界面，选择您希望在App应用软件中看到的元素，只需在UI上拖放代码块即可开发App应用软件。通过页面，您可以从收集的数据中聚合和提取值，将它们转换为大量可视信息，在屏幕上展现业务的详细概述。通过角色和权限，控制谁可以看、能查看什么，定义详细的数据访问层次结构，并跟踪对应用软件所做的更改。
HTML5 + CSS3 制作的图文并茂页面
10-17
HTML5和CSS3制作的展示类页面，使用了HTML5及CSS3的新标签和特性，页面图文并茂。兼容IE9+、Chrome、Firefox等主流浏览器；页面兼容不同分辨率的屏幕。包含一个html文件，四个css文件，一个js文件及若干图片。由于包含一个mp4文件，故压缩包较大。Tips.本人js能力有限 故js代码较为简单。
html+css+javascript常用实例之 app首页效果
qq_29848853的博客
03-07 1752
首页底部导航栏
html+js+css 构建手机页面
加金开发
03-10 1198
1.获取页面大小 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scr...
使用html写一个android关于界面，事情原来可以如此简单
洪伟的专栏
11-07 1万+
当软件开发进入尾声，我们都会给软件配上个关于帮助界面 ，关于界面一般都会包含软件名称、软件版本、官方群号、官方公众号、感谢等等的一系列内容，这些内容往往都是一个陈列展示的内容，我们不得不使用一大堆TextView排版，不能灵活控制这些内容，有没有更好的方法呢，我个人觉得使用些简单的HTML知识，结合javascript就能灵活的控制关于帮助页面了。 HTML页面中的文字都可以随意改变，如
手机端常见兼容问题
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
10-29 5494
1、在写手机端时必要需要加入meta &lt;meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"&gt; // （width=device-width）， // 初始缩放比例（initial-scale=1）为......
手机平板app应用单页html5网站模板
04-02
【描述】：手机和平板App应用的单页HTML5网站模板是现代Web开发中的一个重要组成部分，尤其对于那些希望在移动平台上展示其产品或服务的企业和开发者来说。这种模板设计的核心理念是将所有信息集中在单个网页上，...
200款HTML手机网页模板H5模板App模板
03-23
每个文件代表一个独特的模板设计，可能包括HTML文件、CSS文件、JavaScript文件和其他相关资源，开发者可以下载解压后直接使用或进行二次开发。 总的来说，这些模板为IT专业人士提供了丰富的设计选择，无论是创建...
使用HTML5开发手机APP分享.zip_APP开发_HTML5 APP开发_HTML5 手机_shoemdf_手机APP
09-15
总的来说，使用HTML5开发手机APP是一个综合性的过程，涉及到前端技术栈的多个层面，包括HTML5、CSS3、JavaScript、框架选择、性能优化和跨平台适配。尽管有一些挑战，但借助现代工具和框架，开发者可以高效地构建出...
使用HTML5编写的安卓外卖APP
10-16
本项目“使用HTML5编写的安卓外卖APP”正是这样的一个实例，它展示了如何利用HTML5、CSS3以及JavaScript等前端技术，构建出一款功能完善的安卓移动端外卖应用。 首先，HTML5是核心，它提供了丰富的网页标记语言，...
安卓app应用超市手机网站模板
04-02
"安卓app应用超市手机网站模板" 是一个专门为安卓应用程序设计的网站模板，主要用于展示和推广安卓应用。这种模板通常包含了一系列精心设计的页面和元素，旨在为用户提供一个直观、易于导航的平台，使他们可以浏览、...
HTML5教程之移动端Web页面布局
delishcomcn的博客
09-15 1955
随着科技的进步，及人们日常生活节奏的加快，我们通常花费在手机等移动设备上的时间比使用电脑的时间越来越多，为了适应市场及用户的转变，越来越多的服务从PC端转向移动端，就导致移动端有着强大的发展前景和巨大的市场，作为一个Web高级前端开发工程师，移动端页面布局也成了我们必须掌握的技能之一。% 根据父元素的尺寸进行计算;但是，浏览器也就是viewport的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport的宽度。
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
热门推荐
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
HTML番外篇(五)-移动端适配
Welisit的博客
08-24 5951
移动互联网的快速发展，让人们已经越来越习惯于使用手机来完成大部分日常的事务。前端我们已经学习了大量HTML、CSS的前端开发知识，并且也进行了项目实战；这些知识也同样适用于移动端开发，但是如果想让一个页面真正适配于移动端，我们最好多了解一些移动端的知识；原生App开发（iOS、Android、RN、uniapp、Flutter等）小程序开发（原生小程序、uniapp、Taro等）Web页面（移动端的Web页面，可以使用浏览器或者webview浏览）
初学者使用html制作的一个新闻页面
qq_51191109的博客
02-21 1万+
目录 一些会运用到的知识： ​新闻图示 代码如下： Css：中文翻译是层叠样式表（html的化妆师） 1.Css的语法 2.内部样式表： 3.选择器 4.Css的属性 新闻图示 代码如图所示 这是一个自己学习看视频后运用的学习笔记 一些会运用到的知识： 1.图片插入标签： <img src=”图片地址（图片路径）”width=“图片的宽度”height=“图片的高度”> 注意点：src必须要有，路径必须...
【简单html静态网页代码】 基于HTML仿oppo手机商城电商项目的设计与实现6个页面
而风不止
12-19 1621
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
使用html做一个简单的新闻页面
qq_66555349的博客
01-21 5893
使用html做个简单的新闻页面
开发一个手机app用什么框架
05-28
选择开发一个手机 App 时，可以使用以下框架进行开发： 1. React Native：React Native 是一个由 Facebook 开源的跨平台移动应用开发框架，可以使用 JavaScript 和 React 框架编写应用程序，支持 iOS 和 Android ...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值