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 迁移目录
Dec 18 Javascript
在模板页面的js使用办法
Apr 01 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
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获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
jquery简单体验
2007/01/10 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
浅析Ajax语法
2016/12/05 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
javascript 封装Date日期类实例详解
2017/05/28 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python+django实现文件上传
2016/01/17 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python中整数的缓存机制讲解
2019/02/16 Python
在python3中实现更新界面
2020/02/21 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
会议开场欢迎词
2014/01/15 职场文书
接受捐赠答谢词
2014/01/27 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
投资申请报告
2015/05/19 职场文书
家长会感言
2015/08/01 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript