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

时间：2021-05-28

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

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://</title><style type="text/css">*{margin:0;padding:0;-webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(210,210,210,0.35); -webkit-user-select: none; }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>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章