1.先来看成品效果
2.html的源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>信息管理系统</title>
</head>
<body>
<div class="head">
<div class="head-left">
<img src="img/logo.png">
</div>
<div class="head-right">
<div class="head-right-top">
<ul>
<li>退出</li>
<li><img src="img/dl.png"></li>
<li>欢迎使用信息系统!</li>
<li><img src="img/left_15.png"></li>
</ul>
</div>
<div class="head-right-bottom">
<ul>
<li><a href="#"><img src="img/left_14.png"></a><p>系统管理</p></li>
<li><a href="#"><img src="img/left_05.png"></a><p>数据分析</p></li>
<li><a href="#"><img src="img/left_05.png"></a><p>设备管理</p></li>
<li><a href="#"><img src="img/left_03.jpg"></a><p>数据同步</p></li>
<li><a href="#"><img src="img/equi-icon2.png"></a><p>数据展示</p></li>
<li><a href="#"><img src="img/equi-icon1.png"></a><p>数据采集</p></li>
</ul>
</div>
</div>
</div>
<div class="content-left">
<img src="img/e_01.jpg">
<div class="left_1">
<img src="img/left_01.png">
<p>设备信息</p>
</div>
<div class="left_2">
<img src="img/jiao.png">
<p>所有设备</p>
</div>
<div class="left_2">
<img src="img/jiao.png">
<p>正常设备</p>
</div>
<div class="left_2">
<img src="img/jiao.png">
<p>异常设备</p>
</div>
<div class="left_2">
<img src="img/jiao.png">
<p>共享设备</p>
</div>
<div class="left_1">
<img src="img/left_03.jpg">
<p>设备接口</p>
</div>
<div class="left_1">
<img src="img/left_02.png">
<p>集成设备</p>
</div>
<div class="left_1">
<img src="img/left_03.png">
<p>设备厂商</p>
</div>
<div class="left_1">
<img src="img/left_05.png">
<p>设备型号</p>
</div>
<div class="left_1">
<img src="img/left_06.png">
<p>更多设备</p>
</div>
</div>
<div class="content_right">
<div class="control_right_top">
<img src="img/home.jpg">
<span>当前位置>>设备管理>>设备信息>>所有设备>></span>
<hr style="width: 100%;">
</div>
<div class="content_right_content">
<span><img src="img/left_14.png"> 搜索 设备名称:<input type="text" placeholder="输入设备名称"> 设备类型:<select><option>计算机设备</option>
<option>科学设备</option><option>软件设备</option><option>智能设备</option>
</select> <button type="button">查询</button></span>
</div>
<div class="content_table">
<table>
<tr>
<td><input type="checkbox">全选</input></td>
<td>设备类型</td>
<td>设备名称</td>
<td>设备编号</td>
<td>创建日期</td>
<td>设备状态</td>
<td>是否共享</td>
<td>修改设备</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>网络摄像头</td>
<td>计算机网络设备</td>
<td>0001</td>
<td>2021/10/30</td>
<td style="color: red;">设备异常</td>
<td><img src="img/device-1.png" /></td>
<td><img src="img/share-1.png" /></td>
<td><img src="img/equi-icon2.png" /></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>智能终端</td>
<td>集成开发版设备</td>
<td>0010</td>
<td>2021/10/30</td>
<td style="color: green;">设备正常</td>
<td><img src="img/device-1.png" /></td>
<td><img src="img/share-1.png" /></td>
<td><img src="img/equi-icon2.png" /></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>移动电话</td>
<td>算法与数据设备</td>
<td>0011</td>
<td>2021/10/30</td>
<td style="color: green;">设备正常</td>
<td><img src="img/device-1.png" /></td>
<td><img src="img/share-1.png" /></td>
<td><img src="img/equi-icon2.png" /></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>平板电脑</td>
<td>IDE开发设备</td>
<td>0100</td>
<td>2021/10/30</td>
<td style="color: green;">设备正常</td>
<td><img src="img/device-1.png" /></td>
<td><img src="img/share-1.png" /></td>
<td><img src="img/equi-icon2.png" /></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>STM32开发班</td>
<td>底层架构设备</td>
<td>0101</td>
<td>2021/10/30</td>
<td style="color: green;">设备正常</td>
<td><img src="img/device-1.png" /></td>
<td><img src="img/share-1.png" /></td>
<td><img src="img/equi-icon2.png" /></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>树莓派开发板</td>
<td>链路层设备</td>
<td>0110</td>
<td>2021/10/30</td>
<td style="color: green;">设备正常</td>
<td><img src="img/device-1.png" /></td>
<td><img src="img/share-1.png" /></td>
<td><img src="img/equi-icon2.png" /></td>
</tr>
</table>
<span><img src="img/tj.jpg">|<img src="img/sc.jpg"></span>
<span style="float: right; margin-right: 200px;"><button type="button">首页</button>
<button type="button" style="border: none; background: none; font-weight: bold;">1</button>
<button type="button" style="border: none; background: none; font-weight: bold;">2</button>
<button type="button" style="border: none; background: none; font-weight: bold;">3</button>
<button type="button" style="border: none; background: none; font-weight: bold;">...</button>
<button type="button">下一页</button>
<button type="button">尾页</button>
</span>
</div>
</div>
</body>
</html>3.CSS的源码
.head{
height: 100px;
width: 100%;
margin: 0;
background-color: cornflowerblue;
}
.head-left{
height: px;
width: 500px;
}
.head-left img {
padding-top: 20px;
padding-left: 20px;
float: left;
}
.head-right-top{
width: 600px;
height: 20px;
float: right;
margin-right: 20px;
margin-bottom: 3px;
}
.head-right-top>ul{
margin: 0;
padding: 0;
list-style: none;
margin-right: 20;
}
.head-right-top li{
float: right;
padding-left: 6px;
}
.head-right-top a{
margin-left: 10px;
text-decoration: none;
}
.head-right-bottom{
height: 40px;
width: 600px;
float: right;
}
.head-right-bottom>ul{
text-align: center;
margin: 0;
padding: 0;
list-style-type: none;
margin-right: 20px;
}
.head-right-bottom li{
float: right;
padding-left: 14px;
}
.head-right-bottom img{
width: 25px;
height: 25px;
}.head-right-bottom p{
color: white;
font-size: 15px;
}
.content-left{
width: 200px;
height: 1000px;
background-color: lightskyblue;
}
.content-left p{
display: inline;
}
.left_1>p{
color: black;
line-height: 30px;
}
.left_2>p{
color: white;
line-height: 25px;
}
.left_2{
margin-left: 30px;
}
.content_right{
position: absolute;
left: 210px;
top: 107px;
}
.control_right_top{
width: 1500px;
height: 30px;
margin-bottom: 2px;
}
.content_table table{
width: 1200px;
height: 500px;
text-align: center;
}