听风逝夜 h
效果图
image.PNG
项目结构
image.PNG
html 代码
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <link rel="stylesheet" type="text/CSS" href="css/style.css" />
- <title>
- </title>
- </head>
- <body>
- <div class="box">
- <div class="item left">
- <img class="header-img" src="img/img.jpeg" />
- <span class="message">
- 爱你呦
- </span>
- </div>
- <div class="chart-timer">
- 2019-5-17
- </div>
- <div class="item right">
- <img class="header-img" src="img/img.jpeg" />
- <span class="message">
- 哈哈哈哈哈
- </span>
- </div>
- <div class="item left">
- <img class="header-img" src="img/img.jpeg" />
- <span class="message">
- 干嘛呢
- </span>
- </div>
- <div class="item right">
- <img class="header-img" src="img/img.jpeg" />
- <span class="message">
- 吃饭饭
- </span>
- </div>
- </div>
- <div class="input-box">
- <input type="text" />
- <button>
- 确定
- </button>
- </div>
- </body>
- </HTML>
- CSS
- /*
- 聊天 item 采用 flex 布局
- */
- .item {
- display: flex;
- margin-bottom: 10px;
- }
- .left {
- flex-direction: row;
- }
- .right {
- flex-direction: row-reverse;
- }
- .right .message {
- margin-right: 10px;
- }
- .left .message{
- margin-left: 10px;
- }
- .header-img {
- width: 42px;
- height: 42px;
- border-radius: 100px;
- }
- .message {
- border-radius: 10px;
- display: flex;
- background: #efefef;
- min-height: 25px;
- padding: 9px 10px;
- align-items: center;
- color: #222121;
- }
- .input-box {
- position: absolute;
- bottom: 0px;
- left: 0;
- right: 0;
- display: flex;
- padding: 4px 6px;
- box-sizing: border-box;
- }
- .input-box input {
- flex: 1;
- border-radius: 10px;
- border: 1px #cecece solid;
- padding: 3px 4px;
- outline: none;
- }
- .input-box button {
- width: 80px;
- background: #2196F4;
- border-radius: 21px;
- border: 1px #fffa solid;
- color: #ffffff;
- margin: 0px 6px;
- outline: none;
- }
- button:active{}
- .chart-timer{
- text-align: center;
- color: #616161;
- font-size: 13px;
- }
来源: http://www.jianshu.com/p/5dce9a4e4c91