上周,我们进行了认知实习,任务是模仿微信页面开发。接下来我会分成四段一一展现给大家,虽然完成的不是很准确精致大概框架还是有的,在记录自己成长进步的同时,也可能会给其他小伙伴一些建议。接下来,是微信的主页面。
上代码
首先是html部分
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>wechat - Home</title><!-- 引入外部样式表 --><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/container.css"><link rel="stylesheet" href="css/phone-title.css"><link rel="stylesheet" href="css/header.css"><link rel="stylesheet" href="css/wrap-chat.css"><link rel="stylesheet" href="css/menu.css"><link rel="stylesheet" href="css/header-menu.css"><script src="jquery/jquery.js"></script><script src="js/menu-bottom.js"></script><script src="js/menu-header-popup.js"></script></head><body><div id="container">2<!-- 信号,时间,电池 --><div id="phone-title"><!-- 信号 --><div id="phone-title-left"><div class="signal"></div><div class="signal"></div><div class="signal"></div><div class="signal"></div><div class="no-signal"></div><div>中国移动 4G</div></div><!-- 时间 --><div id="phone-title-center">13:14</div><!-- 电池 --><div id="phone-title-right"><div>88%</div><!-- 电池壳 --><div><!-- 电量 --><div></div></div><!-- 正极 --><div></div></div></div><!-- 返回,信息条数,+ --><div id="header" class="header-font"><!-- 返回 --><div id="header-control"><div></div><div>返回</div></div><!-- 信息条数 --><div id="msg">微信(10)</div><!-- 加号 --><div id="function"><!-- 符号 --><div id="add"></div><!-- 弹出菜单 --><div id="popup-menu"><!-- 向上箭头 --><div id="small-triangle-up"></div><!-- 菜单内容 --><div class="popup-menu-content"><!-- 前面是图标,后面是文字 --><div class="popup-menu-content-icon"><img src="img/icon/control/发起群聊.svg"></div><div>发起群聊</div></div><div class="popup-menu-content"><!-- 前面是图标,后面是文字 --><div class="popup-menu-content-icon"><img src="img/icon/control/添加朋友.svg"></div><div>添加朋友</div></div><div class="popup-menu-content"><!-- 前面是图标,后面是文字 --><div class="popup-menu-content-icon"><img src="img/icon/control/扫一扫.svg"></div><div>扫一扫</div></div><div class="popup-menu-content"><!-- 前面是图标,后面是文字 --><div class="popup-menu-content-icon"><img src="img/icon/control/收付款.svg"></div><div>收付款</div></div></div></div></div><!-- 微信主页面 --><div id="wrap-chat"><!-- 搜索框 --><div id="search"><input></div><!-- 对话列表容器 --><div id="lists"><!-- 每条消息容器 --><div class="content"><!-- 左侧头像 --><div class="content-left"><img src="img/photo/王者荣耀.jpg"></div><!-- 中间用户名和聊天消息 --><div class="content-center"><div class="username">王者农药</div><div class="text">常回家看看~</div></div><!-- 右侧时间 --><div class="content-right">8:52</div></div><div class="content"><div class="content-left"><img src="img/photo/三胖-01.jpg"><div class="new-msg">1</div></div><div class="content-center"><div class="username">金三胖</div><div class="text-radio">今天干啥了?</div></div><div class="content-right">9:14</div></div><div class="content"><div class="content-left"><img src="img/photo/女孩-01.jpeg"><div class="new-msg">1</div></div><div class="content-center"><div class="username">欣欣</div><div class="text-radio">[语音]</div></div><div class="content-right">9:02</div></div><div class="content"><div class="content-left"><img src="img/photo/奥巴马-01.jpg"></div><div class="content-center"><div class="username">奥巴马</div><div class="text">我们是最强的!</div></div><div class="content-right">9:50</div></div><div class="content"><div class="content-left"><img src="img/photo/汉堡.jpg"></div><div class="content-center"><div class="username">汉波隔</div><div class="text">下课了,你饿了么</div></div><div class="content-right">9:50</div></div><div class="content"><div class="content-left"><img src="img/photo/郭德纲.jpg"></div><div class="content-center"><div class="username">德云社</div><div class="text">快来听相声哟</div></div><div class="content-right">9:55</div></div><div class="content"><div class="content-left"><img src="img/photo/男孩-01.jpg"></div><div class="content-center"><div class="username">王浩</div><div class="text">有时间吗</div></div><div class="content-right">9:50</div></div><div class="content"><div class="content-left"><img src="img/photo/马化腾.png"></div><div class="content-center"><div class="username">马化腾</div><div class="text">我缺钱了,腾哥</div></div><div class="content-right">11:12</div></div><div class="content"><div class="content-left"><img src="img/photo/情侣-01.jpg"></div><div class="content-center"><div class="username">彤彤</div><div class="text">姐妹,我分手了,呜呜呜</div></div><div class="content-right">13:14</div></div><div class="content"><div class="content-left"><img src="img/photo/女孩-02.jpeg"></div><div class="content-center"><div class="username">王悦</div><div class="text">出来玩啊</div></div><div class="content-right">13:15</div></div><div class="content"><div class="content-left"><img src="img/photo/wuhong.jpg"></div><div class="content-center"><div class="username">数学老师</div><div class="text">这道题做的不对</div></div><div class="content-right">15:32</div></div><div class="content"><div class="content-left"><img src="img/photo/java.png"></div><div class="content-center"><div class="username">java</div><div class="text">学好java,走遍天下都不怕</div></div><div class="content-right">15:34</div></div><div class="content"><div class="content-left"><img src="img/photo/elm.jpg"><div class="new-msg">1</div></div><div class="content-center"><div class="username">创造</div><div class="text-radio">一起联手,创造奇迹</div></div><div class="content-right">18:09</div></div></div><!-- 底部菜单 --><div id="menu"><!-- 微信 --><div class="menu-div" data-icon-normal="img/icon/menu/聊天.svg" data-icon-press="img/icon/menu/聊天-press.svg" data-target="wrap-chat"><div><img class="icon" src="img/icon/menu/聊天-press.svg" style="transform: scale(1.2);"></div><div class="font-menu">微信</div></div><!-- 通讯录 --><div class="menu-div" data-icon-normal="img/icon/menu/通讯录.svg" data-icon-press="img/icon/menu/通讯录-press.svg" data-target="wrap-add-friend"><div><img class="icon" src="img/icon/menu/通讯录.svg"></div><div class="font-menu">通讯录</div></div><!-- 发现 --><div class="menu-div" data-icon-normal="img/icon/menu/发现.svg" data-icon-press="img/icon/menu/发现-press.svg" data-target="wrap-discovery"><div><img class="icon" src="img/icon/menu/发现.svg" style="transform: scale(.9);"></div><div class="font-menu">发现</div></div><!-- 我 --><div class="menu-div" data-icon-normal="img/icon/menu/me.svg" data-icon-press="img/icon/menu/me-press.svg" data-target="wrap-me"><div><img class="icon" src="img/icon/menu/me.svg" style="transform: scale(.9);"></div><div class="font-menu">我</div></div></div></div></body></html>
下面是css部分
common.css
html,body {height: 100%;width: 100%;font-family: 'Courier New', Courier, monospace;}/* * 表示所有的标签font-weight 文字粗细padding 填充margin 间距*/* {font-weight: 300;padding: 0;margin: 0;}/* 禁用滚动条 */::-webkit-scrollbar {display: none;}/* 测试边框 */.show-border {border: 1px red solid;}
container.css
#container {width: 100%;height: 100%;/* 弹性布局 */display: flex;/* 垂直显示 */flex-direction: column;/* 设置对齐,平均分配 */justify-content: space-between;/* 窗口定位 */position: fixed;}
header-menu.css
/* 弹出菜单容器 */#popup-menu {height: 190px;width: 140px;background: #424242;position: absolute;/* 保存上方显示 */z-index: 1;display: flex;flex-flow: column nowrap;justify-content: space-around;align-items: center;top: 75px;right: 4px;}/* 向上箭头 */#small-triangle-up {/* 相对定位 */position: relative;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #424242;top: -10px;right: -54px;}.popup-menu-content {width: 90%;border-bottom: 1px solid #616161;display: flex;padding: 6px 0 6px 0;}/* 最后的元素去掉下边框 */.popup-menu-content:last-child {border-bottom: none;}.popup-menu-content div {padding: 0 10px 0 10px;}.popup-menu-content-icon img {height: 22px;width: 22px;}
header.css
#header {background-image: linear-gradient(to bottom, #212121, #616161);min-height: 30px;text-align: center;display: flex;justify-content: space-between;}.header-font {color: white;line-height: 30px;font-weight: 700;}/* 返回 */#header-control {width: 33%;padding-left: 6px;display: flex;align-items: center;}#header-control div:nth-child(1) {height: 18px;width: 18px;background: url(../img/icon/material/返回.svg) no-repeat;/* 图片高宽自适应 */background-size: contain;}/* 信息条数 */#msg {width: 34%;line-height: 30px;font-weight: 700;}/* 加号 */#function {width: 33%;display: flex;justify-content: flex-end;align-items: center;padding-right: 8px;}/* 符号 */#add {height: 22px;width: 22px;background: url(../img/icon/material/加号.svg) no-repeat;background-size: contain;}
menu.css
在这里插/* 底部菜单容器 */#menu {height: 60px;display: flex;/* 内阴影 */box-shadow: 0 1px 1px gainsboro inset;/* 透明度 */opacity: .8;}/* 菜单选项 */.menu-div {width: 25%;display: flex;flex-flow: column nowrap;justify-content: flex-end;align-items: center;}.menu-div img {height: 23px;width: 23px;opacity: .7;}.font-menu {margin-top: 4px;font-weight: 200;font-size: 90%;}入代码片
phone-titles.css
#phone-title {display: flex;justify-content: space-between;height: 35px;background: #212121;color: white;font-size: 12px;}/* 信号 */#phone-title-left {width: 33%;display: flex;/* 垂直居中 */align-items: center;}/* 信号圆圈 */.signal,.no-signal {height: 7px;width: 7px;/* 设置圆角,圆形 */border-radius: 50%;border: 1px white solid;background: white;margin: 1px;}/* 无信号 */.no-signal {background: #212121;}/* 顶部时间 */#phone-title-center {width: 34%;display: flex;/* 水平居中 */justify-content: center;align-items: center;}/* 电池 */#phone-title-right {width: 33%;display: flex;/* 居右 */justify-content: flex-end;align-items: center;}/* 电池壳 */#phone-title-right div:nth-child(2) {border: 1px white solid;height: 11px;width: 30px;margin-left: 4px;}/* 电量 */#phone-title-right div:nth-child(2) div {height: 11px;width: 23px;background: #76ff03;}/* 正极 */#phone-title-right div:nth-child(3) {background: white;height: 7px;width: 2px;margin-right: 6px;}
wrap-chat.css
#wrap-chat {height: 100%;/* 占用剩余布局 */flex-grow: 1;/* 裁剪剩余部分,滚动显示 */overflow-y: scroll;background: whitesmoke;}/* 搜索框容器 */#search {height: 40px;display: flex;justify-content: space-around;align-items: center;border-bottom: 1px solid gainsboro;box-shadow: 0 0 2px ghostwhite;}/* 搜索框 */#search input {height: 26px;width: 99%;border: 1px solid gainsboro;box-shadow: 0 0 10px gainsboro inset;background: url(../img/icon/control/搜索.svg) no-repeat;background-size: 16px;background-position: center;}/* 获取焦点取消背景 */#search input:focus {background: none;}/* 对话列表容器 */#lists {display: flex;flex-direction: column;overflow-y: scroll;width: 100%;margin: 0 auto;}/* 每条消息容器 */.content {height: 64px;background: white;border-bottom: 1px gainsboro solid;padding: 0 4px 0 4px;display: flex;justify-content: space-between;align-items: center;}/* 左侧头像 */.content-left {height: 52px;width: 52px;}.content-left img {height: 52px;width: 52px;border-radius: 7px;}/* 中间用户名和聊天消息 */.content-center {height: 52px;flex-grow: 1;padding-left: 30px;display: flex;flex-direction: column;justify-content: space-around;/* 强制不换行 */white-space: nowrap;/* 超出隐藏 */overflow: hidden;}.username {width: 100%;height: 24px;font-size: 1em;color: #000;font-weight: 550;}.text,.text-radio {width: 100%;height: 20px;font-size: 14px;color: #9e9e9e;}.text-radio {color: #bf360c;}.content-right {height: 52px;width: 60px;font-size: 10px;text-align: right;color: #9e9e9e;}/* 新消息 */.new-msg {height: 14px;width: 14px;border-radius: 50%;background: red;font-weight: 600;font-size: 10px;color: white;line-height: 14px;text-align: center;position: relative;top: -55px;left: 43px;}
js部分太多了,盛不下,如果有童鞋想要的话私聊我叭,今天记录就到这里啦,下次就是微信的通讯录了~
如果觉得《html+css模仿微信主页面》对你有帮助,请点赞、收藏,并留下你的观点哦!