小夕流的视觉思维笔记

发芽网的感觉不错哈哈

如下图阴影儿制作:  

分析:此阴影为3层div签套，div02最面外层div01为次外层最后是内容块divMain，一层层叠加起来，再把内部的div01和divMain相对定位position:relative;差开top:-1px; left:-1px;（因为要宽高自适应；阴影是往下右侧差一点点差开的）

div02,border-right:1px solid #eee;border-bottom:1px solid #eee;background:#E1DCDC;

div01,border-right:1px solid #C9C7C7;border-bottom:1px solid #C9C7C7;background:#B8B8B8;

再加背景右下侧描边色彩从内到外由深到浅（如果觉得两两像素差开的阴影过大则可以直接用背景或描边差开1像素）

 完整CSS如下：

.div01{width:auto;height:auto;margin:0 auto;border-right:1px solid #eee;border-bottom:1px solid #eee;background:#E1DCDC;}

.div02{position:relative;top:-1px; left:-1px;width:auto; height:auto;border-right:1px solid #C9C7C7;border-bottom:1px solid #C9C7C7;background:#B8B8B8;}

.divMain{position:relative;top:-1px; left:-1px;background:#fff;width:auto; height:auto; border:1px solid #000;}

结构代码如下：

表单中默认字色彩为灰，放上鼠标后默认字没，再输入字为红。

<input name="textfield" type="text" id="textfield" value="默认的字" style="color:#ccc;" onBlur="if(this.value==''){this.value='默认的字';this.style.color='#ccc'};" onFocus="if(this.value=='默认的字'){this.value='';this.style.color='#f00'}">

一直没整出来，陈CS指点了下写法：

onBlur="this.value='默认的字';this.style.color='#ccc'" onFocus="this.value='';this.style.color='#f00'"

但是这个鼠标只要一失去焦点就会显示‘默认的字’，后看了别人的确哈哈用了个IF,

对于textarea 没有 value值我想直接用 innerHTML 也不错哈哈，试试果然中。

onBlur="if(this.innerHTML==''){this.value='hhhhh';this.style.color='#ccc'};" onFocus="if(this.innerHTML=='hhhhh'){this.value='';this.style.color='#f00'}"

js提出优化后 :

<script>
 function show_menu(num){
  if(num.value==''){
  num.value='ddddd';
  num.style.color='#ccc';
  }
 }
 function show_menu2(num){
  if(num.value=='ddddd'){
  num.value='';
  num.style.color='#f00';
  }
 }
</script>

<input name="textfield" type="text" id="textfield" value="ddddd" style="color:#ccc;" onBlur="show_menu(this)" onFocus="show_menu2(this)">

图片按钮

系统按钮

浏览按钮