HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>聊天室页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
.container {
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
.col {
width: 20%;
padding: 10px;
background-color: #f2f2f2;
box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
.message {
width: 80%;
padding: 10px;
background-color: #fff;
box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
font-size: 16px;
margin-bottom: 20px;
</style>
</head>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col”>
<div class=”message”>
<p>这里是文本内容。</p>
</div>
</div>
<div class=”col”>
<div class=”message”>
<p>这里是另一个文本内容。</p>
</div>
</div>
</div>
</div>
</body>
</html>
在这个样例中，大家使用了Flexbox布局来创建两个水平排列的段落和一个垂直排列的文本内容。段落和文本内容都使用了阴影效果，并设置了不同大小的字体。CSS布局可以帮助网页设计师创建更加美观、易于阅读和使用的网站。