HTML5实现留言和回复页面样式


Posted in Javascript onJuly 22, 2015

具体就不做详细讲解了,直接上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.webkfa.com/" />
<title>web开发-webkfa.com</title>
<style type="text/css">
*{
margin:0;padding:0;
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(210,210,210,0.35); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
}
body{font-family:"微软雅黑";font-size:12px;}
ul,li{list-style:none;}
.ylcon{width:100%;min-width:320px;}
.tit{height:26px;line-height:26px;padding:0px 15px;position:relative;font-size:15px;color:#aaa;border-bottom:1px solid rgba(0, 0, 0, 0.15);}

.story{border-bottom:1px dashed #cecece;padding:0 15px 3px;position:relative;}
.story_t{font-size:1.2em;color:rgba(0,0,0,1);padding-top:5px;padding-bottom:2px;}
.story_m{color:rgba(110,110,110,1);line-height:21px;word-break:break-all;word-wrap:break-word;overflow:hidden;font-size:1.2em;padding:2px 0;}
.story_time{color:rgba(154,154,154,1);padding:2px 0;}
.story_hf{background:rgb(245,245,245);font-size:1.2em;border:1px solid rgba(204,204,204,0.2);border-radius:2px;color:rgba(110,110,110,1);padding:4px;margin-bottom:5px;}
.opbtn{position:absolute;top: 0;right: 0;}
</style>
</head>
<body>
<div class="ylcon">
<p class="tit">
所有留言
</p>
<div id="messDivId">
<div class="story">
<div class="opbtn"></div>
<p class="story_t">怜星</p>
<p class="story_time">2015/07/12 20:48</p>
<p class="story_m">我想问最近最火的tfboys呢他们的八卦呢我想问最近最火的tfboys呢,他们的八卦呢我想问最近最火的tfboys呢?!他们的八卦呢?!</p>
<p class="story_hf">@剑花烟雨:的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契</p>
</div>
<div class="story">
<div class="opbtn"></div>
<p class="story_t">怜星</p>
<p class="story_time">2015/07/12 20:48</p>
<p class="story_m">我想问最近最火的tfboys呢他们的八卦呢我想问最近最火的tfboys呢,他们的八卦呢我想问最近最火的tfboys呢?!他们的八卦呢?!</p>
<p class="story_hf">@剑花烟雨:的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契</p>
</div>
<div class="story">
<div class="opbtn"></div>
<p class="story_t">怜星</p>
<p class="story_time">2015/07/12 20:48</p>
<p class="story_m">我想问最近最火的tfboys呢他们的八卦呢我想问最近最火的tfboys呢,他们的八卦呢我想问最近最火的tfboys呢?!他们的八卦呢?!</p>
<p class="story_hf">@剑花烟雨:的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契</p>
</div>
</div>
</div>
</body>
</html>

直接复制代码到编辑工具里,就能看到效果,希望能够帮助到大家。

Javascript 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
javascript实现日历效果
Jun 17 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
javascript控制层显示或隐藏的方法
Jul 22 #Javascript
javascript实现简单查找与替换的方法
Jul 22 #Javascript
javascript数组随机排序实例分析
Jul 22 #Javascript
JavaScript对数组进行随机重排的方法
Jul 22 #Javascript
JavaScript检测上传文件大小的方法
Jul 22 #Javascript
JavaScript动态改变div属性的实现方法
Jul 22 #Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 #Javascript
You might like
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
php printf输出格式使用说明
2010/12/05 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
机械设计及其自动化专业推荐信
2013/10/31 职场文书
酒店管理专业毕业生推荐信
2013/11/10 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
分家协议书
2014/04/21 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
年终晚会活动方案
2014/08/21 职场文书
2014年销售员工作总结
2014/12/01 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电