废话不多说，直接上代码。
注意：需要自己建个img目录存放图片。
<html>
<head>
<title>纯css实现的漂亮圆角按钮_网页代码站(www.6a8a.com)</title>
<style type="text/css">
body,div,ul,li,img{margin: 0;padding: 0;border: 0;}
body,button{
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
}
li{
list-style-type: none;
}
.left{
width: 350px;
}
.left img{
float: left;
width: 100px;
height: 100px;
border-radius: 200px;
}
.left p{
height: 100px;
line-height: 100px;
text-align: center;
background-color: aliceblue;
}
.right{
width: 350px;
}
.right img{
float: right;
width: 100px;
height: 100px;
border-radius: 200px;
}
.right p{
height: 100px;
line-height: 100px;
text-align: center;
background-color: aliceblue;
}
#btn{
border: none;
height: 40px;
width: 80px;
background-color:rgb(190, 132, 152);
border-radius: 20px;
color: white;
font-style: normal;
}
</style>
</head>
<body>
<div>
<ul class="ul">
<li class="left">
<img src="img/left.jpg"/>
<p>模仿聊天记录框</p>
</li>
<li class="right">
<img src="img/right.jpg"/>
<p>点击输入框左边头像更换头像</p>
</li>
<li>
</li>
</ul>
</div>
<div class="nav">
<img id="img" src="img/left.jpg" style="width: 100px;height:100px;border-radius: 200px;float: left;">
<input id="txt" style="line-height: 100px;border: none;"/>
<button id="btn">发送</button>
</div>
<script>
var img = document.getElementById("img")
var flag = true
img.onclick = function(){
if(flag){
img.src="img/right.jpg"
flag = false
}else{
img.src="img/left.jpg"
flag = true
}
}
var txt = document.getElementById("txt")
var btn = document.getElementById("btn")
var ul = document.querySelector(".ul")
btn.onclick = function(){debugger
var aa = txt.value
if(aa == ''){
alert("内容不能为空！")
}else{
if(flag){
console.log(aa)
ul.innerHTML += `<li class='left'> <img src="img/left.jpg"/><p>`+aa+`</p></li>`
}else{
ul.innerHTML += `<li class='right'> <img src="img/right.jpg"/><p>`+aa+`</p></li>`
}
}
}
</script>
</body>
</html>
效果如下:
1.png
