HTML+CSS实现⼀个管理系统页⾯的制作
1.先来看成品效果
2.html的源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">学生个人网页制作html代码css
<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>
spilled怎么读</div>
<div class="left_1">
<img src="img/left_06.png">
<p>更多设备</p>
dw改字体颜代码</div>
</div>
<div class="content_right">
<div class="control_right_top">
<img src="img/home.jpg">
<span>当前位置>>；设备管理>>；设备信息>>；所有设备>></span>
<hr >
</div>
<div class="content_right_content">
<span><img src="img/left_14.png"> ；搜索 ；设备名称:<input type="text" placeholder="输⼊设备名称"> ；设备类型:<select><o <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 >设备异常</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 >设备正常</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 >设备正常</td>
字符串转数字类型c语言
<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 >设备正常</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 >设备正常</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 >设备正常</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 ><button type="button">⾸页</button>
<button type="button" >1</button> <button type="button" >2</button> <button type="button" >3</button> <button type="button" >...</button> <button type="button">下⼀页</button>
<button type="button">尾页</button>
</span>
</div>
</div>
</body>
jquery addclass</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;
}
程序设计语言概述ppt.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;
}
4.总结学习html+css：标签元素要多⾃⼰动⼿在电脑上写，不管什么时候都要写然后把css的样式表加进去试着改变样式表的不同，看看有什么效果⽽且我们在学习的时候要学会不断的思考不要想着记住他，对了在css中我们学完后要想写⼀个漂亮的⽹页肯定离不开float和position这两个标签我们⼀定要学会还有什么是盒⼦模型等等.下⾯的是我学习的时候⼀边保存的分享⼤家:
transition: all 3s ease; ⿏标延迟的属性值
<link rel="stylesheet" href="/font-awesome/4.7.0/css/font-awesome.css"> 引⽤国内图标的链接visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占⽤与未隐藏之前⼀样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局
display:none可以隐藏某个元素，且隐藏的元素不会占⽤任何空间。也就是说，该元素不但被隐藏了，⽽且该元素原本占⽤的空间也会从页⾯布局中消失
块元素是⼀个元素，占⽤了全部宽度，在前后都是换⾏符。
块元素的例⼦：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论