邮件布局，左边是发送的通知面板：“收件人，主题，邮件内容"，右边是联系人面板，待收
邮件的联系人有哪些，这是一个可以滑动的面板，就像平时发邮件那样，然后选中其中任意一个
收件人就可以在通知面板的收件人上显示联系人姓名。
我是前端小白，对这一块不是特别懂，请各位大神指教，还有这到底是JS还是CSS布局呢？
这种效果可以用 ifream 实现。
布局好写啊，实现方法有很多
主要是邮件联系人要用自动完成，邮件内容添加富文本比较麻烦
之前我写过一个使用ElementUI和wangeditor的类似的东西
这两个插件你可以参考一下
没什么好说的其实，bootstrap和flexbox随便布局就可以了
admin-lte 一直在用这个模版 你可以看看 是基于bootstrap的 后端的福音啊
- 布局用CSS实现
- 拖拽用JS实现
这个网上很多吧，原生实现的话就自己写样式和js，用框架的话就找一找，直接下来用
简单布局效果，需要引用jquery-1.8.2.js
HTML：
<!DOCTYPE html>
邮件布局
<br> function mailClick(e){<br> var name = $(e).text().replace(/(^\s+)|(\s+$)/g, "");<br> var mail=$(e).attr("title").replace(/(^\s+)|(\s+$)/g, "");<br> $("#recipients_user").val($("#recipients_user").val()+name+mail+"；");<br> }<br> function ser(){<br> $("#dis").css("display","none");<br> $(".js_input").focus();<br> }<br> function bur(){<br> $("#dis").css("display","");<br> }</p> <pre><code> </script> </head> <body> <div class="all"> <div class="top"> <input type="button" value="发送" /> <input type="button" value="定时发送" /> <input type="button" value="存草稿" /> <input type="button" value="关闭" /> </div> <div class="center"> <div class="center_left"> <div class="recipients" style="margin-top: 15px;"> <p><a>收件人</a></p> <input id="recipients_user" type="text" /> </div> <div class="recipients"> <p>&nbsp;</p> <span class="span"> <a>添加抄送</a>&nbsp;-&nbsp;<a>添加密送</a>&nbsp;|&nbsp;<a>分别发送</a> </span> </div> <div class="recipients"> <p>主题</p> <input type="text" /> </div> <div class="recipients" style="margin-top: 6px;"> <p>&nbsp;</p> <span class="span"> <a class="compose_toolbtn_text ico_att" style="margin-left: 0;">添加附件</a> <a class="ico_moreupload"></a> <a class="compose_toolbtn_text ico_attbig">超大附件</a> <a class="compose_toolbtn_text ico_editDoc" style="text-indent: 20px;">在线文档</a> <a class="compose_toolbtn_text_small qmEditorPhoto">照片</a> <a class="ico_moreupload"></a> <a class="compose_toolbtn_text_small qmEditorWord">文档</a> <a class="compose_toolbtn_text_small qmEditorScreenSnapDisable">截屏</a> <a class="compose_toolbtn_text_small qmEditorMo">表情</a> <a class="compose_toolbtn_text_small qmEditorMore">更多</a> <a class="compose_toolbtn_text_small qmEditorTxtStyle" style="width: 50px;">格式↓</a> </span> </div> <div class="recipients" style="height:335px"> <p>正文</p> <textarea></textarea> </div> <div class="recipients"> <p>&nbsp;</p> <span class="span"> 发件人：某某某 <1111111111@qq.com>▼ | 其他选项 </span> </div> </div> <div class="center_right"> <div class="maillist"> <div class="maillist_title">通讯录</div> <div class="lm_sbar"> <input id="lm1517294398590047153670954512183cancel" class="lm_sopen" type="button"> <div> <input id="lm1517294398590047153670954512183searchtext" class="txt" value="查找联系人..." autocomplete="off" type="text"> </div> </div> <div class="maillist_func"><a class="a_rt">清空</a>最近联系人</div> <div class="groupsub"> <div class="groupclose" style="display:" key="206" sub="0"> <a unselectable="on" nocheck="true" onclick="mailClick(this)" onmousedown="return false;" title="222222222@qq.com" class="lm_addr"> 张三</a> </div> <div class="groupclose" style="display:" key="209" sub="0"> <a unselectable="on" nocheck="true" onclick="mailClick(this)" onmousedown="return false;" title="333333333@qq.com" class="lm_addr"> 李四</a> </div> <div class="groupclose" style="display:" key="206" sub="0"> <a unselectable="on" nocheck="true" onclick="mailClick(this)" onmousedown="return false;" title="444444444@qq.com" class="lm_addr"> 王五</a> </div> <div class="groupclose" style="display:" key="209" sub="0"> <a unselectable="on" nocheck="true" onclick="mailClick(this)" onmousedown="return false;" title="555555555@qq.com" class="lm_addr"> 麻子</a> </div> <div class="groupclose" style="display:" key="m4" sub="0"> <a unselectable="on" nocheck="true" onmousedown="return false;" title="更多联系人" class="lm_addr"> <b>显示更多↓</b></a> </div> </div> <div class="maillist_func">QQ好友</div> </div> </div> </div> </div> </body> </code></pre> <p></html></p> <p>CSS：<br> body,html{margin: 0;padding: 0;font-family: "微软雅黑";height: 100%;}<br> *{margin: 0;padding: 0;}<br> div{display: block;}<br> input.txt, input.txt2, textarea.txt, .txt, .qm_txt {border: 1px solid #c3c3c3;border-top: 1px solid #7c7c7c;border-left: 1px solid #9a9a9a;background: url(../img/today1e9c5d.gif) 0 -162px #fff repeat-x;outline: none;line-height: 170%;}<br> .all{width: 100%;height:100%;display: block;font-size: 12px;}<br> .top{width: 100%;height: 40px;background: #C1D9F3;line-height: 40px;border-bottom: 1px solid #AAC1DE;}<br> .center{width: 100%;background: #EFF5FB;height: 515px;}<br> .center a{color: #1E5494;text-decoration: none;cursor: pointer;}<br> .center a:hover{text-decoration: underline;}<br> .center_left{width: 79%;float: left;}<br> .center_left .recipients{width: 100%;height: 33px;}<br> .center_left .recipients p{width: 9%;text-align: right;float: left;margin-right: 1%;line-height: 33px;}<br> .center_left .recipients input{width: 89%;float: left;height: 20px;text-align: left;}</p> <p>.center_left .recipients textarea{width: 89%;float: left;height: 319px;}<br> .center_left .recipients .span{width: 89%;float: left;}<br> .center_right{width: 19%;float: right;}<br> .compose_toolbtn_text {margin-left:8px;display: inline-block;padding: 0 0 2px 18px;width: 68px;height: auto;text-indent: 18px;}<br> .compose_toolbtn_text_small{margin-left:8px;display: inline-block;padding: 0 0 2px 18px;width: 44px;height: auto;text-indent: 18px;}<br> .ico_att {background: url(../img/compose207c92.png) no-repeat 0 0;height: 15px;padding: 0;border: none;}<br> .ico_moreupload {background: url(../img/compose207c92.png) no-repeat 0 -480px;display: inline-block;width: 16px;height: 14px;vertical-align: middle;*vertical-align: bottom;}<br> .ico_attbig {background: url(../img/compose207c92.png) no-repeat 0 -24px;height: 16px;padding: 0;border: none;}<br> .ico_editDoc{background: url(../img/editdoc3495d7.png) no-repeat 0 0;height: 16px;padding: 0;border: none;}</p> <p>.qmEditorNetDisk, .qmEditorPhoto, .qmEditorScreenSnapDisable, .qmEditorMo, .qmEditorMusic, .qmEditorWord, .qmEditorTxtStyle, .qmEditorMore, .qmEditorMap, .qmEditorVote, .icon_editor_arrow_up, .icon_editor_arrow_down {<br> background-image: url(../img/compose27b687.png);background-repeat: no-repeat;height: 16px;padding: 0;border: none;}<br> .qmEditorPhoto{background-position: 0 -72px;}<br> .qmEditorWord{background-position: 1px -623px;}<br> .qmEditorScreenSnapDisable{background-position: 0 -287px;}<br> .qmEditorMo{background-position: 0 -96px;}<br> .qmEditorMore{background-position: 0 -668px;}<br> .qmEditorTxtStyle{background-position: 0 -167px;}</p> <p>.maillist{width: 90%;height:457px;margin-top: 15px;border: 1px solid #7F9DB9;background: #FFFFFF;}<br> .maillist .maillist_title{width:100%;background: #E7F0F8;height: 26px;font-weight: 700;text-align: center;line-height: 25px;border-bottom: 1px solid #7F9DB9;}<br> .maillist .lm_sbar {border-bottom: 1px solid #ccc;padding: 7px 6px 4px;*padding-left: 0;_padding-left: 3px;height: 22px;line-height: 11px;}<br> .maillist .lm_sbar .lm_sopen {background: url(../img/compose207c92.png) 0 -312px no-repeat;width: 19px;height: 20px;padding: 0;border: none;float: right;*margin-top: 1px;}<br> .maillist .lm_sbar div {overflow: hidden;*float: right;}<br> .maillist .lm_sbar .txt {border-right: medium none;margin: 0;color: rgb(160,160,160);width: 100%;height: 18px;}<br> .maillist .maillist_func{padding: 4px 0 4px 8px; background: #eff5fb;cursor: default;border-bottom: 1px solid #d3e1f0;}<br> .maillist .maillist_func .a_rt{float: right;margin-right: 5px;}<br> .groupsub {padding: 5px 0;zoom: 1;}<br> .groupclose {width: 100%;*width: auto;overflow: hidden;}<br> a.lm_addr, a.lm_addr:link, a.lm_addr:visited {background: #fff;display: block;color: #494949;text-decoration: none;text-align: left;height: 20px;line-height: 20px;padding: 0 0 0 30px;white-space: nowrap;width: auto;text-overflow: ellipsis;overflow: hidden;cursor: pointer;outline: none;}<br> a.lm_addr:hover {background: #FFEEC2;text-decoration: none;}</p>