以下是一个简单的手机社交网站模板,可以根据具体需求进行修改:
HTML:
```html



t
t
t
t


t

tt

ttt
tt

tt

社交网站模板

tt
t

t

tt

ttt

欢迎来到社交网站模板

ttt

这里是一个展示用户信息和个人主页的页面。

tt

tt

ttt

聊天室

ttt

在这里,用户可以和其他人进行聊天和互动。

tt

tt

ttt

用户列表

ttt

tttt
• 用户1

tttt
• 用户2

tttt
• 用户3

tttt
• 用户4

tttt
• 用户5

ttt

tt

t

t


```
CSS:
```css
body {
tbackground-color: #f2f2f2;
tfont-family: Arial, sans-serif;
}
header {
tbackground-color: #1a1a1a;
tcolor: #fff;
tpadding: 20px;
ttext-align: center;
}
nav ul {
tlist-style: none;
tmargin: 0;
tpadding: 0;
}
nav li {
tdisplay: inline-block;
tmargin-right: 10px;
}
nav a {
tcolor: #1a1a1a;
ttext-decoration: none;
}
main {
tdisplay: flex;
tflex-wrap: wrap;
}
section {
tmargin-bottom: 20px;
}
.content {
tmax-width: 80%;
tpadding: 20px;
tbackground-color: #fff;
tborder-radius: 5px;
tbox-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.chat {
tmax-width: 40%;
tpadding: 20px;
tbackground-color: #fff;
tborder-radius: 5px;
tbox-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.user-list {
tmax-width: 40%;
tpadding: 20px;
tbackground-color: #fff;
tborder-radius: 5px;
tbox-shadow: 0 0 10px rgba(0,0,0,0.2);
}
footer {
tbackground-color: #1a1a1a;
tcolor: #fff;
tpadding: 20px;
ttext-align: center;
}
/* 页面顶部样式 */
header h1 {
tcolor: #1a1a1a;
tfont-size: 24px;
ttext-align: center;
}
/* 页面底部样式 */
footer {
tbackground-color: #1a1a1a;
tcolor: #fff;
tpadding: 20px;
ttext-align: center;
}
```
这个模板包括一个头部导航栏、一个主体部分以及一个聊天室和一个用户列表。你可以根据需要对模板进行修改,添加更多的功能和细节。