寒假17

以下是我做的一个HTML页面。

标题

退出登录

姓名
年龄
图像
密码
邮箱
日期
男 女
1 请选择 1 2 3 4

爱好: 篮球 足球


描述
请输入文本

员工信息表

姓名	性别	头像	职位	入职日期	操作	编辑	删除

       <script>
           // 示例数据
           const employees = [
               { name: '张三', gender: '男', avatar: 'https://via.placeholder.com/50', position: '班主任', hireDate: '2020-01-01' }, 
               { name: '李四', gender: '女', avatar: 'https://via.placeholder.com/50', position: '讲师', hireDate: '2019-05-15' }, 
               { name: '王五', gender: '男', avatar: 'https://via.placeholder.com/50', position: '学工主任', hireDate: '2021-11-22' } 
           ];
   
           // 动态插入数据到表格
           const tableBody = document.getElementById('employeeTableBody');
           employees.forEach(employee => {
               const row = document.createElement('tr');
               row.innerHTML = `
                   <td>${employee.name}</td>  <!-- 普通单元格 -->
                   <td>${employee.gender}</td> 
                   <td><img src="${employee.avatar}" alt="${employee.name}的头像"></td>
                   <td>${employee.position}</td>
                   <td>${employee.hireDate}</td>
                   <td><button>操作</button></td>
                   <td><button>编辑</button></td>
                   <td><button>删除</button></td>
               `;
               tableBody.appendChild(row);
           });
       </script>
       <!-- 页脚 -->
           <footer>
            <p>&copy; 2025 12345. 保留所有权利。</p> 
        </footer>

下面是css nav { background-color: gray; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; }

/* 设置标题样式 */
h1 {
padding: 4px 8px ;
background-color: rgb(110, 168, 105);
margin: 0;
color: white;
font-family: "楷体";
}

/* 设置退出登录链接样式 */
a {
padding: 4px 8px ;
background-color: rgb(80, 99, 212);
color: white;
text-decoration: none;
}

/* 鼠标悬停时的链接样式 /
a:hover {
text-decoration: underline;
}
body { / 页面背景样式 /
background-color: #f4f4f4; / 设置背景颜色 /
font-family: Arial, sans-serif; / 设置字体 /
margin: 20px; / 设置外边距 /
}
table { / 表格样式 /
width: 100%; / 设置表格宽度 /
border-collapse: collapse; / 合并表格边框 /
margin-top: 20px; / 设置上边距 /
}
th, td { / 单元格样式 /
border: 1px solid #ddd; / 设置边框 /
padding: 8px; / 设置内边距 /
text-align: left; / 文本对齐方式 /
text-align: center; / 文本对齐方式 /
}
th { / 表头样式 /
background-color: #f2f2f2; / 设置表头背景颜色 /
}
img { / 图片样式 */
width: 50px;
height: 50px;
border-radius: 50%;
}

bcd{

display: flex;
padding: 10px 20px;
justify-content: center;
background-color: rgb(110, 168, 105);
margin: 0;
color: white;
font-family: "楷体";

}
footer{
background-color: #808080;
color: white;
text-align: center;
padding: 10px 0;
}
JS

const employees = [
{ name: '张三', gender: '男', avatar: 'https://via.placeholder.com/50', position: '班主任', hireDate: '2020-01-01' },
{ name: '李四', gender: '女', avatar: 'https://via.placeholder.com/50', position: '讲师', hireDate: '2019-05-15' },
{ name: '王五', gender: '男', avatar: 'https://via.placeholder.com/50', position: '学工主任', hireDate: '2021-11-22' }
];

// 动态插入数据到表格
const tableBody = document.getElementById('employeeTableBody');
employees.forEach(employee => {
const row = document.createElement('tr');
row.innerHTML = <td>${employee.name}</td> <!-- 普通单元格 --> <td>${employee.gender}</td> <td><img src="${employee.avatar}" alt="${employee.name}的头像"></td> <td>${employee.position}</td> <td>${employee.hireDate}</td> <td><button>操作</button></td> <td><button>编辑</button></td> <td><button>删除</button></td> ;
tableBody.appendChild(row);
});