写网页的一次收获

     想想好久没写博客了，一来水平太次，二来文采太差。想想这几天写的几个小网页，稍稍的做一个总结，

     写一个稍微系统一点的网页才发现，写网页不只是单纯的会写代码；这就成了名副其实的码农了，只会对着电脑写结构，写样式，写动作，敲代码。一旦写完用户不满意又是一个废品，还得重头再来。

     一、  so 写网页之前p图很重要，写网页首先应该p一张效果图出来，大小、配色、排版什么的基本规划好。不要以为这是些华而不实的东西，这是写好网页必不可少的一步，无奈，本人ps一窍不通，缺乏艺术细胞啊，略坑(求ps大神指导啊~~)（这次因为我是先写出来再请别人给我配色搭配什么的，结果写代码用了一天，改色居然用了两天，太得不偿失了。以后要吸收经验啊 ==  要想写得系统化一点先p图、后写代码。）

     二、其次想说的是在写的过程中 考虑兼容性很重要 尤其是写css样式。（主要是自己js暂时不太会）。就记录一下此次写网页过程中遇到的css样式兼容问题。

       1. 在写输入框时，在不设置vertical-align:bottom;的情况下ie7浏览器中显示的是出现上一行的偏差效果，而设置vertival-align:bottom；之后则恢复正常。如下一行效果。

      2.在p元素中定义两个默认情况下，紧挨着的span希望第二个在右边，于是第二个使用了float:right; 可在ie7下运行的时候却出现了问题，第二个span偏在了下方右边的位置，因为固定了宽度我换了一种方式解决了这个问题让span的margin-left:700px;

     3.在table的样式里我设置了border-spacing: 0 20px;结果在ie7下又出现了问题，这个效果无效，以致显得特别拥挤，于是我搜索了一下为了兼容ie7我添了语一句border-spacing: expression(this.cellSpacing=20); 这个问题得到了解决。

    4.关于min-height问题，在ie下又是无效，于是在设置样式的时候多添加一话#content{min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 问题就解决了。

    三、在不兼容的情况下，一个网页的动态效果离不开js，如：表单验证、统计网页<input type="checkbox" name="voting" id="name1"/>的点几个数并将数字及时显示在<span id="number">0</span>中、文字闪烁等。都需要js来完成。

以下就是关于这三个功能的解决方法。

    1.表单验证：html代码（略写）

                <form action="vote.html" method="post" name="form_one" onsubmit="return regs('click')">
                    <p>
                        <label for="username">用户名：</label>
                        <input type="text" name="username" id="username" autocomplete="off"/><span class="stats1"></span>
                    </p>
                    <p>
                        <label for="password">密   码：</label>
                        <input type="password" name="password" id="password"/><span class="stats1"></span>
                    </p>
                    <p>
                        <input type="submit" id="submit" value="登录"/>
                        <input type="reset" id="reset" value="重置"/>
                    </p>
                </form>

 

　　     js代码

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function gspan(cobj){       //获取表单后的span 标签 显示提示信息
    if (cobj.nextSibling.nodeName != 'SPAN'){
        gspan(cobj.nextSibling);
    } else {
        return cobj.nextSibling;
    }
}

//检查表单 obj【表单对象】， info【提示信息】 fun【处理函数】  click 【是否需要单击， 提交时候需要触发】
function check(obj, info, fun, click){
    var sp = gspan(obj);
    obj.onfocus = function(){
        sp.innerHTML = info;
        sp.className = 'stats2';
    }
 
    obj.onblur = function(){
        if (fun(this.value)){
            sp.innerHTML = "√";
            sp.className = "stats4";
        } else {
            sp.innerHTML = info;
            sp.className = "stats3";
        }
    }
    if (click == 'click'){
        obj.onblur();
    }
}
addLoadEvent(regs);      //页面载入完执行
 
function regs(click){
    var stat = true;        //返回状态， 提交数据时用到
    var name = document.getElementById("username");
    check(name, "2-10个汉字", function(val){
        if (val.match(/^[\u4E00-\u9FA5]+$/) && val.length >=2 && val.length <=10 ){
            return true;
        }else {
            stat = false;
            return false;
        }
    }, click);
 
     var pass= document.getElementById("password");
    check(pass, "长度为5-20", function(val){
        if (val.match(/^\w+$/) && val.length >=5 && val.length <=20){
            return true;
        } else {
            stat = false;
            return false;
        }
    }, click);
    
    return stat;
}

 

　　css必要的代码

.stats1, .stats2, .stats3, .stats4{ 
    font-size:16px; 
    line-height: 16px;
}
.stats2{
     color: rgb(88, 29, 29);
}
.stats3{
      color: rgb(255, 0, 0); 
}
.stats4{ 
     color: green; 
     font-weight: bold; 
     line-height: 27px; 
     font-size: 27px;
}

效果：1,2,3,4种状态

    2.统计checked的个数。html代码（略写）

<li><label for="name1">投票</label><input type="checkbox" name="voting" id="name1"/></li>
<li><label for="name1">投票</label><input type="checkbox" name="voting" id="name2"/></li>
<li><label for="name1">投票</label><input type="checkbox" name="voting" id="nam3"/></li>
<li><label for="name1">投票</label><input type="checkbox" name="voting" id="name4"/></li>
<li><label for="name1">投票</label><input type="checkbox" name="voting" id="name5"/></li>
<li><label for="name1">投票</label><input type="checkbox" name="voting" id="name6"/></li>
<li><label for="name1">投票</label><input type="checkbox" name="voting" id="name7"/></li>

<p id="count">您已选中<span id="number">XX</span>人，确认投票。<input type="button" id="button" value="投票"/></p>

省略css代码，js代码为

function selectNum(){
    var count = 0;
    var span = document.getElementById("number");
    var ch = document.getElementsByName("voting");
    for(var i=0; i<ch.length; i++){
        if(ch[i].checked){
            if(count >= 5){
                ch[i].checked = false;
                alert("最多只能选5人！");
                 return;
            }
            count++;
        }
    }
    span.innerHTML = count;
}
setInterval('selectNum()', 500); 

效果：如果选中超过5个则提示不能再选中。

3.字体闪烁效果 html代码（略写）

                <span id="vote">
                    <a href="vote.html" id="blink">参与投票</a>
                </span>

js代码

function changeColor(){ 
var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; 
color=color.split("|"); 
document.getElementById("blink").style.color=color[parseInt(Math.random() * color.length)]; 
} 
setInterval("changeColor()",200); 

效果：等11颜色种效果，我们也可以改变属性使其他产生颜色效果。

这次写代码受益良多，有时间多多写写，多多积累，与君共享、与君共勉。不对地方或建议者敬请评论、言说、不吝赐教。