2 newmemory newmemory 于 2018.01.12 09:37 提问

怎么在前端实现发邮件的布局效果? 5C

邮件布局,左边是发送的通知面板:“收件人,主题,邮件内容",右边是联系人面板,待收
邮件的联系人有哪些,这是一个可以滑动的面板,就像平时发邮件那样,然后选中其中任意一个
收件人就可以在通知面板的收件人上显示联系人姓名。
我是前端小白,对这一块不是特别懂,请各位大神指教,还有这到底是JS还是CSS布局呢?

6个回答

sinat_41081713
sinat_41081713   2018.01.12 09:45

布局好写啊,实现方法有很多
主要是邮件联系人要用自动完成,邮件内容添加富文本比较麻烦
之前我写过一个使用ElementUI和wangeditor的类似的东西

这两个插件你可以参考一下
没什么好说的其实,bootstrap和flexbox随便布局就可以了

qq_40087415
qq_40087415   2018.01.12 09:45

这种效果可以用 ifream 实现。

joway1125
joway1125   2018.01.12 09:47

admin-lte 一直在用这个模版 你可以看看 是基于bootstrap的 后端的福音啊

hoga1208
hoga1208   2018.01.12 15:39
  1. 布局用CSS实现
  2. 拖拽用JS实现
liaoxuewu
liaoxuewu   2018.01.12 16:29

这个网上很多吧,原生实现的话就自己写样式和js,用框架的话就找一找,直接下来用

qq_34307209
qq_34307209   2018.01.30 17:08

简单布局效果,需要引用jquery-1.8.2.js

HTML:
<!DOCTYPE html>



邮件布局


<br> function mailClick(e){<br> var name = $(e).text().replace(/(^\s+)|(\s+$)/g, &quot;&quot;);<br> var mail=$(e).attr(&quot;title&quot;).replace(/(^\s+)|(\s+$)/g, &quot;&quot;);<br> $(&quot;#recipients_user&quot;).val($(&quot;#recipients_user&quot;).val()+name+mail+&quot;;&quot;);<br> }<br> function ser(){<br> $(&quot;#dis&quot;).css(&quot;display&quot;,&quot;none&quot;);<br> $(&quot;.js_input&quot;).focus();<br> }<br> function bur(){<br> $(&quot;#dis&quot;).css(&quot;display&quot;,&quot;&quot;);<br> }</p> <pre><code> &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;all&quot;&gt; &lt;div class=&quot;top&quot;&gt; &lt;input type=&quot;button&quot; value=&quot;发送&quot; /&gt; &lt;input type=&quot;button&quot; value=&quot;定时发送&quot; /&gt; &lt;input type=&quot;button&quot; value=&quot;存草稿&quot; /&gt; &lt;input type=&quot;button&quot; value=&quot;关闭&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;center&quot;&gt; &lt;div class=&quot;center_left&quot;&gt; &lt;div class=&quot;recipients&quot; style=&quot;margin-top: 15px;&quot;&gt; &lt;p&gt;&lt;a&gt;收件人&lt;/a&gt;&lt;/p&gt; &lt;input id=&quot;recipients_user&quot; type=&quot;text&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;recipients&quot;&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;span class=&quot;span&quot;&gt; &lt;a&gt;添加抄送&lt;/a&gt;&amp;nbsp;-&amp;nbsp;&lt;a&gt;添加密送&lt;/a&gt;&amp;nbsp;|&amp;nbsp;&lt;a&gt;分别发送&lt;/a&gt; &lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;recipients&quot;&gt; &lt;p&gt;主题&lt;/p&gt; &lt;input type=&quot;text&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;recipients&quot; style=&quot;margin-top: 6px;&quot;&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;span class=&quot;span&quot;&gt; &lt;a class=&quot;compose_toolbtn_text ico_att&quot; style=&quot;margin-left: 0;&quot;&gt;添加附件&lt;/a&gt; &lt;a class=&quot;ico_moreupload&quot;&gt;&lt;/a&gt; &lt;a class=&quot;compose_toolbtn_text ico_attbig&quot;&gt;超大附件&lt;/a&gt; &lt;a class=&quot;compose_toolbtn_text ico_editDoc&quot; style=&quot;text-indent: 20px;&quot;&gt;在线文档&lt;/a&gt; &lt;a class=&quot;compose_toolbtn_text_small qmEditorPhoto&quot;&gt;照片&lt;/a&gt; &lt;a class=&quot;ico_moreupload&quot;&gt;&lt;/a&gt; &lt;a class=&quot;compose_toolbtn_text_small qmEditorWord&quot;&gt;文档&lt;/a&gt; &lt;a class=&quot;compose_toolbtn_text_small qmEditorScreenSnapDisable&quot;&gt;截屏&lt;/a&gt; &lt;a class=&quot;compose_toolbtn_text_small qmEditorMo&quot;&gt;表情&lt;/a&gt; &lt;a class=&quot;compose_toolbtn_text_small qmEditorMore&quot;&gt;更多&lt;/a&gt; &lt;a class=&quot;compose_toolbtn_text_small qmEditorTxtStyle&quot; style=&quot;width: 50px;&quot;&gt;格式↓&lt;/a&gt; &lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;recipients&quot; style=&quot;height:335px&quot;&gt; &lt;p&gt;正文&lt;/p&gt; &lt;textarea&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;div class=&quot;recipients&quot;&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;span class=&quot;span&quot;&gt; 发件人:某某某 &lt;1111111111@qq.com&gt;▼ | 其他选项 &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;center_right&quot;&gt; &lt;div class=&quot;maillist&quot;&gt; &lt;div class=&quot;maillist_title&quot;&gt;通讯录&lt;/div&gt; &lt;div class=&quot;lm_sbar&quot;&gt; &lt;input id=&quot;lm1517294398590047153670954512183cancel&quot; class=&quot;lm_sopen&quot; type=&quot;button&quot;&gt; &lt;div&gt; &lt;input id=&quot;lm1517294398590047153670954512183searchtext&quot; class=&quot;txt&quot; value=&quot;查找联系人...&quot; autocomplete=&quot;off&quot; type=&quot;text&quot;&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;maillist_func&quot;&gt;&lt;a class=&quot;a_rt&quot;&gt;清空&lt;/a&gt;最近联系人&lt;/div&gt; &lt;div class=&quot;groupsub&quot;&gt; &lt;div class=&quot;groupclose&quot; style=&quot;display:&quot; key=&quot;206&quot; sub=&quot;0&quot;&gt; &lt;a unselectable=&quot;on&quot; nocheck=&quot;true&quot; onclick=&quot;mailClick(this)&quot; onmousedown=&quot;return false;&quot; title=&quot;222222222@qq.com&quot; class=&quot;lm_addr&quot;&gt; 张三&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;groupclose&quot; style=&quot;display:&quot; key=&quot;209&quot; sub=&quot;0&quot;&gt; &lt;a unselectable=&quot;on&quot; nocheck=&quot;true&quot; onclick=&quot;mailClick(this)&quot; onmousedown=&quot;return false;&quot; title=&quot;333333333@qq.com&quot; class=&quot;lm_addr&quot;&gt; 李四&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;groupclose&quot; style=&quot;display:&quot; key=&quot;206&quot; sub=&quot;0&quot;&gt; &lt;a unselectable=&quot;on&quot; nocheck=&quot;true&quot; onclick=&quot;mailClick(this)&quot; onmousedown=&quot;return false;&quot; title=&quot;444444444@qq.com&quot; class=&quot;lm_addr&quot;&gt; 王五&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;groupclose&quot; style=&quot;display:&quot; key=&quot;209&quot; sub=&quot;0&quot;&gt; &lt;a unselectable=&quot;on&quot; nocheck=&quot;true&quot; onclick=&quot;mailClick(this)&quot; onmousedown=&quot;return false;&quot; title=&quot;555555555@qq.com&quot; class=&quot;lm_addr&quot;&gt; 麻子&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;groupclose&quot; style=&quot;display:&quot; key=&quot;m4&quot; sub=&quot;0&quot;&gt; &lt;a unselectable=&quot;on&quot; nocheck=&quot;true&quot; onmousedown=&quot;return false;&quot; title=&quot;更多联系人&quot; class=&quot;lm_addr&quot;&gt; &lt;b&gt;显示更多↓&lt;/b&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;maillist_func&quot;&gt;QQ好友&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p></html></p> <p>CSS:<br> body,html{margin: 0;padding: 0;font-family: &quot;微软雅黑&quot;;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>
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!