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 相关文章推荐
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
JavaScript 图片预览效果 推荐
Dec 22 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
jQuery 表单验证扩展(三)
Oct 20 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 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
PHP开发入门教程之面向对象
2006/12/05 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
python使用opencv进行人脸识别
2017/04/07 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
python实现微信自动回复功能
2018/04/11 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
职专应届生求职信
2013/11/16 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
yy婚礼主持词
2014/03/14 职场文书
党员创先争优活动总结
2014/05/04 职场文书
亚运会口号
2014/06/20 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
委托书格式范文
2015/01/28 职场文书
公司表扬稿范文
2015/05/05 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
Python实现自动玩连连看的脚本分享
2022/04/04 Python