找一个人弄一下表格。
要有导航栏，搜索框加下拉菜单，导航栏的宽为：1400px,高度为150px，导航栏左侧的字为成绩表，右侧为横向无序列表，列表项1至列表项7分别为：成绩管理，学籍管理，学科管理，题库管理，考试公告信息管理，办事指引，规章制度。
私信发具体实现图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>成绩管理系统</title>
<style>
.navbar {
width: 1400px;
height: 150px;
background-color: #eee;
}
.navbar h1 {
float: left;
margin-left: 50px;
margin-top: 50px;
font-size: 36px;
font-weight: bold;
}
.navbar ul {
float: right;
margin-right: 50px;
margin-top: 80px;
list-style: none;
display: flex;
}
.navbar li {
margin-left: 20px;
font-size: 24px;
font-weight: bold;
}
.navbar li a {
color: #333;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.navbar li a:hover {
color: #007bff;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
min-width: 160px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
color: #333;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div class="navbar">
<h1>成绩表</h1>
<ul>
<li><a href="#">成绩管理</a></li>
<li><a href="#">学籍管理</a></li>
<li><a href="#">学科管理</a></li>
<li class="dropdown">
<a href="#">题库管理</a>
<div class="dropdown-content">
<a href="#">选择题库</a>
<a href="#">添加试题</a>
<a href="#">删除试题</a>
</div>
</li>
<li><a href="#">考试公告信息管理</a></li>
<li><a href="#">办事指引</a></li>
<li><a href="#">规章制度</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
nav {
width: 1400px;
height: 150px;
background-color: #f2f2f2;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 50px;
}
h1 {
font-size: 34px;
font-weight: bold;
margin: 0;
}
ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
li {
margin-right: 20px;
font-size: 20px;
font-weight: bold;
}
li:last-child {
margin-right: 0;
}
select {
padding: 10px;
font-size: 18px;
border: none;
background-color: #f2f2f2;
margin-right: 20px;
}
input[type="text"] {
padding: 10px;
font-size: 18px;
border: none;
background-color: #f2f2f2;
width: 300px;
}
</style>
</head>
<body>
<nav>
<h1>成绩表</h1>
<ul>
<li>成绩管理</li>
<li>学籍管理</li>
<li>学科管理</li>
<li>题库管理</li>
<li>考试公告信息管理</li>
<li>办事指引</li>
<li>规章制度</li>
</ul>
<form>
<select>
<option>按学期</option>
<option>按科目</option>
<option>按班级</option>
</select>
<input type="text" placeholder="请输入关键字">
</form>
</nav>
</body>
</html>
以下是一个简单的HTML模板，实现了表格的导航栏、搜索框和下拉菜单功能。注意，这段代码没有实际连接到任何数据库或文件，只是提供了一个基础模板，如果需要实现具体的功能，需要根据具体情况进行适当修改。
<!DOCTYPE html>
<html>
<head>
<title>成绩表</title>
<style type="text/css">
/* 设置导航栏样式 */
#nav {
width: 1400px;
height: 150px;
background-color: #4682B4;
display: flex;
align-items: center;
justify-content: space-between;
}
/* 设置导航栏左侧标题样式 */
#nav h1 {
margin-left: 50px;
color: white;
font-size: 36px;
font-weight: bold;
}
/* 设置导航栏右侧无序列表样式 */
#nav ul {
margin-right: 50px;
display: flex;
list-style: none;
}
/* 设置导航栏右侧无序列表项样式 */
#nav ul li {
margin: 0 20px;
font-size: 24px;
font-weight: bold;
color: white;
cursor: pointer;
}
/* 设置搜索框样式 */
#search {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
/* 设置下拉菜单样式 */
#menu {
margin-left: 20px;
background-color: #F0F0F0;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
/* 设置下拉菜单选项样式 */
#menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
width: 150px;
background-color: #F0F0F0;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
/* 设置下拉菜单选项悬停样式 */
#menu ul li:hover {
background-color: #D3D3D3;
}
/* 设置下拉菜单选项文字样式 */
#menu ul li a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
font-size: 18px;
}
</style>
</head>
<body>
<div id="nav">
<h1>成绩表</h1>
<ul>
<li>成绩管理</li>
<li>学籍管理</li>
<li>学科管理</li>
<li>题库管理</li>
<li>考试公告信息管理</li>
<li>办事指引</li>
<li>规章制度</li>
</ul>
</div>
<div id="search">
<input type="text" placeholder="请输入搜索内容...">
<div id="menu">
<span>全部</span>
<ul>
<li><a href="#">成绩</a></li>
<li><a href="#">学籍</a></li>
<li><a href="#">学科</a></li>
<li><a href="#">题库</a></li>
<li><a href="#">公告信息</a></li>
<li><a href="#">办事指引</a></li>
<li><a href="#">规章制度</a></li>
</ul>
</div>
</div>
<script>
/* 设置下拉菜单显示/隐藏 */
var menu = document.getElementById('menu');
var menuList = document.querySelector('#menu ul');
menu.onclick = function(e) {
e.stopPropagation();
if (menuList.style.display == 'none') {
menuList.style.display = 'block';
} else {
menuList.style.display = 'none';
}
}
document.onclick = function() {
menuList.style.display = 'none';
}
</script>
</body>
</html>
1、已完成效果
2、代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单和导航</title>
<style>
body, html { width: 100%; height: 100%; }
.menu-box-div { width: 1400px; height: 150px; margin: 0 auto; background: #0a5E2D; color: #fff; }
.menu-box-left-div { float: left; line-height: 150px; font-size: 18px; padding: 0 10px; margin-left: 150px; }
.menu-box-right-div { float: right; font-size: 15px; padding: 0 10px; margin-right: 150px; margin-top: 50px; }
.menu-box-right-div .item { float: left; height: 50px; line-height: 50px; padding: 0 10px; margin-right: 10px; }
.content-box-div { width: 1400px; height: 150px; margin: 0 auto; }
.search-div { width: 1300px; margin: 0 auto;margin-top:30px; }
.search-div .text-div { height: 30px; line-height: 30px; }
.search-div .input-div { height: 30px; line-height: 30px; }
.search-div .input-div button { background: #1D5234; color: #fff; }
.table-div { width: 1300px; margin: 0 auto; margin-top: 30px; }
.table-div table { width: 100%; border-collapse: collapse; text-align: center; }
.table-div table .title { background: #0a5E2D; color: #fff; }
.table-div table td, th { height: 50px; line-height: 50px; border: 1px solid black; padding: 4px; }
.table-div table .odd { background: #fff; }
.table-div table .even { background: #E5EFE7; }
</style>
</head>
<body>
<!--菜单区域-->
<div class="menu-box-div">
<div class="menu-box-left-div">
<span>成绩表</span>
</div>
<div class="menu-box-right-div">
<div class="item">
<span>成绩管理</span>
</div>
<div class="item">
<span>学籍管理</span>
</div>
<div class="item">
<span>学科管理</span>
</div>
<div class="item">
<span>题库管理</span>
</div>
<div class="item">
<span>考试公告信息管理</span>
</div>
<div class="item">
<span>办事指引</span>
</div>
<div class="item">
<span>规章制度</span>
</div>
</div>
</div>
<!--菜单区域-->
<div class="content-box-div">
<!--搜索-->
<div class="search-div">
<div class="text-div">
<span>按考号查询</span>
</div>
<div class="input-div">
<input />
<select>
<option value="0">请选择权限,默认为学生</option>
<option value="1">学生</option>
<option value="2">班主任</option>
<option value="3">科任教师</option>
<option value="4">教务人员/校领导/管理员</option>
</select>
<button>搜索</button>
</div>
</div>
<!--表格-->
<div class="table-div">
<table>
<tr class="title">
<th rowspan="2">考生考号</th>
<th rowspan="2">考生姓名</th>
<th colspan="3">考试科目</th>
</tr>
<tr class="title">
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr class="odd">
<td>202201001</td>
<td>张三</td>
<td>99</td>
<td>80</td>
<td>90</td>
</tr>
<tr class="even">
<td>202201002</td>
<td>李四</td>
<td>99</td>
<td>80</td>
<td>90</td>
</tr>
<tr class="odd">
<td>202201003</td>
<td>王五</td>
<td>99</td>
<td>80</td>
<td>90</td>
</tr>
<tr class="even">
<td>202201004</td>
<td>赵六</td>
<td>99</td>
<td>80</td>
<td>90</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script type="text/javascript">
</script>
HTML 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="nav-logo">成绩表</div>
<nav>
<ul>
<li><a href="#">成绩管理</a></li>
<li><a href="#">学籍管理</a></li>
<li><a href="#">学科管理</a></li>
<li><a href="#">题库管理</a></li>
<li><a href="#">考试公告信息管理</a></li>
<li><a href="#">办事指引</a></li>
<li><a href="#">规章制度</a></li>
</ul>
</nav>
<div class="search-box">
<input type="text" placeholder="请输入关键字">
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
</div>
</header>
<section>
<!-- 页面主要内容 -->
</section>
</body>
</html>
CSS 代码：
header {
width: 1400px;
height: 150px;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
font-size: 32px;
font-weight: bold;
margin-left: 40px;
}
nav ul {
list-style: none;
margin-right: 60px;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #333;
font-size: 20px;
}
.search-box {
margin-right: 40px;
}
.search-box input {
width: 200px;
height: 28px;
padding: 0 10px;
border: 2px solid #333;
border-radius: 4px;
margin-right: 10px;
font-size: 16px;
}
.search-box select {
height: 32px;
padding: 0 10px;
border: 2px solid #333;
border-radius: 4px;
font-size: 16px;
background-color: #fff;
cursor: pointer;
}
您可以根据需要自定义样式，如修改导航栏颜色、字体大小等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏示例</title>
<style>
/* 设置导航栏样式 */
#navbar {
width: 1400px;
height: 150px;
background-color: #333333;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}
/* 设置导航栏左侧字体样式 */
#navbar h1 {
font-size: 30px;
margin: 0;
}
/* 设置导航栏右侧列表样式 */
#navbar ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
/* 设置导航栏右侧列表项样式 */
#navbar li {
margin: 0 20px;
font-size: 24px;
}
/* 设置导航栏右侧列表项链接样式 */
#navbar a {
color: white;
text-decoration: none;
}
/* 设置搜索框样式 */
#search-box {
position: relative;
margin-top: 20px;
width: 500px;
}
/* 设置搜索框输入框样式 */
#search-box input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-radius: 20px;
font-size: 20px;
}
/* 设置搜索框下拉菜单样式 */
#search-box select {
position: absolute;
right: 0;
top: 0;
height: 100%;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-left: 1px solid #ccc;
background-color: #f1f1f1;
border-radius: 0 20px 20px 0;
font-size: 20px;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<div id="navbar">
<!-- 导航栏左侧 -->
<h1>成绩表</h1>
<!-- 导航栏右侧 -->
<ul>
<li><a href="#">成绩管理</a></li>
<li><a href="#">学籍管理</a></li>
<li><a href="#">学科管理</a></li>
<li><a href="#">题库管理</a></li>
<li><a href="#">考试公告信息管理</a></li>
<li><a href="#">办事指引</a></li>
<li><a href="#">规章制度</a></li>
</ul>
</div>
<!-- 搜索框 -->
<div id="search-box">
<input type="text" placeholder="按考号查询">
<select>
<option>请选择权限，默认为学生</option>
<option>学生</option>
<option>班主任</option>
<option>科任教师</option>
<option>考教务人员/校领导/管理员</option>
</select>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
/* 设置导航栏的宽度和高度 */
nav {
width: 1400px;
height: 150px;
}
/* 导航栏样式 */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
}
/* 导航栏左侧成绩表样式 */
.logo {
float: left;
font-size: 24px;
padding: 10px 20px;
}
/* 导航栏右侧横向无序列表样式 */
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<nav>
<div class="logo">成绩表</div>
<ul>
<li><a href="#">成绩管理</a></li>
<li><a href="#">学籍管理</a></li>
<li><a href="#">学科管理</a></li>
<li><a href="#">题库管理</a></li>
<li><a href="#">考试公告信息管理</a></li>
<li><a href="#">办事指引</a></li>
<li><a href="#">规章制度</a></li>
</ul>
</nav>
</body>
</html>
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>导航栏示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<h1>成绩表</h1>
<ul>
<li><a href="#">成绩管理</a></li>
<li><a href="#">学籍管理</a></li>
<li><a href="#">学科管理</a></li>
<li><a href="#">题库管理</a></li>
<li><a href="#">考试公告信息管理</a></li>
<li><a href="#">办事指引</a></li>
<li><a href="#">规章制度</a></li>
</ul>
<form>
<input type="text" placeholder="Search">
<select>
<option value="all">All</option>
<option value="students">Students</option>
<option value="teachers">Teachers</option>
</select>
<button type="submit">Search</button>
</form>
</nav>
</body>
</html>
CSS代码：
nav {
width: 1400px;
height: 150px;
margin: 0 auto;
background: #333;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
h1 {
font-size: 2rem;
margin-left: 2rem;
}
ul {
display: flex;
list-style: none;
margin-right: 2rem;
font-size: 1.2rem;
}
li:not(:last-child) {
margin-right: 2rem;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
form {
margin-right: 2rem;
display: flex;
align-items: center;
}
input[type="text"] {
padding: 0.5rem;
margin-right: 1rem;
}
select {
padding: 0.5rem;
margin-right: 1rem;
}
button[type="submit"] {
padding: 0.5rem 1rem;
background: #fff;
color: #333;
border: none;
cursor: pointer;
}
你可以将以上两部分代码保存为 HTML 文件和 CSS 文件，在同一个文件夹中打开 HTML 文件，就可以看到导航栏展示的效果了。
<!DOCTYPE html>
<html>
<head>
<title>成绩表</title>
<style>
/* 设定样式 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
nav {
background-color: #333;
color: white;
height: 150px;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
width: 1400px;
margin: 0 auto;
}
nav ul {
list-style-type: none;
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
nav li {
margin-right: 20px;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s ease-in-out;
}
nav li:hover {
background-color: #666;
cursor: pointer;
}
nav a {
color: white;
text-decoration: none;
}
form {
display: flex;
align-items: center;
margin-right: 20px;
}
input[type="text"] {
padding: 5px;
border-radius: 5px;
border: none;
margin-right: 10px;
}
select {
padding: 5px;
border-radius: 5px;
border: none;
}
</style>
</head>
<body>
<nav>
<div>
<h1>成绩表</h1>
</div>
<ul>
<li><a href="#">成绩管理</a></li>
<li><a href="#">学籍管理</a></li>
<li><a href="#">学科管理</a></li>
<li><a href="#">题库管理</a></li>
<li><a href="#">考试公告信息管理</a></li>
<li><a href="#">办事指引</a></li>
<li><a href="#">规章制度</a></li>
</ul>
<form>
<input type="text" placeholder="搜索">
<select>
<option value="">所有类别</option>
<option value="成绩管理">成绩管理</option>
<option value="学籍管理">学籍管理</option>
<option value="学科管理">学科管理</option>
<option value="题库管理">题库管理</option>
<option value="考试公告信息管理">考试公告信息管理</option>
<option value="办事指引">办事指引</option>
<option value="规章制度">规章制度</option>
</select>
</form>
</nav>
<!-- 表格内容 -->
</body>
</html>
代码给我