css 写出qq的对话框

CSS（层叠样式表）是我们网页设计中必不可少的一种语言，它能够让我们的网页更加漂亮、美观、统一。今天我们来学习如何使用CSS写出一个QQ聊天窗口的对话框。

.q-box {
      width: 500px;
      height: 400px;
      border: 1px solid #ccc;
}
.q-header {
      height: 30px;
      background-color: #3b5998;
      color: #fff;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
}
.q-content {
      height: 310px;
      padding: 10px;
      overflow-y: auto;
      background-color: #f5f5f5;
}
.q-input {
      border-top: 1px solid #ccc;
      height: 60px;
      padding: 10px;
      background-color: #f9f9f9;
}
.q-input textarea {
      width: 100%;
      height: 40px;
      resize: none;
      border: none;
      outline: none;
      line-height: 20px;
}
.q-input button {
      float: right;
      margin-top: 10px;
      width: 80px;
      height: 40px;
      color: #fff;
      background-color: #3b5998;
      border: none;
      cursor: pointer;
}
    

我们先定义一个整体的盒子，把它的宽度和高度设置成500px和400px，然后给它加上1像素的灰色实线边框。接着，我们来处理对话框的头部，给它的高度设置成30px，背景颜色设置成蓝色，文字颜色设置成白色，字体大小设置成14px，文字居中显示，并将行高设置成30px。

接下来，我们处理对话框的内容部分，把它的高度设置成310px，给它加上10px的内边距，设置滚动条并显示在Y轴方向上，将背景颜色设为浅灰色。

最后，我们设置对话框的输入框部分，将其高度设为60px，内边框设置为10px，添加一个灰色实线上边框。并在输入框下面添加一个发送按钮，将其背景颜色设为蓝色，颜色设为白色，将鼠标指针改为手型，文字设置为“发送”。

有了上面这些CSS代码，我们就能够很轻松地实现一个QQ聊天窗口的对话框了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！