想想好久没写博客了,一来水平太次,二来文采太差。想想这几天写的几个小网页,稍稍的做一个总结,
写一个稍微系统一点的网页才发现,写网页不只是单纯的会写代码;这就成了名副其实的码农了,只会对着电脑写结构,写样式,写动作,敲代码。一旦写完用户不满意又是一个废品,还得重头再来。
一、 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颜色种效果,我们也可以改变属性使其他产生颜色效果。
这次写代码受益良多,有时间多多写写,多多积累,与君共享、与君共勉。不对地方或建议者敬请评论、言说、不吝赐教。