标签：color html 聊天 pywebio 10px div 0px border 气泡

from pywebio import *
from pywebio.output import *

css = """body{
      background-color: #ebebeb;
      font-family: -apple-system;
      font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
    }
    .chat-sender{
      clear:both;
      font-size: 80%;
    }
    .chat-sender div:nth-of-type(1){
      float: left;
    }
    .chat-sender div:nth-of-type(2){
      margin: 0 50px 2px 50px;
      padding: 0px;
      color: #848484;
      font-size: 70%;
      text-align: left;
    }
    .chat-sender div:nth-of-type(3){
      background-color: white;
      /*float: left;*/
      margin: 0 50px 10px 50px;
      padding: 10px 10px 10px 10px;
      border-radius:7px;
      text-indent: -12px;
    }

    .chat-receiver{
      clear:both;
      font-size: 80%;
    }
    .chat-receiver div:nth-of-type(1){
      float: right;
    }
    .chat-receiver div:nth-of-type(2){
      margin: 0px 50px 2px 50px;
      padding: 0px;
      color: #848484;
      font-size: 70%;
      text-align: right;
    }
    .chat-receiver div:nth-of-type(3){
      /*float:right;*/
      background-color: #b2e281;
      margin: 0px 50px 10px 50px;
      padding: 10px 10px 10px 10px;
      border-radius:7px;
    }

    .chat-receiver div:first-child img,
    .chat-sender div:first-child img{
      width: 40px;
      height: 40px;
      /*border-radius: 10%;*/
    }

    .chat-left_triangle{
      height: 0px;
      width: 0px;
      border-width: 6px;
      border-style: solid;
      border-color: transparent white transparent transparent;
      position: relative;
      left: -22px;
      top: 3px;
    }
    .chat-right_triangle{
      height: 0px;
      width: 0px;
      border-width: 6px;
      border-style: solid;
      border-color: transparent transparent transparent #b2e281;
      position: relative;
      right:-22px;
      top:3px;
    }

    .chat-notice{
      clear: both;
      font-size: 70%;
      color: white;
      text-align: center;
      margin-top: 15px;
      margin-bottom: 15px;
    }
    .chat-notice span{
      background-color: #cecece;
      line-height: 25px;
      border-radius: 5px;
      padding: 5px 10px;

    }"""

config(title="聊天记录", css_style=css)
html_left = """
<!-- Left -->
<div class="chat-sender">
  <div><img src="static/Accent_4_discrete.png"></div>
  <div>{}</div>
  <div>
    <div class="chat-left_triangle"></div>
    <span>{}</span>
  </div>
</div>
"""

html_right = """
<!-- Right -->
<div class="chat-receiver">
  <div><img src="static/Accent_3_discrete.png"></div>
  <div>{}</div>
  <div>
    <div class="chat-right_triangle"></div>
    <span> {}</span>
  </div>
</div>
"""


def main():
    # 首先要区分说话对对象

    liao_ji_lu = [["name", "内容"], ["name", "内容"]] * 100
    html_list = []

    for i, content in enumerate(liao_ji_lu):

        if i + 1 == len(liao_ji_lu):
            break
        if content[0] == liao_ji_lu[i + 1][0]:
            html_list.append(put_html(html_left.format(content[0], content[1])))
        else:
            html_list.append(put_html(html_right.format(content[0], content[1])))
    put_column(html_list)


if __name__ == '__main__':
    start_server(applications=main, port=8888, static_dir="./color_list_png",auto_open_webbrowser=True)

from pywebio import *
from pywebio.output import *

css="""
.sender{
    clear:both;
}
.sender div:nth-of-type(1){
    float: left;
}
.sender div:nth-of-type(2){
    background-color: aquamarine;
    float: left;
    margin: 0 20px 10px 15px;
    padding: 10px 10px 10px 0px;
    border-radius:7px;
}

.receiver div:first-child img,
.sender div:first-child img{
    width:50px;
    height: 50px;
}

.receiver{
    clear:both;
}
.receiver div:nth-child(1){
    float: right;
}
.receiver div:nth-of-type(2){
    float:right;
    background-color: gold;
    margin: 0 10px 10px 20px;
    padding: 10px 0px 10px 10px;
    border-radius:7px;
}

.left_triangle{
    height:0px;  
    width:0px;  
    border-width:8px;  
    border-style:solid;  
    border-color:transparent aquamarine transparent transparent;  
    position: relative;
    left:-16px;
    top:3px;
}

.right_triangle{
    height:0px;  
    width:0px;  
    border-width:8px;  
    border-style:solid;  
    border-color:transparent transparent transparent gold;  
    position: relative;
    right:-16px;
    top:3px;
}
"""
html_right="""


<!-- Right -->
  <div class="receiver">
      <div>
          <img src="{}">
      </div>
   <div>
        <div class="right_triangle"></div>
        <span> {} </span>
   </div>
  </div>  
"""
html_left="""
<!-- Left -->
<div class="sender">
      <div>
          <img src="{}">
      </div>
  <div>
      <div class="left_triangle"></div>
      <span> {}</span>
   </div>
  </div>
"""
config(title="聊天记录", css_style=css)

def main():
    # 首先要区分说话对对象

    liao_ji_lu = [["static/Acton_3_discrete.png", "内容"], ["static/Acton_3_discrete.png", "内容"]] * 100
    html_list = []

    for i, content in enumerate(liao_ji_lu):

        if i + 1 == len(liao_ji_lu):
            break
        if content[0] == liao_ji_lu[i + 1][0]:
            html_list.append(put_html(html_left.format(content[0], content[1])))
        else:
            html_list.append(put_html(html_right.format(content[0], content[1])))
    put_column(html_list)


if __name__ == '__main__':
    start_server(applications=main, port=8888, static_dir="./color_list_png",auto_open_webbrowser=True)

标签：color,html,聊天,pywebio,10px,div,0px,border,气泡
来源： https://blog.csdn.net/weixin_32759777/article/details/123064498

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。