企业实训收获之--web前端设计

来源：互联网发布：天津网络危机公关公司编辑：程序博客网时间：2024/06/05 12:01

这周系里安排了企业实训，该企业是北京金源万博公司，旗下两个子公司一个是开发接项目的，一个是IT培训的。这两天给我们上课的是开发部的一个技术人员。他这两天给我们主要讲的是web前端的设计。下面来和大家分享一下这两天的收获。

任务一：点击标题，使隐藏内容下滑出现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>廊坊师范学院</title><meta name="description" content="廊坊师范学院计算机系"/><meta name="keywords" content="廊坊，计算机，廊坊师范学院"/><style>div{width:400px;margin:0 auto; border:1px solid #ddd;padding:10px;}h3{font-size:16px;cursor:pointer;}p{font-size:14px;display:none;}</style></head><body><div><h3>学习WEB前端需要什么基础吗？</h3><p>不需要，我们都是从零基础开始讲课。不需要，我们都是从零基础开始讲课。不需要，我们都是从零基础开始讲课。不需要，我们都是从零基础开始讲课。不需要，我们都是从零基础开始讲课。</p></div>      <script type="text/javascript" src="j.js"></script><script>$('h3').click(function(){$('p').slideDown(700);// slow normal fast time})</script></body></html>

这里其实没什么，就是一些布局，他的特效实现关键在于使用了JavaScript包中的slidedown（）这个方法。

效果：

通过这次任务，学会了初级的Html代码，里面是一个简单的css+div+js的代码，比较容易理解。在实现特效的同时，也体会到js的强大，如果没有js的加密文件，要多出很多倍的代码才能完成这个任务。

任务二、点击文字链接，以淡入效果出现弹出层；点击关闭按钮，弹出层以淡出效果消失。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹出层</title><style>div.country{width:613px;margin:0 auto;position:absolute; top:50%; margin-top:-270px;left:50%;margin-left:-306px;z-index:3; display:none;}.close{background:url(images/fancybox.png) no-repeat -42px 0px;display:block; width:30px; height:30px;position:absolute;top:-10px;right:-10px;z-index:3;}.middle{position:absolute;width:100%;height:100%;background:#000;top:0px;left:0px;filter:alpha(opacity=30);opacity:0.3;z-index:2;display:none;}</style></head><body><a href="#" id="select_country">Select Country</a><div class="country"><a href="javascript:;" class="close"></a><img src="images/countries.png" width="613" height="541" alt="country" /></div><div class="middle"></div><script type="text/javascript" src="j.js"></script><script>$('.middle').height($(window).height()).css('opacity','0.3')$('#select_country').click(function(){$('.middle').fadeIn(700);$('.country').fadeIn(1000);return false;})$('.close').click(function(){$('.middle').fadeOut(800);$('.country').fadeOut(700);})</script></body></html>

效果：

这个任务中将整个页面用三个DIV分成三层，并通过添加超链接来加载本地的图片来设计界面，包括图片的居中、绝对位置等，它拥有更加复杂的css样式，而且通过调用JavaScript文件中的淡入淡出的特效使效果做的很绚丽。

任务三、通过阿贾克斯检测用户名是否存在

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>用户注册</title></head><body><form method="POST" action=""><table><tr><td>账号:</td><td><input type="text" name="username" id="username" /></td><td id="user_info">账号由5-20位数字、字母、下划线组成、以字母开头</td></tr><tr><td>密码:</td><td><input type="password" name="password" id="password" /></td><td id="pwd_info"></td></tr><tr><td colspan="2" align="center"><input type="submit" name="register" value="注册" /></td></tr></table></form><script type="text/javascript" src="j.js"></script><script>$('#username').blur(function(){var user = $(this).val(); // 获取用户输入的账号if(user.match(/^\s*$/)){$('#user_info').html('账号不能为空');return false;}if(!user.match(/^[a-zA-Z]\w{4,19}$/)){$('#user_info').html('账号格式不正确');return false;}$.get('users.html',{k:Math.random()},function(result){if(result == 0){$('#user_info').html('该用户已经被注册~请换一个吧');return false;}else if(result == 1){$('#user_info').html('恭喜！~该用户可以注册');return false;}else{alert(result);}})})</script></body></html>

效果：