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 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
关于js类的定义
Jun 28 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
微信小程序实现留言板功能
Nov 02 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 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 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
PHP实现懒加载的方法
2015/03/07 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
vue组件实例解析
2017/01/10 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
使用python实现BLAST
2018/02/12 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
python如何将多个PDF进行合并
2019/08/13 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
工业设计专业个人求职信范文
2013/12/28 职场文书
2014年计生工作总结
2014/11/21 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python