学生管理系统 2023.1.29

楼主^#

更多发布于：2023-01-30 08:49

<body>
   
   <div class="PageBox">
   
   <div class="HeadBar">
   
   <a>路径跳转功能区</a>
   </div>

   
   <div class="MiddleRibbon">
   
   <div class="Search">
   <input
   type="text"
   placeholder=" 请输入关键字"
   class="SearchBtn"
   /><button>查询</button>
   </div>
   
   <nav class="menuBar">
   <div class="dropdown">
   <button onclick="myFunction()" class="dropbtn">年级选择</button>
   <div id="myDropdown" class="dropdown-content">
   <a>大班</a>
   <a>中班</a>
   <a>小班</a>
   <a>毕业班</a>
   </div>
   </div>
   </nav>
   </div>

   
   <div class="BottomInformationArea"></div>
   </div>

   <script src="../bootstrap-dist/js/jquery3.6.1.js"></script>
   <script src="../bootstrap-dist/js/bootstrap.js"></script>
   <script src="../js/KindergartenTeacherManagement.js"></script>
  </body> height: 30px;

  border: 2px solid #c4ed7c;
}

.Search input:hover {
  border: 2px solid #9af006;
}

.Search button {
  width: 50px;
  height: 30px;
  font-size: 16px;
  color: white;
  background-color: #c4ed7c;
  cursor: pointer;
  border: none;
}

.Search button:hover {
  background-color: #9af006;
}

.menuBar {
  margin-right: 50px;
}

/* 中部功能区下拉菜单选择器 */
.dropbtn {
  width: 150px;
  height: 35px;
  background-color: #c4ed7c;
  color: white;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover {
  background-color: #9af006;
}

.dropdown-content {
  display: none;
  background-color: #f9f9f9;
}

.dropdown-content a {
  color: rgb(80, 78, 78);
  width: 150px;
  height: 30px;
  font-family: 隶书;
  font-size: 16px;
  /* 文本下划线 */
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #9af006;
}

/* 底部学生信息显示区 */

.BottomInformationArea {
  width: 900px;
  display: flex;
  justify-content: center;
  align-content: flex-start;
  margin-top: 20px;
}

.FirstColumn{
  font-size: 14px;
}

.FirstColumn td{
  width: 80px;
  height: 20px;
  padding: 10px;
  border: solid 1px;
}

喜欢0

发帖回复

« 返回列表

您需要登录后才可以回帖，登录或者注册

返回顶部

公众号

学生管理系统 2023.1.29

最新喜欢：