HTML5实现留言和回复页面样式

具体就不做详细讲解了，直接上代码：

<!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>

直接复制代码到编辑工具里，就能看到效果，希望能够帮助到大家。

赞 (0)

相关推荐

  • FLASH与ASP通信入门教程——做真正属于自己的留言本第1/5页

    经常有人问我FLASH留言板的制作方法,无奈这东西一句两句没办法说清楚,于是就萌发了写教程的想法.可后来又一想,授人以鱼,不如授人以渔,还不如集中精力好好讲将FLASH与ASP的通讯原理,原理通了,具体项目就可以自由发挥了. 我这个教程面向初级群体,在开始教程之前,我假设你已经具备FLASH操作基础知识,了解IIS配置以及运行环境.尽管FLASH与ASP通信方式有很多,但这篇教程中我选择使用LoadVars类,一因为LoadVars类容易掌握,易于讲解:二是因为它不牵扯太多其他方面的知识.另外,

  • php简单的留言板与回复功能具体实现

    php简单的留言板与回复功能具体实现

    在网上找了这方面的教程 但是基本就是没有人说什么 然后在某一天看见一个PHP程序设计出了一张类似这样的数据库设计图之后就有了很多领悟!下面是数据库的结构图 下面我们就来继续一下介绍 id                        这个算是父Id 可以通过这个id来查询 在这个id下是否有子id 同时也可以记录这个是那条留言的id son_id                    这个是子id 然后通过这个id 可以找到相对应的父id   news_id                  

  • 一个简单的PHP&MYSQL留言板源码第1/2页

    初学PHP,花了几晚上写了个留言板,请高手指正 p.s.我的空间不支持PHP,不能提供演示了T_T 数据库结构:(库名:lyb) 表一: admin 字段: id(int11)   name(varchvr)   password(varchvr) 表二: lo 字段: id(int11)   username(varchvr)  sex(varchvr)  qq(varchvr)  email(varchvr)  info(text)  ip(varchvr)  submit_time(dat

  • 基于Kubernetes和Docke实现留言簿案例

    基于Kubernetes和Docke实现留言簿案例

    一.介绍 本案例基于Kubernetes和Docker,其中包括 1.web前端 2.redis master 3.redis slave 其中web前端通过javascript redis api和redis master交互 kubernetes体系架构 二.配置 0.先决条件 Kubernetes 集群 1.启动redis master 使用replication controller确保只有一个pod在运行(当某个节点down了,rc会在另一个健康的node启动redis master)

  • Smarty结合Ajax实现无刷新留言本实例

    看了标题你也许要说,留言本,很基本的东东啊!谁不会啊,还要用Smarty,这不找累吗?别急,我要表达的是一种编程的思想和结构,而不是证明我做的东西多有意义,通过它相信对初学者学习Smarty和ajax有些启发.原本用ajax做的,可惜始终调试不成功,只好用手写JS来弄了,不过不要紧,还是有一定价值的.站点结构大家下了源代码自己看,代码不长,应该不会看烦^_^,听我慢慢道来.     现在都PHP5了OO(面向对象)很流行了都,这里也不错过,首先来看下我们用OO来实现数据库操作和连接:[php]<

  • php开发留言板的CRUD(增，删，改，查)操作

    php开发留言板的CRUD(增，删，改，查)操作

    项目结构: 添加页面:                                说明:这里只注重操作,对界面的美工没有下工夫,希望大家理解...... 列表页面: 修改页面: 项目中所需的sql: 复制代码 代码如下: create database form; use form; CREATE TABLE `message` ( `id` tinyint(1) NOT NULL auto_increment, `user` varchar(25) NOT NULL, `title` va

  • 来自经典的打造简单的PHP&MYSQL留言板第1/4页

    表一: admin 字段: id(int11)   name(varchvr)   password(varchvr) 表二: lo 字段: id(int11)   username(varchvr)  sex(varchvr)  qq(varchvr)  email(varchvr)  info(text)  ip(varchvr)  submit_time(datetime) 1.conn.php(连接数据库文件) 复制代码 代码如下: <?php  mysql_connect("lo

  • ThinkPHP之用户注册登录留言完整实例

    本文以实例形式讲述ThinkPHP实现的包括用户的注册.登录以及留言等功能,这里需要大家注意的是,在存在用户模型的情况下实例化一个用户类的时候使用D方法来实现.   UserActiion.class.php页面: <?php class UserAction extends Action{ public function add(){ $user = D("user"); $user->create(); $result = $user->add(); if($re

  • 简单的PHP留言本实例代码

    config.php 复制代码 代码如下: <?php $conn = @mysql_connect("localhost","root","") or die("数据库连接出错!"); mysql_select_db("gb",$conn); mysql_query("set names 'GBK'"); ?> add.php 复制代码 代码如下: <?php inc

  • 超级简单的php+mysql留言本源码

    共3个文件 IncDB.php数据库连接 index.php首页 InsetToDB.php数据库操作 数据库lguestbook里面建表 复制代码 代码如下: CREATE TABLE `intd` ( `id` int(11) NOT NULL auto_increment, `name` varchar(255) character set utf8 collate utf8_bin NOT NULL, `text` text character set utf8 collate utf8

随机推荐