Just touching the front end. Just walked through the document, began to try to write an interface.
But there was a problem:
The current message display is fine, but when I add more messages, it seems to be due to Flex. The message pushes the other elements apart.
HTML code:
<! 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> <link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_1598229_67ayc8zpury.css"></head><body> <! -- external container --> <div id="wx-wrapper"> <! -- header --> <div class="title"> <div class="title-retrun"> <a href="#"> <i class="iconfont icon-fanhui"></i> </a> </div> <div class="title-name"<div > <div class="title-memu"> <a href="#"> <i class="iconfont icon-shenglvehao"></i> </a> </div> </div> <div class="main"> <ul class="ms-list"> <li class="itme"> <div class="tx"> <img src="./img/touxiang.jpg" alt=""> </div> <div class="ms"Have you eaten today? </div> </li> <li class="itme"> <div class="tx"> <img src="./img/touxiang.jpg" alt=""> </div> <div class="ms"Have you eaten today? </div> </li> <li class="itme"> <div class="tx"> <img src="./img/touxiang.jpg" alt=""> </div> <div class="ms"Have you eaten today? </div> </li> <li class="itme"> <div class="tx"> <img src="./img/touxiang.jpg" alt=""> </div> <div class="ms"Have you eaten today? </div> </li> <li class="itme"> <div class="tx"> <img src="./img/touxiang.jpg" alt=""> </div> <div class="ms"Have you eaten today? </div> </li> <li class="itme"> <div class="tx"> <img src="./img/touxiang.jpg" alt=""> </div> <div class="ms"Have you eaten today? </div> </li> <li class="itme"> <div class="tx"> <img src="./img/touxiang.jpg" alt=""> </div> <div class="ms"Have you eaten today? </div> </li> </ul> </div> <div class="send"> <div class="yuyin"> <a href="#"> <i class="iconfont icon-yuyin"></i> </a> </div> <div class="input"> <input type="text"> </div> <div class="add"> <div class="add-look"> <a href="#"> <i class="iconfont icon-xiaolian"></i> </a> </div> <div class="add-element"> <a href="#"> <i class="iconfont icon-add"></i> </a> </div> </div> </div> </div></body></html>Copy the codeLess code
@design-width:750; @ the title - color: RGB (24,24,24); @ the title - BGC: RGB (237237237); @ the main - BGC: RGB (237237237); @send-color:rgb(48, 48, 48); @ the send - BGC: RGB (246246246); @ the send - bodercolor: RGB (217217217); *{ padding: 0; margin: 0; }html{ font-size: 100vw/750; }a{ text-decoration: none; }#wx-wrapper{ min-height: 100vh; max-height: 100vh; display: flex; flex-direction: column; .title{ padding: 0 32rem; flex-basis: 100rem; background-color:@title-bgc; display: flex; justify-content: space-between; align-items: center; color: @title-color; font-weight: 900; font-size: 33rem; i{ font-size: 32rem; font-weight: 900; color: @title-color; } } .main{ flex: 1; background:@main-bgc url(.. /img/main-bg.jpg)center/cover no-repeat; .ms-list{ display: flex; flex-direction: column; overflow: auto; .itme{ display: flex; .tx{ margin-top: 30rem; margin-left: 25rem; border-radius: 15rem; overflow: hidden; width: 12%; img{ width: 100%; } } .ms{ margin-top: 30rem; margin-left: 25rem; width: 60%; padding: 8rem 8rem; font-size: 30rem; background-color: rgb(93, 202, 78); border-radius: 15rem; } } } } .send{ flex-basis: 110rem; background-color: @send-bgc; border-top: 1rem solid @send-bodercolor; display: flex; justify-content:space-around; align-items: center; i{ font-size: 58rem; color: @send-color; } .yuyin{ margin: 0 22rem; } .input{ flex: 1; input[type="text"]{ box-sizing: border-box; Box-shadow: 0 0 5REM rgba(0,0,0,.2); width: 100%; height: 80rem; border: none; outline: none; font-size: 30rem; padding-left:20rem ; } } .add{ margin: 0 22rem; display: flex; .add-look{ margin-right: 17rem; }}}}Copy the code