
新做一个模板:
```
body {
margin: 0;
height: 100vh;
/* 线性渐变背景 */
background: linear-gradient(to right, #6620FC , #f3e5f5);
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
position: absolute;
left: 10px; /* 距离左边10px */
top: 10px; /* 距离顶部10px */
width: 60px; /* 菜单宽度 */
display: flex;
flex-direction: column;
justify-content: flex-start; /* 改为从顶部开始排列 */
align-items: center;
padding: 10px 0;
color: white; /* 设置文字颜色为白色 */
gap: 40px; /* 减少菜单项之间的间距 */
}
.menu-item {
display: flex;
flex-direction: column;
align-items: center;
}
.menu-item svg {
fill: white; /* 设置图标颜色为白色 */
width: 32px;
height: 32px;
margin-bottom: 4px; /* 减少图标与文字之间的间距 */
}
.content-box {
position: absolute;
left: 80px; /* 距离左边80px */
top: 10px; /* 上边距10px */
bottom: 10px; /* 下边距10px */
right: 10px; /* 右边距10px */
background-color: white;
border-radius: 8px; /* 圆角 */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 增加阴影效果让盒子更突出 */
overflow: auto; /* 如果内容超出容器大小则显示滚动条 */
}
h1 {
text-align: center;
color: #4a148c;
padding: 20px; /* 根据需要添加内边距 */
}
欢迎来到nostrbook.com
```