<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <style> *{margin:0px;padding:0px;} body{background-color:gray} #head{height:100px;background-color:gray;} #body{ width:98%;height:800px;margin:0 auto;background-color:lightgray;position:relative; //-webkit-border-radius: 1em;-moz-border-radius: 1em; border-radius: 1em; font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; } #left{width:68%;height:100%;float:left;} #right{width:32%;height:100%;float:right;background-color:#bbb;border-radius:1em;} #foot{height:46px;} #foot p{line-height:46px;text-align:center;} .comment{ margin-top:4% ;margin-left:14%;padding:2%;width:68%;background-color:#aaa;border: 1px dashed #888;border-radius:1em; position:relative;display:a; } .comment:hover img{border-radius:1em;border: 2px solid #888;} .comment:hover{background-color:#bbb;} .comment img{position:absolute;top:-1%;left:-10%;border-radius:2em;border:2px solid #888;} .comment p{text-indent:2em; margin-top:0.4%;} .comment span{position:absolute;top:10%;right:4%;font-size:0.9em;font-weight:none;color:#444} .comment .name{color:black;font-weight:bold;text-decoration:none;} .comment .name:hover{text-decoration:underline;} .comment .up{color:#555;text-decoration:none;position:absolute;bottom:4%;right:8%;} .comment .up:hover{color:#000;} </style> <script> </script> </head> <body> <div id="head"> </div> <div id="body"> <div id='left'> <div class='comment'> <img src='img/1.png' alt='head pic' /> <a class="name" href="">motivate</a> <p>跟oncopy事件类似，oncut事件也需要返回false才能禁止剪切。大家可以试试在上面的在线测试中把“return false;”这一句删除会看到，虽然弹出了提示框，但是内容还是被剪切了！</p> <span>2016/10/12</span> <a class='up' href="">赞</a> </div> <div class='comment'> <img src='img/2.png' alt='head pic' /> <a class="name" href="">backin</a> <p>其实上述方法不能真正做到完全屏蔽，因为我们可以到浏览器中设置“禁用JavaScript”，这时使用JavaScript实现屏蔽复制就无效了。进一步扩展，使用这种屏蔽方式也极大影响了用户体验，大家在实际开发的时候如果不想你的网站成为鸟不拉屎的地方的话，还是少点用。</p> <span>2016/10/13</span> <a class='up' href="">赞</a> </div> </div> <div id='right'> </div> </div> <div id="foot"> <p>copyright@shunshou</p> </div> </body> </html>