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 相关文章推荐
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
js实现微信分享代码
Oct 11 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 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中随机显示图片的函数代码
2011/06/23 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
python opencv之SURF算法示例
2018/02/24 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
python基于socket函数实现端口扫描
2020/05/28 Python
python制作抽奖程序代码详解
2021/01/15 Python
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
中英文自我评价语句
2013/12/20 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
简易版租房协议书范本
2014/10/13 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
2015年三万活动总结
2015/03/25 职场文书
呐喊读书笔记
2015/06/30 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技