zoukankan      html  css  js  c++  java
  • html/css实现聊天布局

    效果图

    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 {
    	 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 {
    	 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;
    }
    
  • 相关阅读:
    利用kettle中的JS来完成ETL数据校验
    spring cloud学习地址
    centos7 卸载 gitlab
    为什么WEB-INF外的jsp无法根据cookie享受国际化
    改变maven父子项目视图为树状
    maven profiles、filters、resources学习笔记 及 常用 plugin demo
    Tomcat 签名认证配置简例
    CentOS 开机启动
    Tomcat 关闭时报错
    比较全的log4j示例
  • 原文地址:https://www.cnblogs.com/HouXinLin/p/10884121.html
Copyright © 2011-2022 走看看