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 相关文章推荐
JavaScript中的Document文档对象
Jan 16 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
如何在 ant 的table中实现图片的渲染操作
Oct 28 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将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
2014过年倒计时示例
2014/01/31 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
基于Jquery的温度计动画效果
2010/06/18 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
Python实时获取cmd的输出
2015/12/13 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
运动会开幕式邀请函
2014/01/22 职场文书
收银员的岗位职责范本
2014/02/04 职场文书
《落花生》教学反思
2014/02/25 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
2014年度培训工作总结
2014/11/27 职场文书
交警失职检讨书
2015/01/26 职场文书
2015年父亲节寄语
2015/03/23 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
python for循环赋值问题
2021/06/03 Python
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS