对话框以及延伸的时间轴展示

第一个、简单的实现页面的对话框的样式

css代码如下:

<style>
        *{
            padding:0;
            margin:0;
        }
        .receiveMessage{
            border-radius:4px;
            background:#fffdfb;
            padding:50px 15px; 
            width:950px;
            margin:0 auto;
        }
        .receiveMessage>ul{
            width:100%;
            position:relative;
        }
        .receiveMessage>ul:before,
        .receiveMessage>ul:after{
            position: absolute;
            top: -23px;
            content: "";
            width: 2px;
            height: 100%;
            background: #ece3e5;
        }
        .receiveMessage ul li{
            position:relative;
            width:100%;
            margin-bottom:4%;
            list-style:none;
        }
        .messageTime>span{
            position: absolute;
            top: 3px;
            background: #FFFDFB;
            display: block;
            line-height: 40px;
        }
        .discripationContent{
            background: #f5f1f2;
            color: #8d7a7d;
            width: 200px;
            padding: 15px;
            margin-left: 45%;
            word-wrap: break-word;
        }
        .discripationPosition{
            position:relative;
        }
        .discripationPosition:before{
            content:'';
            position:absolute;
            top:-1px;
            width:20px;
            height:20px;
            background:#f5f1f2;    
            -webkit-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            transform:rotate(45deg);
        }
        .static{
            position: absolute;
            width: 73px;
            top: 6px;
            font-size: 12px;
        }
        .static p{
            margin:0;    
        }
        .static>span{
            color:#bcb1b3;
        }
        /*已接收短信*/
        .receveList .messageTime>span{
            left:14%; 
        }
        .receveList .discripationContent{
            margin-left:27%;   
        }
        .receveList .discripationPosition:before{
            left:-12%;
        }
        .receveList .static{
            text-align:left;
            left:52%;
        }
        .receiveMessage>ul:before{
            left: 19%;
        }
        .receiveMessage>ul:after{
            right: 23%;
        }
        /*已发送短信*/
        .sendMeassages .static{
            left: 36%;
            text-align: right;
        }
        .sendMeassages .discripationPosition:before{
            right: -23px;
        }
        .sendMeassages .messageTime>span{
            color:#a07530;
            right: 18%;
            z-index:20;
        }
        .sendMeassages .discripationContent,
        .sendMeassages .discripationPosition:before{
            color: #fff;
            background: #18cb46;
        }
        .sendMeassages .discripationPosition:before{
            box-shadow:none;
        }
    </style>

View Code

dom结构:

 1 <div class="receiveMessage">
 2         <ul>
 3             <li class="receveList">
 4                 <div class="messageTime">
 5                     <span>2016年07月20</span>
 6                     <div class="discripationContent">
 7                         <div class="discripationPosition">
 8                             手机回复
 9                         </div>
10                         <div class="static">
11                             <p class="red">已回复</p>
12                             <span>14:58</span>
13                         </div>
14                     </div>
15                 </div>
16             </li>
17             <li class="sendMeassages">
18                 <div class="messageTime">
19                     <span>2016年07月29</span>
20                     <div class="discripationContent">
21                         <div class="discripationPosition">
22                             回复短信发送
23                         </div>
24                         <div class="static">
25                             <p class="red">已发送</p>
26                             <span>19:19</span>
27                         </div>
28                     </div>
29                 </div>
30             </li>
31         </ul>
32     </div>

基本的效果如下:

第二个、时间轴的实现（在实现了页面的对话框的前提下，进行简单的扩展效果）

  1 <style>
  2         * {
  3             padding: 0;
  4             margin: 0;
  5         }
  6 
  7         .receiveMessage {
  8             border-radius: 4px;
  9             background: #fffdfb;
 10             padding: 50px 15px;
 11             width: 950px;
 12             margin: 0 auto;
 13         }
 14 
 15         .receiveMessage > ul {
 16             width: 100%;
 17             position: relative;
 18         }
 19 
 20         .receiveMessage > ul:before{
 21             position: absolute;
 22             top: -23px;
 23             content: "";
 24             width: 2px;
 25             height: 100%;
 26             background: #ece3e5;
 27             left: 50%;
 28         }
 29 
 30         .receiveMessage ul li {
 31             position: relative;
 32             width: 100%;
 33             padding-bottom: 4%;
 34             list-style: none;
 35         }
 36 
 37         .messageTime > span {
 38             position: absolute;
 39             top: 3px;
 40             background: #FFFDFB;
 41             display: block;
 42             line-height: 40px;
 43             left: 45%;
 44         }
 45 
 46         .discripationContent {
 47             background: #f5f1f2;
 48             color: #8d7a7d;
 49             width: 200px;
 50             padding: 15px;
 51             margin-left:19%;
 52             word-wrap: break-word;
 53         }
 54 
 55         .discripationPosition {
 56             position: relative;
 57         }
 58 
 59         .discripationPosition:before {
 60             content: '';
 61             position: absolute;
 62             top: -1px;
 63             width: 20px;
 64             height: 20px;
 65             background: #f5f1f2;
 66             -webkit-transform: rotate(45deg);
 67             -moz-transform: rotate(45deg);
 68             transform: rotate(45deg);
 69         }
 70 
 71         .static {
 72             position: absolute;
 73             width: 73px;
 74             top: 6px;
 75             font-size: 12px;
 76         }
 77 
 78         .static p {
 79             margin: 0;
 80             color:#333;
 81         }
 82 
 83         .static > span {
 84             color: #bcb1b3;
 85         }
 86         /*已接收短信*/
 87         .receveList .discripationContent {
 88             margin-left: 58%;
 89         }
 90 
 91         .receveList .discripationPosition:before {
 92             left: -12%;
 93         }
 94 
 95         .receveList .static {
 96             text-align: left;
 97             right:9%;
 98         }
 99         /*已发送短信*/
100         .sendMeassages .static {
101             left: 10%;
102             text-align: right;
103         }
104 
105         .sendMeassages .discripationPosition:before {
106             right: -23px;
107         }
108 
109         .sendMeassages .messageTime > span {
110             color: #a07530;
111             z-index: 20;
112         }
113 
114         .sendMeassages .discripationContent,
115         .sendMeassages .discripationPosition:before {
116             color: #fff;
117             background: #18cb46;
118         }
119 
120         .sendMeassages .discripationPosition:before {
121             box-shadow: none;
122         }
123     </style>

View Code

基本的效果图如下:

注释：同样的dom结构,就局部不相同的css代码就可以简单的吧一个以对话框形式的结果转变成为类似时间轴的东西展示在我们的眼前

相关阅读:
Codeforces Round #481 (Div. 3)题解
 陕西师范大学第七届程序设计竞赛网络同步赛题解
 Codeforces Round #479 (Div. 3)题解
 2018年北京信息科技大学第十届程序设计竞赛暨ACM选拔赛题解
 江西财经大学第一届程序设计竞赛题解
 2018年湘潭大学程序设计竞赛G又见斐波那契
 2018年长沙理工大学第十三届程序设计竞赛题解
 JDBC连接SQL server2014代码
 数据定义伪指令语句
 JDBC连接数据库
原文地址：https://www.cnblogs.com/liuhui-03/p/5750536.html