html5写一个简单的手机app的设置界面

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

 

 

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<title>Document</title>

<style>

html{

font-size:100px;

}

body{

background: rgb(239,239,239);

}

body,a,h3,span{

padding:0;

margin:0;

text-decoration: none;

}

.header{

background: #26A69A ;

height: 0.44rem;

font-size:0.14rem;

color: white;

padding-left:0.17rem;

padding-right: 0.25rem;

text-align: center;

line-height: 0.44rem;


}

.header>a{

color: white;

float: left;

}

    .header>.btn{

    float: right;

    padding-top:0.1rem;

    }

.btn>span{

border-radius: 100%;

display: block;

width: 0.04rem;

height: 0.04rem;

background: white;

margin-top: 0.03rem;

}

.username{

height: 0.72rem;

background: white;

border-bottom: 1px solid #E0E0E0 ;

padding-left: 0.17rem;

padding-right: 0.12rem;

padding-top: .12rem;

}

.username>img{

width: 0.48rem;

height: 0.48rem;

object-fit: cover;

margin-right: 0.12rem;

float: left;

border-radius: 0.1rem;

}

.username>.text{

height: 0.48rem;

float: left;


}

.username .name{

font-size: 0.15rem;

margin-bottom: 0.08rem;


}


.username .haha{

font-size: 0.12rem;

color: #5D5D5D;

}

.right{

font-size:0.12rem;

float: right;

margin-top: 0.12rem;



}

.right>a{

font-size: 0.12rem;

}

.right>.img,.right>.back{

display: inline-block;

vertical-align: middle;

}

.address,.safe,.shezhi,.secrt,.view,.other{

font-size: 0.14rem;

padding-left: 0.17rem;

border-bottom: 1px solid #E0E0E0 ;

height: 0.65rem;

line-height: 0.65rem;

padding-right: 0.12rem;

background: white;

}

.safe{

margin-top:0.13rem;

margin-bottom: 0.13rem;

}

.view{

margin-bottom: 0.13rem;

}

.address>a,.safe>a,.shezhi>a,.secrt>a,.view>a,.other>a{

float: right;

}

.footer{

margin-top: 0.2rem;

height: 0.5rem;

font-size: 0.16rem;

border:1px solid red;

border-radius: 0.05rem;

width: 2.99rem;

text-align: center;

line-height: 0.5rem;

margin-left: 0.35rem;

}



</style>


</head>

<body>

<div class="header">

<a href=""> < </a>

设置

<div class="btn">

<span></span>

<span></span>

<span></span>

</div>

</div>

<div class="content">

<div class="username">


<img src="./timg.jpeg" alt="" />

<div class="text">

<div class="name">你好你好</div>

<div class="haha">会员名：哈哈哈哈</div>

</div>

<div class="right">

<div class="img"><img src="./ewm.jpeg" alt="" /></div>

<div class="back"><a href=""> > </a></div>

</div>


</div>

</div>

<div class="address">

我的收获地址

<a href=""> > </a>

</div>

<div class="safe">

账户与安全

<a href=""> > </a>

</div>

<div class="shezhi">

地区设置

<a href=""> > </a>

</div>

<div class="secrt">

隐私

<a href=""> > </a>

</div>

<div class="view">

通知

<a href=""> > </a>

</div>


<div class="other">

关于平台

<a href=""> > </a>

</div>

<div class="footer">

退出当前账号

</div>




</body>

</html>

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

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

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

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

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

七上八下的爆米花
关注
  • 12
    点赞
  • 踩
  • 97
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
使用html编写一个（移动端）静态页面
qq_53566222的博客
07-14 5188
html代码 喜马拉雅移动端 css代码 图片就自行想办法 成品展示 中间是一个轮播图
html编写app页面,html5写一个简单的手机app的设置界面
weixin_29602351的博客
06-03 4223
Documenthtml{font-size:100px;}body{background: rgb(239,239,239);}body,a,h3,span{padding:0;margin:0;text-decoration: none;}.header{background: #26A69A ;height: 0.44rem;font-size:0.14rem;color: white;pa...
html5 app手机号码注册界面模板
05-18
html5 app手机号码注册界面模板html5 app手机号码注册界面模板
html5移动端pc端pc端,移动端和pc端公用样式及rem布局
weixin_29628635的博客
06-15 553
一：移动端准备工作1. 二：pc端准备工作1. 1. 2. 1. 三：base.css公共样式 pc端body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, s...
watch监听
最新发布
mingzinpzixiw的博客
05-13 415
watch('监听的数据'，数据发生改变触发的函数，{immediate:true(立即监听),deep:true（深度监听）})2.watchEffect不需要写监听的数据，当所依赖的数据发生变化时会自动监听。1.watchEffect会默认开启立即监听，而watch需要手动开启。watchEffect(数据发生改变触发的函数)默认直接开启立即监听。3.watch有新值和旧值，watchEffect没有。watch和watchEffect的区别。watch 监听数据的变化。
MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
weixin_34293911的博客
06-11 634
  概 述 JRedu 　　在上一篇博客中，我们学习了如何使用Hbuilder创建一个APP，同时如何使用MUI搭建属于自己的第一款APP，没有学习的同学可以戳链接学习： http://www.cnblogs.com/jerehedu/p/7832808.html   　　今天这篇博客，我们继续深入学习MUI框架，主要学习这几个方面：加载子页面、页面跳转并传值，底部选项卡的多种实现方式。 ...
html5编写一个手机app的首页
热门推荐
lanseguhui的博客
06-09 2万+
头部和底部固定不动，用fixed固定定位中间用overflow:scroll;&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width&am
基于Arduino 用Esp8266烧录Html文件，实现手机电脑访问内置网页控制设备开和关（三）！
weixin_44301884的博客
05-26 3872
*基于Arduino 用Esp8266烧录Html文件，实现手机电脑访问内置网页控制设备开和关！（三） 一、整体思路 把Esp8266作为服务器端，手机PC作为客户端，发出get请求，Esp8266以http协议数据来回复gpio的端口状态！从而实现了数据交互！ 主要应用智能家居，物联网这篇主要是对**(一)**和（二）的优化。新添加了OTA无线更新功能。 二、Html文件 这里以下图控制页面为例，如图及代码所示：这里以控制x1,m?x1=1为例子，Html文件源码见附件。html文件可以根据自己的需要修
用HTML+CSS写一个手机微信界面
m0_54066656的博客
03-31 4268
如何使用前端画出一个微信聊天界面？不定期更新ing。
HTML手机端页面模版
nebear的博客
07-21 5511
由于公司开始转向手机端需求，所以决定开始学习原生JS，AJAX，手机页面开发
html+css模仿微信主页面
weixin_62177449的博客
08-29 4760
html+css模仿微信页面
HTML5手机用户登录注册页面模板.zip
05-25
HTML5手机用户登录注册页面模板基于jquery.1.7.2.min.js制作，点击登录或注册，弹出登录或注册页面窗口，自适应屏幕分辨率大小，兼容PC端和手机移动端。
HTML5简单手机注册页面模板.zip
05-24
HTML5简单手机注册页面模板，自适应不同分辨率，兼容PC端和手机移动端。
HTML5推荐：30款手机页面模版源码
06-24
HTML5 资源源码.30款手机页面模版源码，美观大气，酷炫特效，布局排版，遵循W3C规范。
手机页面模板
07-22
手机页面模板
完整的漂亮手机模板UI库html5
06-25
完整的漂亮手机模板UI库html5，导航控件，列表控件，表单控件，搜索组件，面板，组件库，对话框，按钮等等；是一个完整的组件库。
Html 5 App 界面模板（HTML5模板）
12-26
HTML5 App界面模板是基于这些新特性的设计，旨在为移动应用或现代Web应用提供流畅、互动且响应式的用户界面。 1. **离线存储（Offline Storage）** HTML5引入了离线存储机制，如Application Cache，允许开发者将...
HTML5+MUI实现手机app扫码功能
03-31
HTML5作为现代网页开发的标准，提供了许多增强用户体验的新特性，而MUI则是一个轻量级的前端框架，专注于移动设备的用户界面设计。结合这两者，开发者可以构建出具有原生app体验的Web应用，并实现诸如扫码这样的高级...
一款简约的手机APP自适应下载界面HTML源码源码资源下载整理.zip
08-20
这款资源包包含了一款简约设计的手机APP自适应下载界面的HTML源码，适用于开发者或设计师在构建移动应用网页时快速搭建用户友好的下载页面。HTML源码是网站前端开发的基础，它定义了网页的结构和内容。在这个压缩包...
帮我写一个简易vue对话界面，能够适配手机的
09-20
好的，以下是一个简易的 Vue 对话界面示例代码，已经适配了手机端： ``` <template> <div class="container"> <div class="chat-box"> <div class="chat-message" v-for="(message, index) in messages" :key="index"> <div v-if="message.sender === 'user'" class="user-message">{{ message.text }}</div> <div v-else class="bot-message">{{ message.text }}</div> </div> </div> <div class="input-box"> <input v-model="inputText" @keyup.enter="sendMessage" type="text" placeholder="请输入消息..."> <button @click="sendMessage">发送</button> </div> </div> </template> <script> export default { name: 'ChatBox', data() { return { messages: [], inputText: '' } }, methods: { sendMessage() { if (this.inputText.trim() !== '') { this.messages.push({ sender: 'user', text: this.inputText }); this.inputText = ''; // 在此处添加与 AI 的对话逻辑 } } } } </script> <style scoped> .container { display: flex; flex-direction: column; height: 100%; width: 100%; } .chat-box { flex: 1; overflow-y: scroll; padding: 10px; } .chat-message { margin-bottom: 10px; } .user-message { background-color: #EEE; padding: 5px; border-radius: 10px; max-width: 70%; align-self: flex-end; } .bot-message { background-color: #DDD; padding: 5px; border-radius: 10px; max-width: 70%; align-self: flex-start; } .input-box { display: flex; height: 50px; width: 100%; padding: 10px; box-sizing: border-box; } input { flex: 1; border: none; outline: none; padding: 10px; border-radius: 5px; margin-right: 10px; } button { border: none; outline: none; background-color: #07C; color: #FFF; padding: 10px 20px; border-radius: 5px; cursor: pointer; } </style> ``` 该示例代码包含了一个聊天框和一个输入框，用户可以输入消息并发送，发送的消息将显示在聊天框中。你需要在 `sendMessage` 方法中添加与 AI 的对话逻辑，以便实现对话交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值