前端小项目——模拟微信界面对话框

_{最近看网课做了个小项目，用到了前端很多知识点}

用到的知识点：

HTML知识点：

div大盒子，id为contentALL：包含所有的内容
div头部小盒子，id为header：包含整个对话框的头部信息
div中间对话内容，id为content：初始化是空的，动态载入
div尾部小盒子，id为footer：内容是头像图片，输入框，发送按钮
对于内容区是ul包含的li标签，这点很巧妙。
以下是完整代码：

CSS知识点：

从上之下逐一进行样式设计，用到了浮动，position中子绝父相的规则，overflow处理超出边框部分，border-radius=50%将图片变成圆形等知识点，较为巧妙。
对于内容区的样式代码如下：

Js知识点：

首先考虑头像切换
然后考虑将对话框内容输出到屏幕上，根据不同人发言的内容发布在不同的模块
动态向页面中加载li标签
以下是切换头像代码：

var img=document.getElementById('icon');var arrImg=["img/在笑的猫咪.jpg","img/图.png"];var tag=0;img.onclick=function(){if(tag===0){tag=1;img.src=arrImg[tag];}else{tag=0;img.src=arrImg[tag];}}

以下是动态加载li标签内容：

前端小项目——模拟微信界面对话框相关推荐

C语言实现小游戏——模拟微信小游戏《最强飞刀手》
C语言实现小游戏--模拟微信小游戏<最强飞刀手> 曾经玩过的微信小游戏,想着用C语言实现,只可惜,下图是我的上限. 这个下游戏界面简陋,把旋转的西瓜做成了平的接盘:实现的功能有:接盘的移动 ...
前端小项目（一）| 电影院座位预定（html，css，js）
前端小项目(一)| 电影院座位预定前言开始好好学习前端啦.学紫色爱心记录一波!! 初步学了html,css,js,在github上找了几个前端小项目模仿着练练手.第一个就是电影院座位预定页面,主要 ...
白天、暗夜双重模式+自作潜水俱乐部前端小项目+学习经验总结(一)
嗨,这里是X,今天带来最近写的一个前端小项目,还挺不错的,所以就在这里分享一下
vue前端移动项目调用微信扫一扫的实现
vue前端移动项目调用微信扫一扫的实现 1安装插件 npm install weixin-jsapi --save 2在main.js中引入 // 在man.js中引入 import wx from ...
Android小例子--实现微信界面
大家都用过微信,相信都对那种页面在手指滑动间自由切换的效果十分惊奇吧,这篇博客就介绍如何用 ViewPager + Fragment 来实现自由切换页面.ViewPager 和 Fragment 的基 ...
618快到了送上自制前端小项目（html css js）
目录 ??.自定义播放器 ??.图片自动消失 .小轮播图 ??.旋转音乐盒前言:这些小项目全都是自创的. 如果需要应用,或则转发的话请与博主联系,感谢你们的理解, 1.自定义播放器在页面中放置2 ...
web前端小项目个人实例_Web前端：小程序界面与逻辑项目实训
大家好,我来了!本期为大家带来的Web前端学习知识是"Web前端:小程序界面与逻辑项目实训",喜欢Web前端的小伙伴,一起看看吧! 主要内容数据绑定渲染界面层数据渲染事件处 ...
微信小程序模拟支付界面
有些时候遇到一些类似于银行卡输入密码或者微信支付输入密码的类似需求刚刚开始的时候我第一反应就是放几个input 但是呢每次输入的时候都会重新调用软键盘用户体验极其不好下面先看下类似的原 ...
Android小项目之--前台界面与用户交互的对接进度条与拖动条（附源码）
都知道水果公司(苹果)是己尊重用户体验著称的公司,其设计的产品人性化十足,不得不令后来者赞叹,竞相模仿.iphone的成功就是其典型的案例,做为其移动系统的死对头 Google 想要在市场上分得一杯羹 ...

前端小项目——模拟微信界面对话框

用到的知识点：

HTML知识点：

CSS知识点：

Js知识点：

前端小项目——模拟微信界面对话框相关推荐

最新文章

热门文章