Node聊天程序实例05：index.html和style.css

weixin_30650039

于 2016-06-23 19:31:00 发布

阅读量92

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/vousiu/p/Node_ChatApp_05.html

本文介绍了基于Node.js的聊天应用程序的前端布局设计，包括HTML结构和CSS样式设置，旨在为用户提供清晰直观的交互界面。

作者：vousiu

出处：http://www.cnblogs.com/vousiu

本实例参考自Mike Cantelon等人的《Node.js in Action》一书。

index.html

style.css

body {

  padding: 50px;

  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;

}

 

a {

  color: #00B7FF;

}

 

#content {

  width: 800px;

  margin-left: auto;

  margin-right: auto;

}

 

#room {

  background-color: #ddd;

  margin-bottom: lem;

}

 

#messages {

  width: 690px;

  height: 300px;

  overflow: auto;

  background-color: #eee;

  margin-bottom: 1em;

  margin-right: 10px;

}

 

#room-list {

  float: right;

  width: 100px;

  height: 300px;

  overflow: auto;

}

 

#room-list div {

  border-bottom: 1px solid #eee;

}

 

#room-list div:hover {

  background-color: #ddd;

}

 

#send-message {

  width: 700px;

  margin-bottom: 1em;

  margin-right: 1em;

}

 

#help {

  font: 10px "Lucida Grande", Helvetica, Arial, sans-serif;

}