在写前端页面是,写出来的格式非常不整齐,看着很别扭,这时就可以使用css样式来调整。
我是将代码交给ai,让它帮忙生成样式顺便学习
其中有应用到设置背景图片
.content-area {flex: 1;overflow: auto;margin-left: 0px; /* 确保内容区域在左侧菜单的右侧 */background-color: #f0f2f5; /* 添加背景色以便观察 */}
还有调整间距大小等
.home-container {width: 100%;height: 100vh; /* 设置高度为视口高度 */background-image: url('imgs/23.png'); /* 替换为你的背景图片路径 */background-size: 100% ; /* 背景图片覆盖整个容器 */background-position: center; /* 背景图片居中 */background-repeat: no-repeat; /* 背景图片不重复 */display: flex;justify-content: center;align-items: center;flex-direction: column;color: #fff; /* 文字颜色 */text-align: center;}.home-content {background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */padding: 20px;border-radius: 10px; /* 圆角边框 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */}