追求更方便，更简单，更好。   

     遇到问题：

         1.float在设置样式时：node.style.float = "left"; ×

                              node.style.cssFloat = "left";√ ie

                              node.style.styleFloat = "left";√ff 

     学到：

         1.css属性选择器 div[id]{width:200px;height:200px;}

                      img[src][alt]{letter-spacing：5px}//文字间距

         2.script操作外部样式表 node = document.styleSheets[0].cssRules

                                       || document.styleSheets[0].reles;

                                node.seletorTest 属性 = div.special=样式名

      能利用纯网页代码，不带图片，在网页中进行简单的画图，早就是开发者的一个梦想。不过现实似乎不太支持这样的功能。使得一张网页中有大量的图片。也从而降低了那一点点速度。所以，制作简单图形还是使用标签自己画吧。不过html5已经提供了这样的方式。期待噢。

    script画正方体

    1.用什么画？

       div拼线条。

    2.支持平台？

       ie+ff(已测)

   3.效果：

 http://s5/middle/53358777x7a40ed7c5d54&690

 网页代码：

javascript代码：

一句代码创建长方体：    
   my_solid($("cubiod_navigation"),"1000px","80px","red","green","blue");

下面是封装：

   //左三角
   function left_triangle(node,color){
    var height = parseInt(defaultView(node.parentNode,"height"));
    var i = 0;
    for(i=0; i<height; i++){
     node.a( ct("div",null,null,{"width":i+"px","marginLeft":Math.abs(i-height)+"px","height":"1px","display":"block","backgroundColor":color}) );
    }
    return node;
   }
   
   //右三角
   function right_triangle(node,color){
    var height = parseInt(defaultView(node.parentNode,"height"));
    var i = 0;
    for(i=0; i<height; i++){
     node.a( ct("div",null,null,{"width":height-i+"px","height":"1px","display":"block","backgroundColor":color}) );
    }
    return(node);
   }
   
   function my_solid(node,width,height,upColor,downColor,otherColor){
    var one = get(node.childNodes,1);//得到顶部内容区
    var two = get(node.childNodes,2);//得到底部内容区
    //设置高度，宽度，居中
    setStyle([one,two],{"height":parseInt(height)/2+"px","width":parseInt(width)+"px","margin":"0 auto","display":"block"});
    //顶部颜色
    one.style.backgroundColor = upColor;
    //底部颜色
    two.style.backgroundColor = downColor;
    //创建Div块
    var leftDiv = ct("div",null,null,{"margin":"0 auto","opacity":"0","float":"left"});   //左上方DIV块
    var rightRight = ct("div",null,null,{"margin":"0 auto","float":"right"});//右上方DIV块
    var rightDownRight = ct("div",null,null,{"margin":"0 auto","float":"right","backgroundColor":defaultView(document.body,"backgroundColor")});//右下方DIV块,该DIV的颜色与body颜色相同。
    //添加Div块
    if(one.childNodes.length >= 1){
     //成为第一个最靠左的元素
     one.insertBefore(leftDiv,get(one.childNodes,1))
    }else{
     alert(9)
     one.a(leftDiv);
    }
    one.a(rightRight);
    two.a(rightDownRight);
    //把Div块切三角形使之变成长方体
    right_triangle(leftDiv,defaultView(document.body,"backgroundColor"));//建立右三角,右三角的底色与body底色相同。从而切出三角形
    left_triangle(rightRight,otherColor);//建立左三角,颜色代表第三边上半部分颜色
    right_triangle(rightDownRight,otherColor);//建立右三角，第三边
   }
   

//我的工具方法

  
  
  function ct(tag, text, v, style, cls){
    //创建标签元素
    var node = document_createElement_x_x(tag);
    
    //如有有文本，则添加文本节点
    if(text != undefined && text != null){
     node.a( document_createTextNode(text));
    }
    //设置属性与方法
    for(key in v){
     //如果是个方法，则使用属性赋予指针
     if("function" == typeof v[key]){
      node[key] = v[key];
     //如果是属性，则使用设置属性赋予
     }else{
      //className属性火狐兼容问题。
      if(key == "className"){
       node.className = v[key];
      }else{
       node.setAttribute(key, v[key]);
      }
     }
    }
    
    //设置样式
    for(key in style){
     if(key == "float"){
      if(!empty(node.style.cssFloat)){
       node.style.cssFloat = style[key];
      }else{
       node.style.styleFloat = style[key];
      }
      continue;
     }
     node.style[key] = style[key];
    }
    
    //增加子标签
    for(key in cls){
     node.a(cls[key]);
    }
    
    return node;
   }

  
  
  function $(id){
   return document.getElementByIdx_x_x(id);
  }
  
  
  function send_request(method,url,elements,callback,isN,isXml){
   //创建请求对象
   var xhr = !empty(window.XMLHttpRequest)?new window.XMLHttpRequest():new window.ActiveXObject("Microsoft.XMLHTTP");
   //设置连接数据的监听
   xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){  
     if(xhr.status >= 200 && xhr.status <300 || xhr.status == 304){
      callback(isXml?xhr.responseXML:xhr.responseText);
     }
    }
   };
   url += url.indexOf("?")>0?"&t="+ new Date():"?t="+ new Date();
   if(method == "get")
    url +="&"+get_message(elements);
   //访问连接
   xhr.open(method,url,isN);
   if(method == "post"){
    xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");
    xhr.send(get_message(elements));
   }else{
    xhr.send(null);
   }
  }
  ;
  
  
  function get_message(v){
   var str = "";
   //拼接字面量
   for(key in v){
    //如果是对象
    if(typeof v[key] == "object"){
     for(k in v[key]){
      str += k + "=" +v[key][k]+"&";
     }
    }else{
     str += key + "=" +v[key]+"&";
    }
   }
   //截取掉最后的&符号,并返回拼接后的数据
   return str.substring(0, str.length-1);
  }
  
  //判断元素是否为空
  function empty(element){
   return element == null || element == undefined;
  }
  ;
  
  function add_event(type,ele,method){
   if( !empty(document.attachEvent) )
    ele.attachEvent("on"+type,method);
   else if( !empty(document.addEventListener))
    ele.addEventListener(type,method,false);
   else
    ele[type] = method;
  }
  ;
  //获取触发监听对象
  function getTarget(){
   return empty(window.event)?arguments[0].currentTarget:window.event.srcElement;
  }
  ;
  //取消默认行为
  function preventDefault(target){
   if(empty(target.returnValue)){
    target.returnValue = false;
   }else if(empty(target.preventDefault)){
    target.preventDefault();
   }
  }
  ;
  //得到第i个元素
  function get(nodes,i){
   var tex = 0;
   for(var j=0;j<nodes.length;j++){
    if(nodes[j].nodeType == 1){
     if(++tex == i){
      return nodes[j];
     }
    }
   }
  }
  ;
  
  //得到最终样式
  function defaultView(node,style){
   if(!empty(node.currentStyle)){
    return node.currentStyle[style];
   }else{
    return document.defaultView.getComputedStyle(node,null)[style];
   }
  }
  
  ;
  
  function setStyle(nodes,styles){
   for(key in nodes){
    for(k in styles){
     nodes[key].style[k] = styles[k];
    }
   }
  }
  ;