如何摆脱菜鸟界面（一）

最新推荐文章于 2024-09-07 08:00:00 发布

墨子哲

最新推荐文章于 2024-09-07 08:00:00 发布

阅读量874

点赞数

分类专栏： HTML+CSS+JS/JQUERY 文章标签：网络 table html border div float

HTML+CSS+JS/JQUERY 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[html] view plain copy

<!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">
<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）

[html] view plain copy

<!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">
<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" oncontextmenu="return tr_rightclick()">
<div class="th">
<div class="td cchk">
<input type="checkbox" onclick="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" onclick="tr_click(i+1)">
<div class="td cchk">
<input type="checkbox" id="chk<%=i+1%>" onclick="tr_click(<%=i+1%>)">
</div>
<div class="td cid">100<%=i+1%></div>
<div class="td cc">赵丹丹<%=i+1%></div>
</div>
<%
}
%>
</div>
</body>
</html>

墨子哲

关注

0
点赞
踩
0

收藏

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

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

扫一扫

专栏目录