仿tim移动端个人页面

<div class="myBody"><div class="usertop"><div class="userimg"><img src="../../../assets/img/1.jpg" alt=""></div><div class="username"><h2>测试用名字</h2><h3>世界真美好,没必要如此暴躁</h3></div></div><div class="myContentBody"><div class="content"><div class="icon"><img src="../../../assets/img/user.png" alt="" srcset=""></div><div class="name">绑定个人信息</div><div class="detail">将用户信息与寝室信息绑定</div></div><div class="content"><div class="icon"><img src="../../../assets/img/watele.png" alt="" srcset=""></div><div class="name">水电费</div><div class="detail">缴纳宿舍每月水电费等信息</div></div><div class="content"><div class="icon"><img src="../../../assets/img/fixed.png" alt=""></div><div class="name">保修</div><div class="detail">宿舍设备的保修</div></div><div class="content"><div class="icon"><img src="../../../assets/img/water.png" alt=""></div><div class="name">饮用水</div><div class="detail">在宿管阿姨那购入饮用水</div></div><div class="content"><div class="icon"><img src="../../../assets/img/dorm.png" alt=""></div><div class="name">宿舍</div><div class="detail">查看宿舍三维地图</div></div><div class="content"><div class="icon"><img src="../../../assets/img/schoolmap.png" alt=""></div><div class="name">地图</div><div class="detail">查询校内地图</div></div><div class="content"><div class="icon"><img src="../../../assets/img/commet.png" alt=""></div><div class="name">评论</div><div class="detail">查看评论内容</div></div><div class="content"><div class="icon"><img src="../../../assets/img/exit.png" alt=""></div><div class="name">退出</div><div class="detail">退出当前程序</div></div></div><!-- 撑起一节以显示所有内容 --><div class="myfooter"></div></div>

.myBody{background-color: rgba(236, 236, 236, 0.575);
}.usertop{display: flex;
}.userimg{margin-top: .33rem;
}.userimg img{width: 2.6rem;height: 2.6rem;margin-left: .33rem;
}.username{margin-top: .33rem;margin-left: .33rem;
}.username h2{font-size: .55rem;margin-top: .48rem;font-family: '楷体';
}.username h3{color: darkgrey;font-size: .26rem;
}.myContentBody{overflow: hidden;
}.content{float: left;background-color: white;width: 3.4rem;margin: .5rem;padding: .3rem;height: 2rem;
}.content .icon img{width: .66rem;
}.myfooter{margin-top: 1rem;height: .44rem;
}

仿tim移动端个人页面相关推荐

Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发（应用中的几个页面简单实现）
Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现) 目录 Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现) ...
Flex布局 - 仿携程网移动端首页案列练习
目录一.搭建相关文件结构 1.1 文件结构 1.2 引入初始化样式 1.3 常用初始化样式二.搜索模块 2.1 搜索模块 - 外观布局 2.2 搜索模块 - 个人中心 2.3 搜索模块 - 搜索框 ...
蚪侠镜像站群-V25版[泛域名+泛目录+泛内页]-1对1镜像-泛镜像-[代码+汉字]干扰-字体繁简切换-蜘蛛欺骗-主动推送-全局锚文本锁定-秒仿[PC+移动]端站点
站群逆天特点: 1.无限克隆目标站点!批量目标站镜像克隆,伪原创批量替换,秒仿任意站点! 2.多类词优化-对应本类网站标题-对应本类关键词-对应本类描述-对应本类js广 ...
WPF系列教程——(一)仿TIM QQ界面 - 简书
WPF系列教程--(一)仿TIM QQ界面 - 简书原文: WPF系列教程--(一)仿TIM QQ界面 - 简书 TIM QQ 我们先来看一下TIM QQ长什么样,整体可以将界面分为三个部分 TIM ...
【通用CSS模板】移动端H5页面统一样式.css
/*移动端H5页面统一样式----------------------------------------*/ @charset "UTF-8"; body, html, li, ...
移动端网站页面优化的关键点
随着智能手机的普及以及平板等移动端设备的应用越来越广泛,面对更多消费体的移动端设备也有更多的企业正在加快移动网站的建设,从而为企业带来更多的流量和用户.但对于很多移动端网站,人们并没有进行很好的优化, ...
移动端H5页面高清多屏适配方案
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
教你如何用 lib-flexible 实现移动端H5页面适配
前话好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
[html] 如何禁止web端的页面缩放？
[html] 如何禁止web端的页面缩放? <meta name="viewport" content="width=device-width, initial-s ...

仿tim移动端个人页面

仿tim移动端个人页面相关推荐

最新文章

热门文章