index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
//弹窗
$("#add").click(function () {
$(".alert_back").addClass("show")
});
$(".alert_quit").click(function () {
$(".alert_back").removeClass("show")
})
//侧边栏
$(".left_menu_list h3").click(function () {
// 元素切换
// $(this).next().toggleClass("show")
//父元素的兄弟元素的子元素
// .parent().siblings().children("ul").removeClass("show")
// 上面方法的进阶
$(this).next().slideToggle()
.parent().siblings().children("ul").slideUp()
// jquery中的动画
})
})
</script>
</head>
<body>
<!--顶部菜单-->
<div class="top_menu">
<div class="title">自动化测试平台</div>
<div class="memu_list">
<ul>
<a href="#"><li>首页</li></a>
<a href="#"><li>接口列表</li></a>
<a href="#"><li>用例列表</li></a>
<a href="#"><li>套件列表</li></a>
<a href="#"><li>测试报告</li></a>
</ul>
</div>
<div class="top_user">
<a href="">注销用户</a>
</div>
</div>
<!--侧边菜单栏-->
<div class="left_menu">
<div class="left_title">项目管理</div>
<div class="left_menu_list">
<ul>
<li>
<h3>接口管理<img src="../html_css/image/xiala.png" alt=""></h3>
<ul class="hide">
<li><a href="#">添加接口</a></li>
<li><a href="#">接口列表</a></li>
</ul>
</li>
<li>
<h3>用例管理<img src="../html_css/image/xiala.png" alt=""></h3>
<ul class="hide">
<li><a href="#">添加接口</a></li>
<li><a href="#">接口列表</a></li>
</ul>
</li>
<li>
<h3>测试计划<img src="../html_css/image/xiala.png" alt=""></h3>
<ul class="hide">
<li><a href="#">添加接口</a></li>
<li><a href="#">接口列表</a></li>
</ul>
</li>
<li>
<h3>测试报告<img src="../html_css/image/xiala.png" alt=""></h3>
<ul class="hide">
<li><a href="#">添加接口</a></li>
<li><a href="#">接口列表</a></li>
</ul>
</li>
<li>
<h3>环境管理<img src="../html_css/image/xiala.png" alt=""></h3>
<ul class="hide">
<li><a href="#">添加接口</a></li>
<li><a href="#">接口列表</a></li>
</ul>
</li>
<!-- <a href="#"><li>接口管理<img src="../html_css/image/xiala.png" alt=""></li></a>-->
<!-- <a href="#"><li>用例管理<img src="../html_css/image/xiala.png" alt=""></li></a>-->
<!-- <a href="#"><li>测试计划<img src="../html_css/image/xiala.png" alt=""></li></a>-->
<!-- <a href="#"><li>测试报告<img src="../html_css/image/xiala.png" alt=""></li></a>-->
<!-- <a href="#"><li>环境管理<img src="../html_css/image/xiala.png" alt=""></li></a>-->
</ul>
</div>
</div>
<!--主体-->
<div class="content">
<div class="pro_info">
<div class="pro_title">
项目A
</div>
<p>用例数量:44</p>
<p>接口数量:10</p>
<div class="pro_del"><a href="#">删除项目</a></div>
</div>
<div class="pro_info">
<div class="pro_title">
项目B
</div>
<p>用例数量:44</p>
<p>接口数量:10</p>
<div class="pro_del"><a href="#">删除项目</a></div>
</div>
<div class="pro_info">
<div class="pro_title">
项目C
</div>
<p>用例数量:44</p>
<p>接口数量:10</p>
<div class="pro_del"><a href="#">删除项目</a></div>
</div>
<div class="pro_info">
<div class="pro_title">
项目D
</div>
<p>用例数量:44</p>
<p>接口数量:10</p>
<div class="pro_del"><a href="#">删除项目</a></div>
</div>
<div class="pro_info" id="add">
<img src="../html_css/image/11.jpeg" alt="">
</div>
<!--弹框-->
<div class="alert_back hide">
<div class="alert_add">
<div class="alert_title">新增项目</div>
<div class="alert_quit">
<img src="../html_css/image/quit.jpeg" alt="" height="20px" width="20px">
</div>
<form action="#">
<div class="alert_input">
<label for="pro_title">项目名称：</label>
<input type="text" id="pro_title">
</div>
<div class="alert_input">
<label for="pro_url">项目地址：</label>
<input type="text" id="pro_url">
</div>
<div class="alert_input">
<label for="pro_tester">测试人员：</label>
<input type="text" id="pro_tester">
</div>
<div class="alert_input">
<label for="pro_desc">项目描述：</label>
<textarea name="" id="pro_desc" cols="17" rows="3"></textarea>
</div>
<div class="alert_submit">
<input type="submit" value="提交">
</div>
</form>
</div>
</div>
</div>
<!--弹框-->
</body>
</html>
index.css
body {
}
/*顶部菜单样式*/
.top_menu {
height: 100px;
width: 1400px;
background: #2a2af3;
}
.title {
color: #ffffff;
font: normal 32px/100px '微软雅黑' ; /*对应：是否加粗 字号/行高 字体，行高与父级元素一样高时，文本垂直居中*/
width: 320px; /*设置宽度*/
text-align: center; /*文本水平居中*/
float: left;
}
.memu_list {
float: left;
height: 100px;
}
/*层级选择器*/
.memu_list a{
float: left;
width: 120px;
height: 100px;
color: #ffffff;
font: normal 22px/100px '微软雅黑';
text-align: center;
text-decoration: none;
}
.memu_list li:hover {
background: #1174ee;
}
.top_user {
float: right;
font: normal 16px/40px '微软雅黑';
margin: 30px 40px;
}
.top_user a {
color: #ffffff;
}
/*左侧菜单样式*/
.left_menu {
position: absolute;
top: 120px;
left: 0;
width: 300px;
height: 1000px;
}
.left_title {
height: 100px;
width: 100%;
font: normal 25px/100px "微软雅黑";
color: white;
text-indent: 50px; /*文字缩进*/
background: #2a2af3;
}
.left_menu_list li {
border: solid 1px #f1f2f5;
font: normal 20px/60px "微软雅黑";
text-indent: 50px; /*文字缩进*/
color: #686565;
}
.left_menu_list ul li img{
width: 20px;
height: 10px;
background: #2a2af3;
margin: auto 30px;
}
/*主体内容样式*/
.content {
width: 1100px;
height: 1000px;
position: absolute;
left: 320px;
top: 120px;
padding-left: 10px;
}
.pro_info {
width: 300px;
height: 230px;
background: white;
float: left;
margin: 20px;
border-radius: 10px;
text-align: center;
border:solid 1px #f1f2f5;
}
.pro_title {
height: 50px;
background: #aad3f8;
color: black;
text-align: center;
font: normal 25px/50px "微软雅黑";
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.pro_info p {
color: #686565;
font: normal 18px/35px "微软雅黑";
}
.pro_del {
position:relative;
left: 100px;
bottom: -20px;
width: 100px;
height: 50px;
background: #2a2af3;
border-radius: 6px;
font: normal 18px/50px "微软雅黑";
color: white;
}
.pro_info a {
color: white;
font: normal 18px/35px "微软雅黑";
}
.pro_info img {
height: 150px;
width: 150px;
position: relative;
top: 50px;
}
/*弹窗UI*/
.alert_back {
height: 1000px;
width: 100%;
background: rgba(128,128,128,0.3);
position: fixed;
left: 0;
top: 0;
}
.alert_add {
height: 400px;
width: 400px;
border: 1px black;
background: whitesmoke;
position: fixed;
left: 400px;
top: 200px;
}
.alert_title {
float: left;
font-size:18px;
position: relative;
left: 40%;
margin-top: 30px;
}
.alert_quit {
float: right;
}
.alert_input {
clear:both;
position: relative;
top: 20px;
left: 20%;
margin-top: 30px;
}
.alert_submit {
clear:both;
margin-top: 40px;
position: relative;
left: 45%;
}
