second class

nothing no very good.
1.look at shuruo.html,after display:inline-block; li's width as the content; So we can learn block element's width as his father,or as the content;
2.if(oList.style.display == 'block'){
    oList.style.display = 'none';
    }else{
    oList.style.display = 'block';
}
better:
oList.style.display == 'block'? 'none':'block';

almost the same
1.to keep it beautiful in html,I made every line not very long;but when alert its innerHTML ,the blank is ungly,I use this.innerHTML.replace(/[\r\n]/g,""); it does not work? I do not know,look at clickDiv1.html.

1.use nagative margin to be center:
 not only the left and top should be 50%,but margin-top:-height;margin-left:-width;
2.close button make
mine:<div id='alert'>
                <div id='head'>
                    <div id='close'></div>
                </div>
            </div>
better:
<div id="win"
><h2><span id="close">×</span></h2></div>
3.遮罩
div:width height 100%; opacity:0.5; when onclick:block;or none;
4.text-align :right; let content to be right ,do not always use position.

1.str become array:str.split(',')
2.正则？？this.value.replace(/[^(\d)|(,)]/,"")

1.only block can add width and text-align

1.mine:use<img>,<img>and <img> born ,have distance
better:use <li>,no distance original
2.use total width to contorl content to go to next line,and the same time you'b better use float ;
3.this function emphsize on margin, father and son ,son and son
son:margin-top,margin-right
father:padding-left padding-bottom

1.每个动作下一步的状态要想一想；例如，就不需要mouseout，加了之后，没有鼠标的时候应该是什么样子呢
2.2行文本不知道怎么换行，《strong》

1.小图标是我画的，巨丑，哈哈

2.background-color如何和background-image 同时存在并同时work

wrong:background-color:#####;background:url()

right:background:#ced3d7 url(img/ico.gif) 180px 15px no-repeat;border-color:#fff #e9edf2;

showpic

1.
var oLi = document.getElementsByTagName('li');

for(var i=0;i<oLi.length;i++){
   oLi[i].onmouseover = function(){
       this.index = i;
       var oSpan = this.getElementsByTagName('span')[0];
       var oImg = this.getElementsByTagName('img')[0];
       oSpan.style.display = 'none';
       oImg.style.display = 'block';
    }

###below is better,directly get element from list
var oLi = document.getElementsByTagName("li");
var oA = document.getElementsByTagName("a");
var oImg = document.getElementsByTagName("img");
for (var i = 0; i < oLi.length; i++)
{
   oA[i].index = oImg[i].index = i;
   oA[i].onmouseover = function() {
   oLi[this.index].className = "zindex";
   oImg[this.index].style.display = "block";
};

2.<div>
　　<ul>
　　　　<li>
li{float:left},if you want ul include li ,you must add ul:after{clear:both;}

1.oImg.src
2.特地用                for(var i=0;i<oLi.length;i++){

 
                   oLi[i].onclick = function(){
                        check_all(true);
                        check_all(false);
                    }
                }

                /////
                function check_all(arg){
                    for(var i=0;i<oLi.length;i++){
                        if(oLi[i].checked !==arg){
                            return 0;
                        }
                    }
                    if(arg){
                        oSpan.innerHTML = '全不选';
                        oAll.checked = true;
                    }
                    if(!arg){
                        oSpan.innerHTML = '全选';
                        oAll.checked = false;
                    }
                }

check 行为理论是一次的，但这样就必须进行了2次，结果是没问题，但感觉很奇怪；下面的优点：
1.利用好了 &&，在oLi[i].checked 为真时才加1
2.利用好了只有所有li的check为真时，oAll才为真，一个li不为真都不行
3.三元表达式
var isCheckAll = function ()
{
       for (var i = 1, n = 0; i < oLi.length; i++)
      {
            oLi[i].checked && n++
        }
       oAll.checked = n == oLi.length - 1;
       oSpan.innerHTML = oAll.checked ? "全不选" : "全选"
 };
/////////////////////////////////////////////////////
要很好的分析逻辑关系,用心就会发现li的真假和oAll同步，省略很多事
oAll.onclick = function(){
                   if (oAll.checked){
                       for(var i=0;i<oLi.length;i++){
                           oLi[i].checked = true;
                       }
                       check_all(true);
                   }
                   else{
                       for(var i=0;i<oLi.length;i++){
                           oLi[i].checked = false;
                       }
                       check_all(false);
                   }
                }

////
oAll.onclick = function(){
  for(var i=0;i<oLi.length;i++){
      oLi[i].checked = oAll.checked;
   }
  isCheckAll();
}