1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset='utf-8'>
  5.         <style>
  6.             *{margin:0px;padding:0px;}
  7.             body{background-color:gray}
  8.             #head{height:100px;background-color:gray;}
  9.             #body{
  10.                 width:98%;height:800px;margin:0 auto;background-color:lightgray;position:relative;
  11.                 //-webkit-border-radius: 1em;-moz-border-radius: 1em;
  12.                 border-radius: 1em;
  13.                 font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
  14.             }
  15.                 #left{width:68%;height:100%;float:left;}
  16.                 #right{width:32%;height:100%;float:right;background-color:#bbb;border-radius:1em;}
  17.             #foot{height:46px;}
  18.             #foot p{line-height:46px;text-align:center;}
  19.             .comment{
  20.                 margin-top:4% ;margin-left:14%;padding:2%;width:68%;background-color:#aaa;border: 1px dashed #888;border-radius:1em;
  21.                 position:relative;display:a;
  22.             }
  23.             .comment:hover img{border-radius:1em;border: 2px solid #888;}
  24.             .comment:hover{background-color:#bbb;}
  25.             .comment img{position:absolute;top:-1%;left:-10%;border-radius:2em;border:2px solid #888;}
  26.             .comment p{text-indent:2em; margin-top:0.4%;}
  27.             .comment span{position:absolute;top:10%;right:4%;font-size:0.9em;font-weight:none;color:#444}
  28.             .comment .name{color:black;font-weight:bold;text-decoration:none;}
  29.             .comment .name:hover{text-decoration:underline;}
  30.             .comment .up{color:#555;text-decoration:none;position:absolute;bottom:4%;right:8%;}
  31.             .comment .up:hover{color:#000;}
  32.         </style>
  33.         <script>
  34.  
  35.         </script>
  36.     </head>
  37.     <body>
  38.         <div id="head">
  39.  
  40.         </div>
  41.         <div id="body">
  42.             <div id='left'>
  43.                 <div class='comment'>
  44.  
  45.                     <img src='img/1.png' alt='head pic' />
  46.                     <a class="name" href="">motivate</a>
  47.                     <p>跟oncopy事件类似，oncut事件也需要返回false才能禁止剪切。大家可以试试在上面的在线测试中把“return false;”这一句删除会看到，虽然弹出了提示框，但是内容还是被剪切了！</p>
  48.                     <span>2016/10/12</span>
  49.                     <a class='up' href="">赞</a>
  50.                 </div>
  51.  
  52.                 <div class='comment'>
  53.                     <img src='img/2.png' alt='head pic' />
  54.                     <a class="name" href="">backin</a>
  55.                     <p>其实上述方法不能真正做到完全屏蔽，因为我们可以到浏览器中设置“禁用JavaScript”，这时使用JavaScript实现屏蔽复制就无效了。进一步扩展，使用这种屏蔽方式也极大影响了用户体验，大家在实际开发的时候如果不想你的网站成为鸟不拉屎的地方的话，还是少点用。</p>
  56.                     <span>2016/10/13</span>
  57.                     <a class='up' href="">赞</a>
  58.                 </div>
  59.  
  60.             </div>
  61.             <div id='right'>
  62.  
  63.             </div>
  64.         </div>
  65.         <div id="foot">
  66.             <p>copyright@shunshou</p>
  67.         </div>
  68.  
  69.     </body>
  70. </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. OpenGL中坐标系的理解（一）

    在OpenGL中,存在着至少存在着三种矩阵,对应着函数glMatrixMode()的三个参数:GL_MODELVIEW,GL_PROJECTION,GL_TEXTURE. 以下主要描述GL_MODEL ...

  2. Photoshop 裁剪图片

    如图1选择裁剪工具,然后如图2点一下clear,就可以根据鼠标裁剪任意大小的图片

  3. 良心版Dolby Home Theater v4.1安装教程

    感(pi)谢(pan)一下两个教程: 文库文章链接:http://wenku.baidu.com/link?url=beBg_apvCuY3xiCXk4zl65Q7AmeCjoDGMol03K0xhk ...

  4. MySQL的那点事！

    我先简单的介绍下事务:事务必须满足4个条件:1.原子性,2.一致性,3.隔离性,4.持久性. MySQL的事务处理主要有两种方法: 1.用 begin rollback commit 来实现 begi ...

  5. Django底层剖析之一次请求到响应的整个流程

    As we all know,所有的Web应用,其本质上其实就是一个socket服务端,而用户的浏览器就是一个socket客户端. #!/usr/bin/env python #coding:utf- ...

  6. BI项目记笔记索引

    这个笔记系列主要记录了在BI项目中,如何搭建环境进行源代码管理以及文档管理. 用到的产品包括: TFS Express Sharepoint Visual Studio SQL Server   配置 ...

  7. MS SQLServer 批量附加数据库 分类： SQL Server 数据库 2015-07-13 11:12 30人阅读 评论(0) 收藏

    ************************************************************ * 标题:MS SQLServer 批量附加数据库 * 说明:请根据下面的注释 ...

  8. Unity IOS Build的Graphics API最好是固定Opengl ES 2.0

    不要选择Automatic也不要选择Metal,因为这个选项可能会导致app在Iphone6上出现crash. 一个类似的crash堆栈: http://stackoverflow.com/quest ...

  9. oracle函数简析

    (一).数值型函数(Number Functions) 数值型函数输入数字型参数并返回数值型的值.多数该类函数的返回值支持38位小数点,诸如:COS, COSH, EXP, LN, LOG, SIN, ...

  10. RDD/Dataset/DataFrame互转

    1.RDD -> Dataset val ds = rdd.toDS() 2.RDD -> DataFrame val df = spark.read.json(rdd) 3.Datase ...