<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>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? ul{
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? img{
? ? ? ? ? ? vertical-align: top;
? ? ? ? }
? ? ? ? .wrap{
? ? ? ? ? ? width: 1000px;
? ? ? ? ? ? height: 800px;
? ? ? ? ? ? background: url(img/bg.jpg) no-repeat;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? margin-top: -400px;
? ? ? ? ? ? margin-left: -500px;
? ? ? ? }
? ? ? ? .iphone{
? ? ? ? ? ? width: 356px;
? ? ? ? ? ? height: 679px;
? ? ? ? ? ? background: url(img/iphone.png) no-repeat;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? margin-left: -178px;
? ? ? ? ? ? margin-top: -338.5px;
? ? ? ? }
? ? ? ? .list{
? ? ? ? ? ? width: 318px;
? ? ? ? ? ? height: 498px;
? ? ? ? ? ? margin: 47px 0 0 19px;
? ? ? ? ? ? padding: 20px;
? ? ? ? ? ? overflow: auto;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? }
? ? ? ? .list li::after{
? ? ? ? ? ? content: '';
? ? ? ? ? ? display: block;
? ? ? ? ? ? clear: both;
? ? ? ? }
? ? ? ? .list img{
? ? ? ? ? ? width: 35px;
? ? ? ? ? ? height: 40px;
? ? ? ? }
? ? ? ? .list p{
? ? ? ? ? ? width: 230px;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? padding: 10px;
? ? ? ? ? ? border-radius: 10px;
? ? ? ? }
? ? ? ? .nav{
? ? ? ? ? ? height: 60px;
? ? ? ? ? ? background: #e5e5e5;
? ? ? ? ? ? width: 318px;
? ? ? ? ? ? margin-left:19px;
? ? ? ? }
? ? ? ? .nav::after{
? ? ? ? ? ? content: '';
? ? ? ? ? ? display: block;
? ? ? ? ? ? clear: both;
? ? ? ? }
? ? ? ? .nav img{
? ? ? ? ? ? padding: 10px 0 0 16px;
? ? ? ? ? ? float: left;
? ? ? ? }
? ? ? ? .nav input{
? ? ? ? ? ? float: left;
? ? ? ? ? ? width: 190px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? border: none;
? ? ? ? ? ? background: #fff;
? ? ? ? ? ? border-radius: 10px;
? ? ? ? ? ? margin: 11px 0 0 13px;
? ? ? ? }
? ? ? ? .nav button{
? ? ? ? ? ? width: 64px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? font: 16px / 40px "微軟雅黑";
? ? ? ? ? ? color: #e15671;
? ? ? ? ? ? margin-top: 11px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? border: none;
? ? ? ? ? ? background: none;
? ? ? ? }
? ? ? ? .right,.left{
? ? ? ? ? ? margin-bottom: 20px;
? ? ? ? }
? ? ? ? .right img{
? ? ? ? ? ? float: right;
? ? ? ? }
? ? ? ? .right p{
? ? ? ? ? ? float: right;
? ? ? ? ? ? background: #bab3ce;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? margin-right: 13px;
? ? ? ? }
? ? ? ? .left img{
? ? ? ? ? ? float: left;
? ? ? ? }
? ? ? ? .left p{
? ? ? ? ? ? float: left;
? ? ? ? ? ? background: #e5e5e5;
? ? ? ? ? ? margin-left: 13px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="wrap">
? ? ? ? <div class="iphone">
? ? ? ? ? ? <ul class="list">
? ? ? ? ? ? ? ? <li class="right">
? ? ? ? ? ? ? ? ? ? <img src="img/monster2.png" alt="">
? ? ? ? ? ? ? ? ? ? <p>說：哈？好呀，多少錢我都愿意～～呵呵</p>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li class="left">
? ? ? ? ? ? ? ? ? ? <img src="img/monster.png" alt="">
? ? ? ? ? ? ? ? ? ? <p>說：這個簡單，我們去妙味遠程課堂學就行啦～～～</p>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <!-- <li class="right">
? ? ? ? ? ? ? ? ? ? <img src="img/monster2.png" alt="">
? ? ? ? ? ? ? ? ? ? <p>說：好呀～～～你先幫我學會JS再說～～</p>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li class="left">
? ? ? ? ? ? ? ? ? ? <img src="img/monster.png" alt="">
? ? ? ? ? ? ? ? ? ? <p>說：咦？土豪？？</p>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li class="right">
? ? ? ? ? ? ? ? ? ? <img src="img/monster2.png" alt="">
? ? ? ? ? ? ? ? ? ? <p>說：大家好，我是土豪～</p>
? ? ? ? ? ? ? ? </li> -->
? ? ? ? ? ? </ul>
? ? ? ? ? ? <div class="nav">
? ? ? ? ? ? ? ? <img id="pic" src="img/monster2.png" alt="">
? ? ? ? ? ? ? ? <input id="txt" type="text">
? ? ? ? ? ? ? ? <button id="btn">發(fā)送</button>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? ? <script>
? ? ? ? /*
? ? ? ? 切換發(fā)送的頭像
? ? ? ? 1-獲取頭像的圖片的元素
? ? ? ? 2-綁定點擊事件
? ? ? ? 3-切換圖片的src（注意需要判斷，應該是哪個圖片）
? ? ? ? */
? ? ? ? var pic = document.getElementById('pic');
? ? ? ? var onOff = true;
? ? ? ? pic.onclick = function(){
? ? ? ? ? ? if(onOff){
? ? ? ? ? ? ? ? pic.src = 'img/monster.png';
? ? ? ? ? ? ? ? onOff = false;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? pic.src = 'img/monster2.png';
? ? ? ? ? ? ? ? onOff = true;
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? /*
? ? ? ? ? ? 添加內容進ul
? ? ? ? ? ? 1-獲取元素（按鈕、頭像、文字、list）
? ? ? ? ? ? 2-給按鈕綁定點擊時間
? ? ? ? ? ? 3-獲取頭像地址，以及文字內容（如果內容為空不允許發(fā)送）
? ? ? ? ? ? 4-扔到list里面去
? ? ? ? */
? ? ? ? var btn = document.getElementById('btn');
? ? ? ? var txt = document.getElementById('txt');
? ? ? ? var list = document.querySelector('.list');
? ? ? ? btn.onclick = function(){
? ? ? ? ? ? var value = txt.value;
? ? ? ? ? ? if(value == ''){
? ? ? ? ? ? ? ? alert('內容為空，不允許發(fā)送');
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? if(onOff){
? ? ? ? ? ? ? ? ? ? list.innerHTML = '<li class="left"><img src="img/monster2.png" alt=""><p>'+value+'</p></li>' + list.innerHTML;
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? list.innerHTML = '<li class="right"><img src="img/monster.png" alt=""><p>'+value+'</p></li>' + list.innerHTML;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? };
? ? </script>
</body>
