1.css的相关知识
（1）css的作用：美化并提供更好的管理方法。
（2）css的代码可通过style属性、style标签、link标签外链实现。
（3）选择器常用id、class、父子、标签。
（4）样式是由名字：词组成，样式之间用；隔开，一个选择器可以跟多个样式。
css学习链接：http://www.w3school.com.cn/css/css_jianjie.asp
2.使用css简单美化后的页面的页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title>留言本</title>
<style>
.warp{
width:600px;
margin:0px auto;
}
.add{overflow: hidden;}
.add .content{
width:598px;60
margin:0px;
padding:0px;
}
.add .user{
float:left;
}
.add .btn{
float:right;
}
.msg{margin:20px 0px;background: #ccc; padding:5px;}
.msg .info{overflow: hidden;}
.msg .user{float:left;color:blue;}
.msg .time{float:right;color:#999;}
.msg .content{width:100%;}
</style>
</head>
<body>
<!--发表留言内容-->
<div class='warp'>
<div class='add'>
<textarea class='content' cols='50' rows='5'></textarea>
<input class='user' type='text'/>
<input class='btn' type='submit' value='发表留言'/>
</div>
<!--查看留言内容-->
<div class='msg'>
<div class='info'>
<span class='user'>用户名</span>
<span class='time'>2017-1-1 11:11:11</span>
</div>
<div class='content'>
我是留言内容。 我是留言内容。 我是留言内容。 我是留言内容。
</div>
</div>
<div class='msg'>
<div class='info'>
<span class='user'>用户名</span>
<span class='time'>2017-1-1 11:11:11</span>
</div>
<div class='content'>
我是留言内容。 我是留言内容。 我是留言内容。 我是留言内容。
</div>
</div>
<div class='msg'>
<div class='info'>
<span class='user'>用户名</span>
<span class='time'>2017-1-1 11:11:11</span>
</div>
<div class='content'>
我是留言内容。 我是留言内容。 我是留言内容。 我是留言内容。
</div>
</div>
</div>
</body>
</html>
3.css简单美化后的页面
image
