對話框以及延伸的時間軸展現

第一個、簡單的實現頁面的對話框的樣式

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代碼就能夠簡單的吧一個以對話框形式的結果轉變成爲相似時間軸的東西展現在咱們的眼前