首页 > 代码库 > 不简单的消息框
不简单的消息框
前几天在做项目的时候遇到一个难点，就是怎么才能用纯代码写一个漂亮的消息框呢？
我这里的消息框指的是有指向的消息框，附上图：
像这样的消息框，一开始总觉得它不是代码写出来的。后来在观察中发现了一种方法，我觉得是很不错的一种写法。
记录总是可以加深印象，对自身乃至项目需要的朋友都会是一种帮助。代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文档标题</title> 6 </head> 7 <style type="text/css"> 8 *{ 9 margin: 0;10 padding: 0;11 }12 img{13 border:0;14 }15 ol, ul ,li{list-style: none;}16 .menu{17 width: 100px;18 z-index: 2;19 border: 1px solid #adc3d9;20 border-radius: 4px;21 background-color: #fff;22 position: relative;23 margin-top: 50px;24 margin-left: 50px;25 }26 .cor{27 position: absolute;28 top: -15px;29 right: 8px;30 border-width: 7px;31 border-style: solid;32 border-color: transparent transparent #adc3d9;33 }34 .cor-in{35 position: absolute;36 top: -4px;37 left: -6px;38 border-width: 6px;39 border-style: solid;40 border-color: transparent transparent #fff;41 }42 .con{43 padding: 10px;44 box-sizing: border-box;45 }46 </style>47 <body>48 49 <div class="menu">50 <div class="cor">51 <div class="cor-in"></div>52 </div>53 <div class="con">54 最新消息55 最新消息56 最新消息57 </div>58 </div>59 60 </body>61 </html>
不简单的消息框
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。