h5-视频播放器实例-css代码

body,html{

    height: 100%;

    overflow: hidden;

}

#wrap{

    height: 100%;

    overflow: hidden;

    background: #383838;

    font-size: 0;

}

.control{

    position: relative;

    min-width: 600px;

    height: 25px;

    background: #2A2A2A;

}

.btns{

    position: absolute;

    left: 0;

    top: 0;

    width: 55px;

    height: 25px;

    text-align: center;

}

.btns span{

    display: inline-block;

    width: 9px;

    height: 11px;

    background: url('/音视频/resource/img/icon.PNG') no-repeat;

    margin-top: 7px;

}

.btns span:nth-child(1){

    background-position: -36px -52px;

    margin-right: 10px;

}

.btns span:nth-child(1).active{

   

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的基于HTML5CSS3的聊天窗口示例,您可以在此基础上进行修改和扩展: HTML部分: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聊天室</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="chat"> <div class="messages"> <div class="message received"> <div class="avatar"></div> <div class="text">你好!</div> </div> <div class="message sent"> <div class="avatar"></div> <div class="text">你好!</div> </div> <div class="message received"> <div class="avatar"></div> <div class="text">最近怎么样?</div> </div> </div> <div class="input"> <input type="text" placeholder="请输入消息..."> <button>发送</button> </div> </div> </body> </html> ``` CSS部分: ```css .chat { width: 400px; height: 500px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; } .messages { flex: 1; padding: 10px; overflow-y: scroll; } .message { display: flex; align-items: center; margin-bottom: 10px; } .received { flex-direction: row; } .sent { flex-direction: row-reverse; } .avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; } .text { background: #eee; padding: 10px; border-radius: 10px; max-width: 70%; word-wrap: break-word; } .input { display: flex; align-items: center; padding: 10px; } input { flex: 1; height: 40px; padding: 0 10px; border-radius: 20px; border: none; outline: none; } button { height: 40px; width: 60px; background: #0084ff; color: #fff; border: none; outline: none; border-radius: 20px; margin-left: 10px; cursor: pointer; } ``` 此聊天窗口使用flex布局实现,包含消息列表和输入框两个部分,消息列表使用overflow-y: scroll实现滚动效果,消息分为接收和发送两种类型。您可以通过修改CSS样式来自定义聊天窗口的外观和布局。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值