最近做一个云客服项目,可以把多个微信号消息集中到一个客服平台中,方便统一管理,这里就不详细说客服平台的功能。
做为码农,工作职责就是把功能实现了,在此,我简单说一下页面布局吧。先贴上设计稿吧:
UI图主要是为PC设计的,手机上可能看不太清,但这不影响接下来讲解的布局,我们先简单分析一下页面,看看如何实现这个复杂的页面布局。
我写的HTML结构代码:
<div class="wrapper">
<!-- left -->
<div class="kf-left-panel"></div>
<!-- main left -->
<div class="kf-contact-panel"></div>
<!-- main-right -->
<div class="kf-content-panel"></div>
<!-- right -->
<div class="kf-right-panel"></div>
</div>
这种占满全屏的布局,比较常见的是早期的一些论坛,width都设置为100%,现在也有不少论坛设置成了定宽~
当前这种页面元素比较多的布局,建议加上最小宽度 & 最小高度,再加上宽度高度都是100%(要设置html,body高度为100%)。
<style>
html, body{
height: 100%;
}
.wrapper{
width: 100%;
height: 100%;
min-width: 1000px;
min-height: 600px;
}
</style>
左右布局是CSS布局中比较常见的一种布局方式,这里的难点是,既要实现左右布局,又要保证width: 100%;(就是宽度不定,因为用户的浏览器宽度是各不相同的)。 好了,直接上代码吧(实现方式应该不止这一种):
<style>
.wrapper{
min-width: 1000px;
height: 100%;
min-height: 600px;
}
// left:用左浮动 and 定宽
.kf-left-panel{
position: relative;
float: left;
width: 104px;
background: $bg_black;
height: 100%;
overflow: auto;
text-align: center;
}
// main left:用左浮动 and 定宽
.kf-contact-panel{
position: relative;
float: left;
width: 260px;
height: 100%;
border-right: 1px solid $border;
overflow: hidden;
}
// main right: 设置margin-left和margin-right值,给left-panel和right-panel留出空间
.kf-content-panel{
position: relative;
margin-left: 364px;
margin-right: 260px;
height: 100%;
overflow: hidden;
}
// right:这个很好理解了,绝对定位,宽度正好是上面content留下的margin-right值
.kf-right-panel{
position: absolute;
top: 0;
right: 0;
width: 260px;
height: 100%;
border-right: 1px solid $border;
background: $bg_user_info;
overflow: auto;
}
</style>
这个左右布局问题也解决了,剩下的上中下布局也就好办了~
上中下布局属于多行布局,也是比较常见的布局方式,就当前设计稿来说,难点儿是高度100%的情况下(高度根据用户浏览器高度而定)来实现这效果。 就拿中间的对话区域来分析:顶部高度定高,底部输入区域也是定高,中间区域高度是剩余的高度。
好了,还是直接上代码吧:
html部分
<!-- 顶部标题区 -->
<div class="dialog-title dialog-content-title"></div>
<!-- 对话内容区 -->
<div class="dialog-content-news"></div>
<!-- 底部输入框区域 -->
<div class="dialog-input-panel"></div>
css部分
<style>
// 顶部标题区
.dialog-title{
height: 48px;
line-height: 48px;
padding-left: 16px;
font-size: $font_title;
color: $color_default;
overflow: hidden;
}
// 对话内容区
.dialog-content-news{
position: absolute;
top: 48px;
left: 0;
bottom: 161px;
width: 100%;
border-top: 1px solid $border;
overflow: hidden;
}
// 底部输入框区域
.dialog-input-panel{
position: absolute;
bottom: 0;
width: 100%;
height: 160px;
border-top: 1px solid $border;
}
</style>
OK,看来解决好上面这三个问题,这个复杂的布局就搞定了。纯CSS实现,没有用一行JS代码,不说了,要继续写代码了~
想查看DEMO,请点击:http://demos.pxuexiao.com/kefu/index.html