css布局实现简洁清爽的pc端聊天软件UI效果代码
代码语言：html
所属分类：布局界面
代码描述：css布局实现简洁清爽的pc端聊天软件UI效果代码，可以缩小到右下角、选择表情、发送快捷用语等。
代码标签： 简洁 清爽 的 pc 端 聊天 软件 UI 效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<style>
.im-app {
color: #333;
font: 14px/1 Hiragino Sans GB,Microsoft Yahei,Arial,sans-serif
}
.im-app input {
outline: none
}
.im-app img,.im-app input,.im-app li,.im-app p,.im-app ul {
margin: 0;
padding: 0
}
.im-app input {
font: 14px/1 Hiragino Sans GB,Microsoft Yahei,Arial,sans-serif
}
.im-app li,.im-app ul {
list-style: none;
display: block
}
.im-app img {
border: none
}
.im-app input {
font-size: 100%
}
.im-avatar {
-webkit-border-radius: 50%;
border-radius: 50%;
border: none
}
.im-feedback {
display: inline-block;
*display: inline;
*zoom: 1;
position: absolute;
font-size: 12px;
right: 24px
}
.im-feedback-icon {
cursor: pointer;
margin-top: 22px;
background-image: url(//repo.bfw.wiki/bfwrepo/icon/6094f82576076.png);
background-size: cover;
width: 24px;
height: 24px
}
.im-feedback-content {
display: none;
position: absolute;
left: -80px;
margin-top: 20px;
z-index: 9999;
width: 130px;
background: #fff;
-webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.05);
box-shadow: 0 10px 20px 0 rgba(0,0,0,.05);
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-border-image: -webkit-gradient(linear,left top,left bottom,from(#f2f2f2),to(#eaeaea)) 1 1;
-webkit-border-image: -webkit-linear-gradient(top,#f2f2f2,#eaeaea) 1 1;
-moz-border-image: -moz- oldlinear-gradient(top,#f2f2f2,#eaeaea) 1 1;
-moz-border-image: linear-gradient(180deg,#f2f2f2,#eaeaea) 1 1;
-o-border-image: -o-linear-gradient(top,#f2f2f2,#eaeaea) 1 1;
border-image: -webkit-gradient(linear,left top,left bottom,from(#f2f2f2),to(#eaeaea)) 1 1;
border-image: -moz- oldlinear-gradient(top,#f2f2f2,#eaeaea) 1 1;
border-image: linear-gradient(180deg,#f2f2f2,#eaeaea) 1 1
}
.im-feedback-content:before {
content: "";
display: block;
margin-left: -1px;
position: absolute;
top: -12px;
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #fff;
right: 12px
}
.im-feedback-texts {
list-style: none;
padding: 16px 8px!important;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.im-feedback-texts li {
cursor: pointer;
position: relative;
line-height: 24px;
height: 24px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center
}
.im-feedback-texts li:hover {
color: #3478f6
}
.im-feedback-texts li .im-feedback-text {
display: inline-block;
*display: inline;
*zoom: 1;
height: 14px;
font-size: 12px;
font-family: PingFangSC-Regular,PingFang SC;
font-weight: 400;
line-height: 14px;
margin-left: 4px
}
.im-feedback-texts li .texts-icon {
display: inline-block;
*display: inline;
*zoom: 1;
width: 24px;
height: 24px
}
.im-feedback-texts li .texts-icon-0 {
width: 24px;
height: 24px
}
.im-feedback-texts li .texts-icon-1 {
width: 24px;
height: 24px
}
.im-feedback-texts li .texts-icon-2 {
width: 24px;
height: 24px
}
.im-feedback-texts li .texts-icon-3 {
width: 24px;
height: 24px
}
.im-feedback-texts li .texts-icon-4 {
width: 24px;
height: 24px
}
.im-feedback-texts li+li {
margin-top: 8px
}
.im-feedback-texts li.texts-icon-0:hover .texts-icon.texts-icon-0 {
width: 24px;
height: 24px
}
.im-feedback-texts li.texts-icon-1:hover .texts-icon.texts-icon-1 {
width: 24px;
height: 24px
}
.im-feedback-texts li.texts-icon-2:hover .texts-icon.texts-icon-2 {
width: 24px;
height: 24px
}
.im-feedback-texts li.texts-icon-3:hover .texts-icon.texts-icon-3 {
width: 24px;
height: 24px
}
.im-feedback-texts li.texts-icon-4:hover .texts-icon.texts-icon-4 {
width: 24px;
height: 24px
}
.im-emotion {
display: inline-block;
position: relative;
text-decoration: none
}
.im-emotion .im-emotion-icon {
cursor: pointer;
line-height: 24px;
margin-top: 10px;
background: url(//repo.bfw.wiki/bfwrepo/icon/6094f84a2ce60.png);
background-size: cover;
width: 24px;
height: 24px
}
.im-emotion .im-emotion-icon:hover {
width: 24px;
height: 24px
}
.im-emotion .im-emotion-content {
display: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: absolute;
bottom: 100%;
margin-bottom: 7px;
left: -10px;
width: 408px;
height: 325px;
-webkit-border-radius: 6px;
border-radius: 6px;
background: #fff;
-webkit-box-shadow: 0 -10px 20px 0 rgba(0,0,0,.05);
box-shadow: 0 -10px 20px 0 rgba(0,0,0,.05);
z-index: 99999;
-webkit-border-image: -webkit-gradient(linear,left top,left bottom,from(#f2f2f2),to(#eaeaea)) 1 1;
-webkit-border-image: -webkit-linear-gradient(top,#f2f2f2,#eaeaea) 1 1;
-moz-border-image: -moz- oldlinear-gradient(top,#f2f2f2,#eaeaea) 1 1;
-moz-border-image: linear-gradient(180deg,#f2f2f2,#eaeaea) 1 1;
-o-border-image: -o-linear-gradient(top,#f2f2f2,#eaeaea) 1 1;
border-image: -webkit-gradient(linear,left top,left bottom,from(#f2f2f2),to(#eaeaea)) 1 1;
border-image: -moz- oldlinear-gradient(top,#f2f2f2,#eaeaea) 1 1;
border-image: linear-gradient(180deg,#f2f2f2,#eaeaea) 1 1
}
.im-emotion .im-emotion-content .im-emotion-list {
margin: 16px 16px 0;
overflow: hidden;
zoom: 1;
list-style: none;
height: 256px
}
.im-emotion .im-emotion-content .im-emotion-list .im-emotion-page {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.im-emotion .im-emotion-content .im-emotion-list .im-emotion-page .im-emotion-point {
height: 4px;
width: 28px;
margin: 0 auto
}
.im-emotion .im-emotion-content .im-emotion-list .im-emotion-page .im-emotion-point-page1 {
width: 20px;
height: 4px
}
.im-emotion .im-emotion-content .im-emotion-list .im-emotion-page .im-emotion-point-page2 {
width: 20px;
height: 4px
}
.im-emotion .im-emotion-content .im-emotion-list .im-emotion-page .im-emotion-point-page3 {
margin-top: 144px;
width: 20px;
height: 4px
}
.im-emotion .im-emotion-content .im-emotion-list .emotion-page,.im-emotion .im-emotion-content li {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.im-emotion .im-emotion-content li {
cursor: pointer;
width: 40px;
height: 40px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: 8px;
margin-bottom: 8px
}
.im-emotion .im-emotion-content li:nth-child(8n) {
margin-right: 0
}
.im-emotion .im-emotion-content li:hover,.im-emotion .im-emotion-content li:visited {
background: #f5f5f5;
-webkit-border-radius: 4px;
border-radius: 4px
}
.im-emotion .im-emotion-content li a {
width: 24px;
height: 24px
}
.im-emotion .im-emotion-footer {
margin: 16px 0;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.im-emotion .im-emotion-footer .im-emotion-title {
margin-left: 23px
}
.im-emotion .im-emotion-footer .im-emotion-title .im-emotion-normal {
width: 58px;
height: 26px;
text-align: center;
margin-right: 9px;
display: inline-block
}
.im-emotion .im-emotion-footer .im-emotion-title .im-emotion-normal:active,.im-emotion .im-emotion-footer .im-emotion-title .im-emotion-normal:hover,.im-emotion .im-emotion-footer .im-emotion-title .im-emotion-normal:visited {
background: #f5f5f5;
-webkit-border-radius: 13px;
border-radius: 13px
}
.im-emotion .im-emotion-footer .im-emotion-title .im-emotion-normal .im-normal {
line-height: 26px;
font-size: 14px;
font-family: PingFangSC-Medium,PingFang SC;
font-weight: 500;
color: #333;
display: inline-block
}
.im-emotion .im-emotion-footer .im-emotion-arrow {
margin-right: 33px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.im-emotion .im-emotion-footer .im-emotion-arrow a {
text-decoration: none
}
.im-emotion .im-emotion-footer .im-emotion-arrow .im-left-arrow-no,.im-emotion .im-emotion-footer .im-emotion-arrow .im-right-arrow {
display: inline-block;
background-repeat: no-repeat
}
.im-emotion .im-emotion-footer .im-emotion-arrow .im-left-arrow-no {
margin-right: 22px;
width: 6px;
height: 10px
}
.im-emotion .im-emotion-footer .im-emotion-arrow .im-right-arrow {
width: 6px;
height: 10px
}
.im-emotion .im-emotion-arrow-down {
width: 9px;
height: 8px;
position: absolute;
top: 100%;
left: 12px;
width: 26px;
height: 15px
}
.im-emotion,.im-left-arrow-no,.im-normal,.im-right-arrow {
*display: inline;
*zoom: 1
}
.im-image {
position: relative;
display: inline-block
}
.im-image .im-image-icon {
cursor: pointer;
line-height: 24px;
margin-top: 10px;
background: url(//repo.bfw.wiki/bfwrepo/icon/6094f869616dc.png);
background-size: cover;
width: 24px;
height: 24px
}
.im-image .im-image-icon:hover {
width: 24px;
height: 24px
}
.im-image .im-image-choose {
display: none
}
.im-image {
*display: inline;
*zoom: 1
}
.im-file {
position: relative;
display: inline-block
}
.im-file .im-file-icon {
cursor: pointer;
line-height: 24px;
margin-top: 10px;
background: url(//repo.bfw.wiki/bfwrepo/icon/6094f8775e03c.png);
background-size: cover;
width: 24px;
height: 24px
}
.im-file .im-file-icon:hover {
width: 24px;
height: 24px
}
.im-file .im-file-choose {
display: none
}
.im-file {
*display: inline;
*zoom: 1
}
.im-min .im-contactwindow {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px
}
.im-min .im-contactwindow .im-switchsize-btn {
top: 16px
}
.im-contactwindow .im-contactwindow-header .im-contactwindow-tips .im-mini-newmsg-count {
font-size: 12px;
color: #fff;
height: 16px;
background: #ff552e;
-webkit-border-radius: 8px;
border-radius: 8px;
border: none;
line-height: 16px;
padding: 0 5px;
margin-left: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.im-contactwindow .im-contactwindow-header .im-contactwindow-tips .im-mini-newmsg-count.im-hide {
display: none
}
.im-contactwindow .im-contactwindow-header .im-switchsize-btn {
position: absolute;
right: 41px;
width: 24px;
height: 24px;
top: 12px;
right: 48px;
cursor: pointer;
overflow: hidden
}
.im-contactwindow .im-contactwindow-header .im-switchsize-btn .im-contactwindow-switch-icon {
width: 24px;
height: 24px
}
.im-app.im-rightbottom.im-min {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
width: 274px;
margin-bottom: -512px
}
.im-app.im-rightbottom.im-min .im-chatwindow {
display: none!important
}
.im-app.im-rightbottom.im-min .im-contactwindow-header {
cursor: pointer
}
.im-shortcut {
display: inline-block;
position: relative;
font-size: 12px
}
.im-shortcut {
*display: inline;
*zoom: 1
}
.im-shortcut-icon {
cursor: pointer;
line-height: 24px;
margin-top: 10px;
background: url(//repo.bfw.wiki/bfwrepo/icon/6094f85b87dce.png);
background-size: cover;
width: 24px;
height: 24px
}
.im-shortcut-icon:hover {
width: 24px;
height: 24px
}
.im-shortcut-content {
display: none;
position: absolute;
bottom: 100%;
margin-bottom: 7px;
left: -43px;
padding: 24px 0 24px 24px;
width: 288px;
background: #fff;
-webkit-box-shadow: 0 -10px 20px 0 rgba(0,0,0,.05);
box-shadow: 0 -10px 20px 0 rgba(0,0,0,.05);
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-border-image: -webkit-gradient(linear,left top,left bottom,from(#f2f2f2),to(#eaeaea)) 1 1;
-webkit-border-image: -webkit-linear-gradient(top,#f2f2f2,#eaeaea) 1 1;
-moz-border-image: -moz- oldlinear-gradient(top,#f2f2f2,#eaeaea) 1 1;
-moz-border-image: linear-gradient(180deg,#f2f2f2,#eaeaea) 1 1;
-o-border-image: -o-linear-gradient(top,#f2f2f2,#eaeaea) 1 1;
border-image: -webkit-gradient(linear,left top,left bottom,from(#f2f2f2),to(#eaeaea)) 1 1;
border-image: -moz- oldlinear-gradient(top,#f2f2f2,#eaeaea) 1 1;
border-image: linear-gradient(180deg,#f2f2f2,#eaeaea) 1 1
}
.im-shortcut-texts {
list-style: none;
padding: 0;
margin: 0
}
.im-shortcut-texts li {
padding: 10px 0;
cursor: pointer;
font-size: 14px;
font-family: PingFangSC-Regular,PingFang SC;
font-weight: 400;
color: #333;
line-height: 14px;
height: 14px
}
.im-shortcut-texts li:first-child {
padding-top: 0
}
.im-shortcut-texts li:last-child {
padding-bottom: 0
}
.im-shortcut-texts li:hover {
color: #3478f6
}
.im-shortcut-arrow-down {
width: 9px;
height: 8px;
position: absolute;
top: 100%;
left: 45px;
width: 26px;
height: 15px
}
.im-msg {
position: relative;
*zoom: 1
}
.im-msg .im-msg-time {
text-align: center;
font-weight: 400;
margin-bottom: 16px;
color: #bbb;
font-size: 12px;
display: none;
margin-top: 2px
}
.im-msg .im-msg-main {
display: inline-block;
max-width: 100%;
padding: 10px 18px;
position: relative;
-webkit-border-radius: 16px;
border-radius: 16px
}
.im-msg .im-msg-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0