<!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>
