ADD file via upload

index.css

@@ -0,0 +1,84 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+header{
+  height: 64px;
+  width:100%;
+  background-color: black;
+}
+.head_li{
+  display: block;
+  float: left ;
+  color:white;
+  font-size:16px;
+  text-align: center;
+  line-height: 64px;
+  margin-left: 30px;
+}
+.head_li a{
+  text-decoration: none;
+  color:white;
+}
+.head_li a:hover{
+  color: darkgray;
+}
+.head_lis{
+  display: block;
+  float: left ;
+  color: aliceblue;
+  font-size:16px;
+  text-align: center;
+  line-height: 64px;
+  margin-left: 30px;
+}
+*{
+  padding: 0;
+  margin: 0;
+}
+.icon-touxiang{
+  font-size:32px;
+}
+.head_fr{
+  float: right;
+  margin-right: 30px;
+}
+.box1{
+  margin: 50px auto;
+  background-color: antiquewhite;
+  width: 1200px;
+  height: 345px;
+}
+.boxTwo:hover{
+  background-color: white;
+  color:black;
+}
+.boxOne{
+  width:160px;
+  height: 345px;
+  background-color:black;
+  float: left;
+  opacity: 0.8;
+}
+li{
+  list-style: none;
+}
+.boxTwo{
+  display: block;
+  background-color:transparent;
+  width:160px;
+  height:40px;
+  font-size:16px;
+  color:white;
+  text-align:left;
+  text-decoration: none;
+}

index.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import './iconfont/iconfont.css'
+let head = (
+  <div className='app'>
+   <header>
+     <div className='head_fl'>
+       <ul>
+         <li className='head_li'><a href='#'>首页</a></li>
+         <li className='head_li'><a href='#'>实践课程</a></li>
+         <li className='head_li'><a href='#'>实践项目</a></li>
+         <li className='head_li'><a href='#'>教学课堂</a></li>
+         <li className='head_li'><a href='#'>在线竞赛</a></li>
+         <li className='head_li'><a href='#'>教学案例</a></li>
+         <li className='head_li'><a href='#'>交流问答</a></li>
+         <li className='head_li'><a href='#'>大学开源</a></li>
+         <li className='head_li'><a href='#'>工程认证</a></li>
+       </ul>
+     </div>
+     <div className='head_fr'>
+       <ul>
+         <li className='head_lis'><i  className='iconfont icon-sousuo1'></i></li>
+         <li className='head_lis'><i  className='iconfont icon-tianjia'></i></li>
+         <li className='head_lis'><i  className='iconfont icon-xiaoxi'></i></li>
+         <li className='head_lis'><i  className='iconfont icon-touxiang'></i></li>
+       </ul>
+     </div>
+   </header>
+   <div className='box1'>
+     <div className='boxOne'>
+       <ul>
+         <li><a href='#' className='boxTwo'>程序语言设计 <sapn style={{textAline:'right'}}>{'>'}</sapn></a></li>
+         <li><a href='#' className='boxTwo'>计算机基础</a></li>
+         <li><a href='#' className='boxTwo'>计算机系统能力</a></li>
+         <li><a href='#' className='boxTwo'>云计算与大数据</a></li>
+         <li><a href='#' className='boxTwo'>人工智能</a></li>
+         <li><a href='#' className='boxTwo'>软件工程</a></li>
+         <li><a href='#' className='boxTwo'>Web开发</a></li>
+         <li><a href='#' className='boxTwo'>更多</a></li>
+       </ul>
+     </div>
+   </div>
+   <div>
+     <img src='https://ali-cdn.educoder.net/images/avatars/PortalImage/89?t=1640671464' ></img>
+   </div>
+  </div>
+)
+ReactDOM.render(head,document.getElementById('root'));