如何摆脱菜鸟界面（一）

最新推荐文章于 2022-09-14 07:41:25 发布

_赵丹丹

最新推荐文章于 2022-09-14 07:41:25 发布

阅读量4.4k

点赞数 16

分类专栏： web前台 Java基础文章标签： class xhtml table 网络 div html

本文链接：https://blog.csdn.net/dandan8866/article/details/7533609

版权

Java基础同时被 2 个专栏收录

72 篇文章 1 订阅

订阅专栏

web前台

8 篇文章 0 订阅

订阅专栏

最近这段时间一直在做一个项目的web界面，在这段期间，经历了心理和技术上的考验，而事实也证明我还只是一个“菜鸟”，但是通过这次经验，知道了菜鸟与大鸟的区别，今天就来跟大家一起分享一下，如何摆脱一看就能被戳穿的菜鸟界面。

本文中所谓的菜鸟界面即我这些天的经历，通过多次被上司指正，多次的修改，最终界面才可以入眼。

你是否也设计过类似下面的界面？

菜鸟界面一：“杂乱无章”

一个界面设计的好与坏，不仅仅是通过展现出来的界面来判定的，更是需要观看你是如何实现的，大鸟与菜鸟的区别就在于界面的背后是如何工作的。

一个菜鸟的界面代码往往是杂乱无章，东拼西凑，毫无设计可言，偶尔有几个好的地方也说不出个所以然，问之，答曰：“摘自网络”。

而对于大鸟们，我们可以通过它的代码看出他的设计思路，因为他们着重于设计，所以写出来的代码非常精简，看起来都会赏心悦目。

菜鸟界面二：“照搬网络”

作为一个编程人员，遇到问题谁都知道百度谷歌一下，但是同样是使用网络，那么菜鸟和大鸟的差别又体现在哪里呢？

当一个菜鸟一遇到技术上的问题，就立刻上网搜集答案，恨不得有跟自己情景一模一样的答案（这个过程还是相当曲折的），然后照抄下来，在自己机器上一运行，不行？接着找……找啊找啊找啊找，实在不行，自己在基础上更改几个参数，最终运行成功？啊，谢天谢地，终于出来了！

而大鸟们可不会这样，当他们遇到问题时，先静下心来进行分析，然后设计出自己的思路，进而将自己不懂的“点”通过网络来解决，最后思路走通，自己开始着手写代码，顺利实现自己所需功能。

看出来区别了吗？菜鸟们把网络当“万能解决器”，而大鸟们只是拿它当“工具”，如何运用网络，需要我们自己去思考，或许你现在作为一个菜鸟，你的问题网上都可以解决，但当有一天，网上没有你所需要的东西的时候怎么办呢？

菜鸟界面三：“推倒重来”

由于菜鸟们不会设计，没有经验，考虑不周，导致到达后期一发现问题，就卷土重来，最后导致工期延误。

而大鸟们则是提前把可能会发生的情况都进行了考虑，然后才设计自己的界面，最后菜鸟们遇到的问题早在大鸟这里规避掉了，提前完工，效率又高，面对这样的员工，有哪个老板不喜欢呢？

上面说了菜鸟界面的三大表现，下面我们就来展示一下菜鸟跟大鸟的界面及代码：同样是制作一个表格显示数据的界面，一个使用table，一个使用div。

菜鸟代码和界面：（使用table）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/basePage.dwt.jsp" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#permission_main table {
	width:100%;
}

#permission_main .rowShow {
	border-top:1px solid #CCCCCC;
}

#permission_main .rowShow:hover  {
	
	background:#DCEAC0 !important;
	cursor:pointer;
}

#permission_main .colId {
		width:350px;
}
#permission_main .col {
	border-right:1px solid #ccc;
	border-bottom:1px solid #CCCCCC;
	height:35px;
	line-height:35px;
}
#permission_main .colF {
	width:60px;
	overflow: hidden;
    white-space: nowrap;
}

#permission_main .colB {
	border-bottom:none;
	border-right:1px solid #CCCCCC;
	height:35px;
	line-height:35px;
}
#permission_main .colR {
	border-right:none;
	border-bottom:1px solid #CCCCCC;
	overflow: hidden;
    white-space: nowrap;
}

#permission_main .title {
	font-weight:bold;
}
</style>
</head>
<body>
<table>
  <tr class="rowShow">
	<td  class="colF title col"><input name="rowNum000" type="checkbox" title="全选" id="ifAll" onClick="checkAll()"></td>
	<td class="title colId col" >角色id </td>
	<td class="title nowrap colR">角色名称 </td>
  </tr>
  <%
	for(int i=0;i<10;i++)
	{
  %>
	  <tr class="rowShow"  >
		<td  class="colF col">
		<input type="checkbox"  class="checkbox1" value=""></td>
		<td class="colId col" >100<%=i+1%> </td>
		<td class="nowrap colR">赵丹丹<%=i+1%> </td>
	  </tr>
  <%
	}
  %>
 <tr class="rowShow" >
	<td   class="colF colB"><input type="checkbox" class="checkbox1" value=""></td>
	<td class="colId colB" >1010 </td>
	<td class="nowrap">赵丹丹10 </td>
  </tr>
</table>
</body>
</html>

大鸟代码和界面：（使用div）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/basePage.dwt.jsp" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* {
	margin:0;
	padding:0
}
body{
	height:100%;
}

.table {
	float: left;
	width: 90%;
	min-width: 250px;
	max-height: 550px;
	margin: 10px auto auto 10px;
	text-align: center;
	background-color: #FFFFFF;
}

.table .tr {
	height: 24px;
	border: 1px solid #B4B4B4;
	border-top: none;
}

.table .th {
	height: 24px;
	background-color: #F2F2F2;
	border: 1px solid #B4B4B4;
}

.table .td {
	padding: 5px 0px;
	float: left;
}

.table .cchk{
	width: 24px;
}

.table .cid {
	width: 50px;
}

.table .cc {
	width: 70%;
}

.table .tr:hover {
	/*
	background-color: #E7E4E1;
	*/
	background-color: #FAFAD3;
	cursor: pointer;
}
</style>
<head>
</head>
<body>
<div id="table" class="table" οncοntextmenu="return tr_rightclick()">
	<div class="th">
		<div class="td cchk">
			<input type="checkbox" οnclick="checkAll(this)">
		</div>
		<div class="td cid">角色id</div>
		<div class="td cc">角色名称</div>
	</div>
  <%
	for(int i=0;i<10;i++)
	{
  %>
	 <div class="tr" οnclick="tr_click(i+1)">
		<div class="td cchk">
			<input type="checkbox" id="chk<%=i+1%>" οnclick="tr_click(<%=i+1%>)">
		</div>
		<div class="td cid">100<%=i+1%></div>
		<div class="td cc">赵丹丹<%=i+1%></div>
	</div>
  <%
	}
  %>					
</div>
</body>
</html>

看到了菜鸟与大鸟们的区别，那么我们该如何摆脱菜鸟界面呢？请看《如何摆脱菜鸟界面（二）》。

_赵丹丹

关注

16
点赞
踩
9

收藏

觉得还不错? 一键收藏
34
评论
如何摆脱菜鸟界面（一）

最近这段时间一直在做一个项目的web界面，在这段期间，经历了心理和技术上的考验，而事实也证明我还只是一个“菜鸟”，但是通过这次经验，知道了菜鸟与大鸟的区别，今天就来跟大家一起分享一下，如何摆脱一看就能被戳穿的菜鸟界面。本文中所谓的菜鸟界面即我这些天的经历，通过多次被上司指正，多次的修改，最终界面才可以入眼。你是否也设计过类似下面的界面？菜鸟界面一：“
复制链接

扫一扫