123wys 发表于 2015-12-18 13:13:53

HTML/CSS生成的聊天对话效果（含代码）

HTML/CSS生成的聊天对话效果（含代码）

<div class="chatter">

<div class="chatter_pre_signup">
<input type="text" name="chatter_name" placeholder="Your name" class="chatter_field chatter_name" />
<input type="text" name="chatter_email" placeholder="Your email address" class="chatter_field chatter_email" />
<input type="submit" name="chatter_create_user" value="Start Chatting" class="chatter_btn chatter_create_user" />
</div>

<div class="chatter_post_signup">
    <div class="chatter_convo">
      
      <span class="chatter_msg_item chatter_msg_item_admin">
      <a href="" class="chatter_avatar"><img src="http://www.gbtags.com/gb/networks/avatars/1679dd15-8c8e-4c35-ae18-365c523562be.JPG" /></a>
      <strong class="chatter_name">李元芳</strong>Hello!</span>
      
      <span class="chatter_msg_item chatter_msg_item_user">
      <a href="" class="chatter_avatar"><img src="http://www.gbtags.com/gb/networks/avatars/1679dd15-8c8e-4c35-ae18-365c523562be.JPG" /></a>
      <strong class="chatter_name">李媛芳</strong>Oh hello. Who is this?</span>
      
      <span class="chatter_msg_item chatter_msg_item_admin">
      <a href="" class="chatter_avatar"><img src="http://www.gbtags.com/gb/networks/avatars/1679dd15-8c8e-4c35-ae18-365c523562be.JPG" /></a>
      <strong class="chatter_name">李元芳</strong>My name is Luke. How can I help you today? :)</span>
      
      <span class="chatter_msg_item chatter_msg_item_user">
      <a href="" class="chatter_avatar"><img src="http://www.gbtags.com/gb/networks/avatars/1679dd15-8c8e-4c35-ae18-365c523562be.JPG" /></a>
      <strong class="chatter_name">李媛芳</strong>Just saying hello!</span>
      
      <span class="chatter_msg_item chatter_msg_item_admin">
      <a href="" class="chatter_avatar"><img src="http://www.gbtags.com/gb/networks/avatars/1679dd15-8c8e-4c35-ae18-365c523562be.JPG" /></a>
      <strong class="chatter_name">李元芳</strong>Oh alright, Hello then Jack, you pirate, you.</span>
      
      <span class="chatter_msg_item chatter_msg_item_admin">
      <a href="" class="chatter_avatar"><img src="http://www.gbtags.com/gb/networks/avatars/1679dd15-8c8e-4c35-ae18-365c523562be.JPG" /></a>
      <strong class="chatter_name">李元芳</strong>Hello!</span>
      
      <span class="chatter_msg_item chatter_msg_item_user">
      <a href="" class="chatter_avatar"><img src="http://www.gbtags.com/gb/networks/avatars/1679dd15-8c8e-4c35-ae18-365c523562be.JPG" /></a>
      <strong class="chatter_name">李媛芳</strong>Oh hello. Who is this?</span>
      
      <span class="chatter_msg_item chatter_msg_item_admin">
      <a href="" class="chatter_avatar"><img src="http://www.gbtags.com/gb/networks/avatars/1679dd15-8c8e-4c35-ae18-365c523562be.JPG" /></a>
      <strong class="chatter_name">李元芳</strong>My name is Luke. How can I help you today? :)</span>
      
      <span class="chatter_msg_item chatter_msg_item_user">
      <a href="" class="chatter_avatar"><img src="http://www.gbtags.com/gb/networks/avatars/1679dd15-8c8e-4c35-ae18-365c523562be.JPG" /></a>
      <strong class="chatter_name">李媛芳</strong>Just saying hello!</span>
      
      <span class="chatter_msg_item chatter_msg_item_admin">
      <a href="" class="chatter_avatar"><img src="http://www.gbtags.com/gb/networks/avatars/1679dd15-8c8e-4c35-ae18-365c523562be.JPG" /></a>
      <strong class="chatter_name">李元芳</strong>Oh alright, Hello then Jack, you pirate, you.</span>
      
    </div>
    <textarea name="chatter_message" placeholder="输入文字或者心情..." class="chatter_field chatter_message"></textarea>
</div>

</div>

zhuyilong32 发表于 2015-12-18 13:13:53

这个厉害了，UI是自己定制？
页: [1]
查看完整版本: HTML/CSS生成的聊天对话效果（含代码）