<!DOCTYPE html>
<!-- 声明文档类型-->
<html lang="en">
<!-- 确定语言形态 -->
<style>
#pie {
width: 400px;
height: 400px;
}
</style>
<script type="text/javascript" src="echarts.js"></script>
<head>
<meta charset="UTF-8">
<!--控制网页的编码格式 utf-8 国际性编码-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--控制视口比例以及缩放-->
<title>首页</title>
<!-- 先引入重置样式表和公共样式表以及主页样式表 -->
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/reset.css">
<!-- 这个顺序引入更规范 -->
</head>
<body>
<!-- 这是网页的头部版心盒子 -->
<div class="header_con">
<!-- h1里面放logo哦 -->
<h1>
<img src="./assets/images/Nginx.jpg" alt="">
</h1>
<!-- 头部右侧表单标签-->
<form action="">
<input type="text" class="search" value="SEARCH...">
<div>
<input type="button" class="btn">
</div>
</form>
</div>
<!-- 导航栏平铺部分：会显示黑色 -->
<div id="nav">
<!-- 导航栏版心部分 -->
<div class="nav_con">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">系统设置</a></li>
</ul>
</div>
</div>
<!-- banner的平铺部分 -->
<div id="banner">
<div class="banner_con">
<img src="./assets/images/R-C.png"
height="466px"
width="1000px">
</div>
</div>
<!-- 新闻列表的版心部分 -->
<div class="news_con">
<!-- 最左侧的盒子 -->
<div class="news_l">
<h3 class="news_title">版本更新情况</h3>
<ul class="news_list">
<li>
<a>alpha 0.11 更新ui版本</a>
<span>2024-05-05</span>
</li>
<li>
<a>alpha 0.10 更新跳转其他界面逻辑</a>
<span>2024-05-03</span>
</li>
<li>
<a>alpha 0.09 更新LoginUI设计</a>
<span>1998-09-15</span>
</li>
</ul>
</div>
<!-- 中间的盒子-->
<div class="news_c">
<h3 class="news_title">服务器列表</h3>
<p class="txt1">北京 ip：192.168.20.2</p>
<p class="txt1">广州 ip：192.168.21.4</p>
<p class="txt1">长沙 ip：192.168.23.4</p>
</div>
<!-- 右边的盒子 -->
<div class="news_r">
<h3 class="news_title">最近操作</h3>
<p class="txt3">开启主备切换服务</p>
<p class="txt3">开启Nginx服务</p>
<a href="#"><img src="./images/btn_img_05.jpg" alt=""></a>
</div>
</div>
<!-- 市场项目那一部分 -->
<div class="case_con">
<h3>当前可用服务</h3>
<div class="case_box">
<dl>
<dt><a href="DetectUI.html"><img src="./assets/images/R-C green.png" alt=""></a></dt>
<dd>查看主动探测</dd>
</dl>
<dl>
<dt><img src="./assets/images/R-C red.png" alt=""></dt>
<dd>查看流量控制</dd>
</dl>
<dl>
<dt><img src="./assets/images/R-C pink.png" alt=""></dt>
<dd>启用主备切换</dd>
</dl>
<dl>
<dt><img src="./assets/images/R-C blue.png"></dt>
<dd>查看Nginx日志</dd>
</dl>
</div>
</div>
<!-- 产品中心那一部分的平铺-->
<div id="links">
<!-- 这个顺序引入更规范 -->
<div class="links_con">
<!-- 版心部分 -->
<!-- 左边的盒子 -->
<div class="links_l">
<h3 class="links_title">技术支持</h3>
<ul class="links_list">
<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 class="links_c">
<h3 class="links_title">开发者联系方式</h3>
<ul class="links_list">
<li>
<a href="#">liuyuyang21a@gfkd.mtn</a>
</li>
<li>
<a href="#">yuankaifeng21@gfkd.mtn</a>
</li>
<li>
<a href="#">xumingyang21@gfkd.mtn</a>
</li>
<li>
<a href="#">dongjiaqi21@gfkd.mtn</a>
</li>
</ul>
</div>
<!-- 右边的盒子 -->
<div class="links_r">
<h3 class="links_title">HADG</h3>
<h3 class="links_a"> 旨在为全军指挥信息系统提供坚实保障，开发更高效的网关服务</h3>
<div class="map">
<img src="./assets/images/nginx.gif">
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<div class="footer_con">
<!-- 页脚左边的盒子 -->
<p class="footer_l">
<a href="#">意见反馈</a>
<a href="#">用户协议</a>
<a href="#">交流QQ群</a>
<a href="#" class="footer-right">湘ICP备20002562号-1</a>
</p>
<!-- 页脚右边的盒子 -->
<p class="footer_r">
国防科技大学软件体系结构课程徐明洋小组开发
</p>
</div>
</body>
</html>