<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 100%;display: flex;">
<!-- 左边 -->
<div style="height: 700px;flex: 1;display: flex;flex-direction: column;list-style: none;">
<li style="flex: 1;background-color: rgb(90, 4, 76);width: 100%;"></li>
<li
style="flex: 1;background-color: rgb(233, 81, 208);width: 100%;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #fff;">
菜单一</li>
<li
style="flex: 1;background-color: rgb(233, 81, 195);width: 100%;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #fff;">
菜单二</li>
<li
style="flex: 1;background-color: rgb(233, 81, 195);width: 100%;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #fff;">
菜单三</li>
<li
style="flex: 1;background-color: rgb(233, 81, 195);width: 100%;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #fff;">
菜单四</li>
<li
style="flex: 1;background-color: rgb(233, 81, 195);width: 100%;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #fff;">
菜单五</li>
<li
style="flex: 1;background-color: rgb(233, 81, 195);width: 100%;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #fff;">
菜单六</li>
<li
style="flex: 1;background-color: rgb(233, 81, 195);width: 100%;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #fff;">
菜单七</li>
<li
style="flex: 1;background-color: rgb(233, 81, 195);width: 100%;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #fff;">
菜单八</li>
<li
style="flex: 1;background-color: rgb(233, 81, 195);width: 100%;display: flex;align-items: center;justify-content: center;">
菜单九</li>
<li style="flex: 1;background-color: rgb(90, 4, 76);width: 100%;"></li>
</div>
<!-- 右边 -->
<div style="height: 700px;flex: 7;display: flex;flex-direction: column;">
<div style="flex: 1;background-color: rgb(233, 81, 195);display: flex;flex-direction: row-reverse;">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F00%2F4c%2Fa0%2F004ca0e4325cc5627be6f86db0452e4e.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648808287&t=7e64ed09412ed4bf4c022e228612feb1"
alt="" style="width: 40px;height: 40px;border-radius: 25px;margin: 12px 15px 0 0 ;" />
</div>
<div style="flex: 10;">
<div style="display: inline-block;margin: 40px 0 0 40px;">
<b>姓名</b>
<input type="text" size="10px" style="height: 20px;margin: 0 5px 0 5px;">
<button
style="background-color: rgb(238, 69, 69);padding: 5px 25px;border: none;border-radius: 5px;">搜索</button>
</div>
<div style="border: 1px solid red;margin: 20px 0 0 40px;width: 90%;">
<table border="1" cellspacing="0"
style="width: 100%;height: 500px;text-align: center;border-collapse: collapse;">
<thead>
<tr height="40">
<th width="8%">ID</th>
<th width="8%">姓名</th>
<th width="8%">年龄</th>
<th width="8%">爱好</th>
<th width="8%">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>李四</td>
<td>18</td>
<td>打篮球</td>
<td>
<button
style="padding: 2px 15px;background-color: rgb(82, 118, 219);border: none;border-radius: 5px;margin-right: 10px;">编辑</button>
<button
style="padding: 2px 15px;background-color: rgb(124, 31, 7);border: none;border-radius: 5px;">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>18</td>
<td>打篮球</td>
<td>
<button
style="padding: 2px 15px;background-color: rgb(82, 118, 219);border: none;border-radius: 5px;margin-right: 10px;">编辑</button>
<button
style="padding: 2px 15px;background-color: rgb(124, 31, 7);border: none;border-radius: 5px;">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>18</td>
<td>吃饭</td>
<td>
<button
style="padding: 2px 15px;background-color: rgb(82, 118, 219);border: none;border-radius: 5px;margin-right: 10px;">编辑</button>
<button
style="padding: 2px 15px;background-color: rgb(124, 31, 7);border: none;border-radius: 5px;">删除</button>
</td>
</tr>
<tr>
<td>4</td>
<td>李四</td>
<td>18</td>
<td>唱歌</td>
<td>
<button
style="padding: 2px 15px;background-color: rgb(82, 118, 219);border: none;border-radius: 5px;margin-right: 10px;">编辑</button>
<button
style="padding: 2px 15px;background-color: rgb(124, 31, 7);border: none;border-radius: 5px;">删除</button>
</td>
</tr>
<tr>
<td>5</td>
<td>李四</td>
<td>18</td>
<td>踢足球</td>
<td>
<button
style="padding: 2px 15px;background-color: rgb(82, 118, 219);border: none;border-radius: 5px;margin-right: 10px;">编辑</button>
<button
style="padding: 2px 15px;background-color: rgb(124, 31, 7);border: none;border-radius: 5px;">删除</button>
</td>
</tr>
<tr>
<td>6</td>
<td>李四</td>
<td>18</td>
<td>打篮球</td>
<td>
<button
style="padding: 2px 15px;background-color: rgb(82, 118, 219);border: none;border-radius: 5px;margin-right: 10px;">编辑</button>
<button
style="padding: 2px 15px;background-color: rgb(124, 31, 7);border: none;border-radius: 5px;">删除</button>
</td>
</tr>
<tr>
<td>7</td>
<td>李四</td>
<td>18</td>
<td>打篮球唱歌</td>
<td>
<button
style="padding: 2px 15px;background-color: rgb(82, 118, 219);border: none;border-radius: 5px;margin-right: 10px;">编辑</button>
<button
style="padding: 2px 15px;background-color: rgb(124, 31, 7);border: none;border-radius: 5px;">删除</button>
</td>
</tr>
<tr>
<td>8</td>
<td>李四</td>
<td>18</td>
<td>吃饭</td>
<td>
<button
style="padding: 2px 15px;background-color: rgb(82, 118, 219);border: none;border-radius: 5px;margin-right: 10px;">编辑</button>
<button
style="padding: 2px 15px;background-color: rgb(124, 31, 7);border: none;border-radius: 5px;">删除</button>
</td>
</tr>
<tr>
<td>9</td>
<td>李四</td>
<td>18</td>
<td>吃饭</td>
<td>
<button
style="padding: 2px 15px;background-color: rgb(82, 118, 219);border: none;border-radius: 5px;margin-right: 10px;">编辑</button>
<button
style="padding: 2px 15px;background-color: rgb(124, 31, 7);border: none;border-radius: 5px;">删除</button>
</td>
</tr>
<tr>
<td>10</td>
<td>李四</td>
<td>18</td>
<td>吃饭</td>
<td>
<button
style="padding: 2px 15px;background-color: rgb(82, 118, 219);border: none;border-radius: 5px;margin-right: 10px;">编辑</button>
<button
style="padding: 2px 15px;background-color: rgb(124, 31, 7);border: none;border-radius: 5px;">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
