引言
如何和公司的设计师交流甚多，才知道，公司的设计师，真的是“牛牪犇”，非但如此，他们的眼睛也是犀利到不
行，真的是“1px”必争啊！但也正是因为他们，所以前台确实收获挺多，毕竟前台一直是我的弱项，如今，js，css，
jQuery信手拈来。下边以select的前台效果实现的demo说明一下。
select成长记
先来看看最简单的select是什么效果的~~~
在我们看来，毫无问题啊~~~然而设计师不这么想，且看select的成长记。
设计师要求字体颜色是灰色色调#cecece，并且字体向左移动6px左右的距离。很简单，做吧~~~效果图：
嗯，向左移动了6px，并且颜色也改了，但是现在有一个问题，就是select的所有字体颜色都是灰色，及时选择了
也还是灰色，所以设计师说：选择了之后变成黑色。嗯，还好，可以解决。效果：
但是现在设计师说，这不行啊，如果说选择默认的，还需要变回灰色啊，啊，啊，啊。。。好吧~照办！效果：
到此，我的select效果基本都出来了，虽然几经波折，但是代码确实很简单的，看看吧~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
select{
width:200px;
height:30px;
color:#cecece;
padding:6px 12px;
}
</style>
</head>
<body>
<select id="myselect">
<option value="default">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="myselect2">
<option value="default">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</body>
<script type="text/javascript">
$("select").on("click",function(){
if($(this).val()=="default"){
$(this).css("color","#cecece");
}else{
$(this).css("color","black");
}
});
</script>
</html>总结
这种跟设计的沟通过程中，发现，自己还是需要点强迫症的，眼里揉不得沙子有点太过了，但是这种基本的对审
美的要求还是要有的。相信经过在长城的这段学习时间，我的前台修养会大大的进步。。。
1007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
