adobe dreamweaver
新建html文档。
准备好需要用到的图标。
书写hmtl代码。
自酌一杯酒
白兰地
威士忌
荷兰金酒
朗姆酒
特其拉酒
鸡尾酒
虎骨酒
琴酒
葡萄酒
蓝莓酒
樱花酒
书写css代码。.btn-default-styles { outline: none; resize: none; border: none; display: inline-block; padding: 5px 10px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; background: #bbb; color: #fff; border-radius: 4px; }.btn-default-styles:focus { outline: none; }.btn-default-styles:hover { background: #c5c5c5; animation: anniu 1s infinite; }.btn-default-styles:active { box-shadow: 0 2px 3px rgba(0, 0, 0, .2) inset; }.chatContainer { position: fixed; bottom: 20px; right: 20px; }.chatBtn { width: 50px; height: 50px; background: #01bef0; color: #fff; line-height: 50px; text-align: center; border-radius: 50%; box-shadow: 2px 2px 2px #d4d4d4; cursor: pointer; position: absolute; bottom: 0; right: 0; overflow: hidden; }.chatBtn:hover { background: #01b3df; box-shadow: none; }.chatBtn>i { font-size: 25px; }.chatBox { width: 370px; min-width: 320px; height: 570px; border-radius: 10px; background: #f5ecff; position: absolute; bottom: 0; right: 70px; overflow: hidden; border: solid 1px #d5d5d5; box-shadow: 1px 1px 2px #c0c0c0; z-index: 1005; }.chatBox-head { width: 100%; height: 75px; background: #01aee0; position: absolute; top: 0; left: 0; }.chatBox-head-one { width: 100%; height: 75px; line-height: 75px; color: #fff; font-size: 20px; text-align: center; position: absolute; top: 0; left: 0; }.chatBox-head-two { width: 100%; height: 75px; color: #fff; padding: 10px 10px; display: none; position: absolute; top: 0; left: 0; }.chat-return { float: left; width: 55px; height: 55px; line-height: 55px; border-radius: 10px; cursor: pointer; text-align: center; }.chat-return:hover { background: #0188b7; }.chat-close { float: right; width: 55px; height: 55px; line-height: 55px; border-radius: 10px; cursor: pointer; text-align: center; }.chat-close:hover { background: #0188b7; }.chat-people { float: left; }.chat-people>div { height: 55px; display: inline-block; vertical-align: middle; line-height: 55px; margin-left: 5px; }.chat-people>div:nth-of-type(1) { width: 50px; height: 50px; border-radius: 50%; background: #eee; overflow: hidden; }.chat-people>div:nth-of-type(1)>img { width: 50px; height: 50px; }.chat-people>div:nth-of-type(2) { width: 165px; text-align: left; height: 55px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }.chatBox-info { width: 100%; height: 495px; background: #fff; text-align: left; position: absolute; top: 75px; left: 0; }.chatBox-list { width: 100%; height: 495px; overflow-y: scroll; }.chat-list-people:hover { cursor: pointer; background: #f8f8f8; }.chat-list-people>div { height: 55px; display: inline-block; vertical-align: middle; margin-left: 10px; }.chat-list-people>div:nth-of-type(1) { width: 40px; height: 40px; border-radius: 50%; background: #eee; overflow: hidden; }.chat-list-people>div:nth-of-type(1)>img { width: 40px; height: 40px; }.chat-name { width: 230px; }
书写并添加js代码。
代码整体结构。
查看效果。