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

css简单评论页面的更多相关文章

  1. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  2. 3.8.1 HTML与CSS简单页面效果实例

    HTML与CSS简单页面效果实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  3. 我的Vue之旅 07 Axios + Golang + Sqlite3 实现简单评论机制

    第三期 · 使用 Vue 3.1 + TailWind.CSS + Axios + Golang + Sqlite3 实现简单评论机制 效果图 CommentArea.vue 我们需要借助js的Dat ...

  4. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  5. css3 calc()：css简单的数学运算-加减乘除

    css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...

  6. 一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  7. (转)一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  8. 自学jQueryMobile之简单创建页面

    首先简答介绍一下JQueryMobile吧,我觉得用一句话来讲就是可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备.这也是我自 ...

  9. CSS简单使用

    CSS简单使用 标签 : 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增 ...

随机推荐

  1. 定义类型uint8_t,uint32_t

    定义的类型uint8_t,uint32_t能更明显的显示所占字节数.uint8_t表示占1个字节(1 字节=8 bit), uint32_t表示占4个字节((4 字节=32 bit). #includ ...

  2. mysql高并发和表类型

    高并发:http://www.cnblogs.com/wangchaozhi/p/5061378.html 表类型:http://www.xiaoxiaozi.com/2009/07/14/1171/

  3. javase-常用三种遍历方法

    javase-常用三种遍历方法 import java.util.ArrayList; import java.util.Iterator; import java.util.List; public ...

  4. 【协议分析】Wireshark 过滤表达式实例

    Wireshark 过滤表达式实例   1.wireshark基本的语法 字符 \d          0-9的数字 \D          \d的补集(以所以字符为全集,下同),即所有非数字的字符 ...

  5. hosts文件权限导致监听无法启动

    1.所属系统:2.问题描述:3.解决4.参考???疑点:为什么修改主机名会使hosts文件权限发生改变 1.所属系统: ZHJS2#[/]uname -a HP-UX ZHJS2 B.11.31 U ...

  6. AngularJS学习 01进入Angular世界

    Angular下载 各个版本的下载地址:https://code.angularjs.org/ 打开上述URL,页面如下图: 点击需要的版本,跳出如下页面: 点击红色框内容即可下载完整的压缩包. 还可 ...

  7. 第三十三篇：使用uiresImporter生成uires.idx及skin.xml

    在SOUI中,使用uires.idx这个文件来记录程序中使用的所有资源文件. 此外绘制对象(ISkinObj)则一般放在skin.xml中描述. 要向一个界面中增加一个新的图片,在没有uiresImp ...

  8. [原创] Go语言在Centos上的部署

    序言 Golang是个好东西啊.部署非常简单,对于运维人员来说太爽了. 传统的Nginx啊Apache啊,外加PHP以及各个插件啊搞得头晕. 用了Go之后就什么都不需要了.只要把生成好的文件向服务器上 ...

  9. 关于linux服务器上搭建ftp服务的流程

    小龙最近折腾了一个阿里云的服务器,买完了就要开始做那么多那么多的功课,小龙对ssh也是一知半解的状态,做个小笔记,发布下整个ftp服务的搭建过程,大神勿喷:) 一.aliyun Linux(Redha ...

  10. [spring源码学习]八、IOC源码-messageSource

    一.代码实例 我们在第八章可以看到,spring的context在初始化的时候,会默认调用系统中的各种约定好的bean,其中第一个bean就是id为messageSource的bean,我们了解这应该 ...