定制小程序开发费用HTML+CSS实现一个管理系统页面的制作

1.定制小程序开发费用先来看成品效果

2.html的源码

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<link rel="stylesheet" href="main.css">
  6. 		<title>定制小程序开发费用信息管理系统</title>
  7. 	</head>
  8. 	<body>
  9. 		<div class="head">
  10. 			<div class="head-left">
  11. 				<img src="img/logo.png">
  12. 			</div>
  13. 			<div class="head-right">
  14. 				<div class="head-right-top">
  15. 					<ul>
  16. 						<li>退出</li>
  17. 						<li><img src="img/dl.png"></li>
  18. 						<li>欢迎使用信息系统!</li>
  19. 						<li><img src="img/left_15.png"></li>					
  20. 					</ul>
  21. 				</div>
  22. 				<div class="head-right-bottom">
  23. 					<ul>
  24. 						<li><a href="#"><img src="img/left_14.png"></a><p>系统管理</p></li>
  25. 						<li><a href="#"><img src="img/left_05.png"></a><p>数据分析</p></li>
  26. 						<li><a href="#"><img src="img/left_05.png"></a><p>设备管理</p></li>
  27. 						<li><a href="#"><img src="img/left_03.jpg"></a><p>数据同步</p></li>
  28. 						<li><a href="#"><img src="img/equi-icon2.png"></a><p>数据展示</p></li>
  29. 						<li><a href="#"><img src="img/equi-icon1.png"></a><p>数据采集</p></li>
  30. 					</ul>
  31. 				</div>
  32. 			</div>
  33. 		</div>
  34. 		<div class="content-left">
  35. 			<img src="img/e_01.jpg">
  36. 			<div class="left_1">
  37. 				<img src="img/left_01.png">
  38. 				<p>设备信息</p>
  39. 			</div>
  40. 			<div class="left_2">
  41. 				<img src="img/jiao.png">
  42. 				<p>所有设备</p>
  43. 			</div>
  44. 			<div class="left_2">
  45. 					<img src="img/jiao.png">
  46. 				<p>正常设备</p>
  47. 			</div>
  48. 			<div class="left_2">
  49. 				<img src="img/jiao.png">
  50. 				<p>异常设备</p>
  51. 			</div>
  52. 			<div class="left_2">
  53. 				<img src="img/jiao.png">
  54. 				<p>共享设备</p>
  55. 			</div>
  56. 			<div class="left_1">
  57. 					<img src="img/left_03.jpg">
  58. 				<p>设备接口</p>
  59. 			</div>
  60. 			<div class="left_1">
  61. 				<img src="img/left_02.png">
  62. 				<p>集成设备</p>
  63. 			</div>
  64. 			<div class="left_1">
  65. 				<img src="img/left_03.png">
  66. 				<p>设备厂商</p>
  67. 			</div>
  68. 			<div class="left_1">
  69. 				<img src="img/left_05.png">
  70. 				<p>设备型号</p>
  71. 			</div>
  72. 			<div class="left_1">
  73. 				<img src="img/left_06.png">
  74. 				<p>更多设备</p>
  75. 			</div>
  76. 		</div>
  77. 		<div class="content_right">
  78. 			<div class="control_right_top">
  79. 				<img src="img/home.jpg">
  80. 				<span>当前位置&gt;&gt;设备管理&gt;&gt;设备信息&gt;&gt;所有设备&gt;&gt;</span>
  81. 				<hr style="width: 100%;">
  82. 			</div>
  83. 			<div class="content_right_content">
  84. 				<span><img src="img/left_14.png">&nbsp;搜索&nbsp;&nbsp;&nbsp;设备名称:<input type="text" placeholder="输入设备名称">&nbsp;&nbsp;设备类型:<select><option>计算机设备</option>
  85. 					<option>科学设备</option><option>软件设备</option><option>智能设备</option>
  86. 				</select>&nbsp;&nbsp;<button type="button">查询</button></span>
  87. 			</div>
  88. 			<div class="content_table">
  89. 				<table>
  90. 					<tr>
  91. 						<td><input type="checkbox">全选</input></td>
  92. 						<td>设备类型</td>
  93. 						<td>设备名称</td>
  94. 						<td>设备编号</td>
  95. 						<td>创建日期</td>
  96. 						<td>设备状态</td>
  97. 						<td>是否共享</td>
  98. 						<td>修改设备</td>
  99. 					</tr>
  100. 					<tr>
  101. 						<td><input type="checkbox"></td>
  102. 						<td>网络摄像头</td>
  103. 						<td>计算机网络设备</td>
  104. 						<td>0001</td>
  105. 						<td>2021/10/30</td>
  106. 						<td style="color: red;">设备异常</td>
  107. 						<td><img src="img/device-1.png" /></td>
  108. 						<td><img src="img/share-1.png" /></td>
  109. 						<td><img src="img/equi-icon2.png" /></td>
  110. 					</tr>
  111. 					<tr>
  112. 						<td><input type="checkbox"></td>
  113. 						<td>智能终端</td>
  114. 						<td>集成开发版设备</td>
  115. 						<td>0010</td>
  116. 						<td>2021/10/30</td>
  117. 						<td style="color: green;">设备正常</td>
  118. 						<td><img src="img/device-1.png" /></td>
  119. 						<td><img src="img/share-1.png" /></td>
  120. 						<td><img src="img/equi-icon2.png" /></td>
  121. 					</tr>
  122. 					<tr>
  123. 						<td><input type="checkbox"></td>
  124. 						<td>移动电话</td>
  125. 						<td>算法与数据设备</td>
  126. 						<td>0011</td>
  127. 						<td>2021/10/30</td>
  128. 						<td style="color: green;">设备正常</td>
  129. 						<td><img src="img/device-1.png" /></td>
  130. 						<td><img src="img/share-1.png" /></td>
  131. 						<td><img src="img/equi-icon2.png" /></td>
  132. 					</tr>
  133. 					<tr>
  134. 						<td><input type="checkbox"></td>
  135. 						<td>平板电脑</td>
  136. 						<td>IDE开发设备</td>
  137. 						<td>0100</td>
  138. 						<td>2021/10/30</td>
  139. 						<td style="color: green;">设备正常</td>
  140. 						<td><img src="img/device-1.png" /></td>
  141. 						<td><img src="img/share-1.png" /></td>
  142. 						<td><img src="img/equi-icon2.png" /></td>
  143. 					</tr>
  144. 					<tr>
  145. 						<td><input type="checkbox"></td>
  146. 						<td>STM32开发班</td>
  147. 						<td>底层架构设备</td>
  148. 						<td>0101</td>
  149. 						<td>2021/10/30</td>
  150. 						<td style="color: green;">设备正常</td>
  151. 						<td><img src="img/device-1.png" /></td>
  152. 						<td><img src="img/share-1.png" /></td>
  153. 						<td><img src="img/equi-icon2.png" /></td>
  154. 					</tr>
  155. 					<tr>
  156. 						<td><input type="checkbox"></td>
  157. 						<td>树莓派开发板</td>
  158. 						<td>链路层设备</td>
  159. 						<td>0110</td>
  160. 						<td>2021/10/30</td>
  161. 						<td style="color: green;">设备正常</td>
  162. 						<td><img src="img/device-1.png" /></td>
  163. 						<td><img src="img/share-1.png" /></td>
  164. 						<td><img src="img/equi-icon2.png" /></td>
  165. 					</tr>
  166. 				</table>
  167. 				<span><img src="img/tj.jpg">|<img src="img/sc.jpg"></span>
  168. 				<span style="float: right; margin-right: 200px;"><button type="button">首页</button>
  169. 					<button type="button" style="border: none; background: none; font-weight: bold;">1</button>
  170. 					<button type="button" style="border: none; background: none; font-weight: bold;">2</button>
  171. 					<button type="button" style="border: none; background: none; font-weight: bold;">3</button>
  172. 					<button type="button" style="border: none; background: none; font-weight: bold;">...</button>
  173. 					<button type="button">下一页</button>
  174. 					<button type="button">尾页</button>
  175. 				</span>
  176. 			</div>
  177. 		</div>
  178. 	</body>
  179. </html>

3.CSS的源码

  1. .head{
  2. 	height: 100px;
  3. 	width: 100%;
  4. 	margin: 0;
  5. 	background-color: cornflowerblue;
  6. }
  7. .head-left{
  8. 	height: px;
  9. 	width: 500px;
  10. }
  11. .head-left img {
  12. 	padding-top: 20px;
  13. 	padding-left: 20px;
  14. 	float: left;
  15. }
  16. .head-right-top{
  17. 	width: 600px;
  18. 	height: 20px;
  19. 	float: right;
  20. 	margin-right: 20px;
  21. 	margin-bottom: 3px;
  22. }
  23. .head-right-top>ul{
  24. 	margin: 0;
  25. 	padding: 0;
  26. 	list-style: none;
  27. 	margin-right: 20;
  28. }
  29. .head-right-top li{
  30. 	float: right;
  31. 	padding-left: 6px;
  32. }
  33. .head-right-top a{
  34. 	margin-left: 10px;
  35. 	text-decoration: none;
  36. }
  37. .head-right-bottom{
  38. 	height: 40px;
  39. 	width: 600px;
  40. 	float: right;
  41. }
  42. .head-right-bottom>ul{
  43. 	text-align: center;
  44. 	margin: 0;
  45. 	padding: 0;
  46. 	list-style-type: none;
  47. 	margin-right: 20px;
  48. }
  49. .head-right-bottom li{
  50. 	float: right;
  51. 	padding-left: 14px;
  52. }
  53. .head-right-bottom img{
  54. 	width: 25px;
  55. 	height: 25px;
  56. }.head-right-bottom p{
  57. 	color: white;
  58. 	font-size: 15px;
  59. }
  60. .content-left{
  61. 	width: 200px;
  62. 	height: 1000px;
  63. 	background-color: lightskyblue;
  64. }
  65. .content-left p{
  66. 	display: inline;
  67. }
  68. .left_1>p{
  69. 	color: black;
  70. 	line-height: 30px;
  71. }
  72. .left_2>p{
  73. 	color: white;
  74. 	line-height: 25px;
  75. }
  76. .left_2{
  77. 	margin-left: 30px;
  78. }
  79. .content_right{
  80. 	position: absolute;
  81. 	left: 210px;
  82. 	top: 107px;
  83. }
  84. .control_right_top{
  85. 	width: 1500px;
  86. 	height: 30px;
  87. 	margin-bottom: 2px;
  88. }
  89. .content_table table{
  90. 	width: 1200px;
  91. 	height: 500px;
  92. 	text-align: center;
  93. }

 
 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发