私藏前端八股收集【CSS篇】

以下是一个简单的CSS示例，演示如何使用Flexbox布局创建一个八股收集的表单界面：

/* 基本的CSS重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
 
/* 头部样式 */
.stock-collector-header {
    text-align: center;
    padding: 20px;
    color: #333;
    background-color: #e6e6e6;
}
 
/* 主要内容区样式 */
.stock-collector-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}
 
/* 输入框样式 */
.stock-input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
}
 
/* 提交按钮样式 */
.stock-submit {
    background-color: #5cb85c;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
 
.stock-submit:hover {
    background-color: #449d44;
}

这段CSS代码为一个简单的八股收集表单定义了基本的布局和样式。它使用Flexbox布局来创建一个响应式的界面，其中包含一个头部、主要内容区和一个用于提交数据的表单。输入框和按钮都有合适的间距，并且使用了简单的边框和背景色来增强表单的交互感。