Welcome, Old Sport!

Metro风格的个人简历网页模板

by ilikecss ON 2012/08/29 11925

Metro风格的个人简历网页模板休息了几天,好久没更新了,垃圾评论可不会罢工,上来除草。久违的前端分享又来了,这次分享一款流行的Metro UI风格的网页模板,模板由四部分组成,较简单。工作项目添加了lightbox效果,邮件提供jQuery报错提示功能。HTML和CSS较长,下面就不全贴出来了,大家可以在最后下载后自己查看,不多说,上菜。

Step1. 创建HTML

<!-- 网站导航 -->
<div id="left">
    <ul id="navigation">
        <li><a class="about" href="#">about me</a></li>
        <li><a class="work" href="#">my work</a></li>
        <li><a class="social" href="#">my social</a></li>
        <li><a class="contact" href="#">contact me</a></li>
    </ul>
</div>
<!-- 网站内容部分 -->
<div id="right">
    <div id="container">
        <ul id="content">
            <li id="about" class="content-block"></li>
            <li id="work"></li>
            <li id="social"></li>
            <li id="contact"></li>
        </ul>
    </div>
</div>

Step2. 创建CSS

<!-- 导航的脚本 -->
<script type="text/javascript">
	$(document).ready(function(){
		$('#navigation a.about').css('opacity','0.6');
		$('ul#navigation li').hover(function(){
			$(this).stop().animate({marginRight:6}, 250);
			}, function(){
				$(this).stop().animate({marginRight:0}, 250)
		});
		$('#navigation a.about').click(function(){
			$('#content').animate({'top':'0'},700);
			$('#navigation a').css('opacity','1');
			$(this).css('opacity','0.6');
		});
		$('#navigation a.work').click(function(){
			$('#content').animate({'top':'-560'},700);
			$('#navigation a').css('opacity','1');
			$(this).css('opacity','0.6');
		});
		$('#navigation a.social').click(function(){
			$('#content').animate({'top':'-1120'},700);
			$('#navigation a').css('opacity','1');
			$(this).css('opacity','0.6');
		});
		$('#navigation a.contact').click(function(){
			$('#content').animate({'top':'-1680'},700);
			$('#navigation a').css('opacity','1');
			$(this).css('opacity','0.6');
		});

		// contact form validation
		var hasChecked = false;
		$(".standard #submit").click(function () { 
			hasChecked = true;
			return checkForm();
		});
		$(".standard #name,.standard #email,.standard #message").live('change click', function(){
			if(hasChecked == true)
			{
				return checkForm();
			}
		});
		function checkForm()
		{
			var hasError = false;
			var emailReg = /^([\w-\.] @([\w-] \.) [\w-]{2,4})?$/;

			if($(".standard #name").val() == '') {
				$(".standard #error-name").fadeIn();
				hasError = true;
			}else{
				$(".standard #error-name").fadeOut();
			}
			if($(".standard #email").val() == '') {
				$(".standard #error-email").fadeIn();
				hasError = true;
			}else if(!emailReg.test( $(".standard #email").val() )) {
				$(".standard #error-email").fadeIn();
				hasError = true;
			}else{
				$(".standard #error-email").fadeOut();
			}
			if($(".standard #message").val() == '') {
				$(".standard #error-message").fadeIn();
				hasError = true;
			}else{
				$(".standard #error-message").fadeOut();
			}
			if(hasError == true)
			{
				return false;
			}else{
				return true;
			}
		}
		// end contact form validation
	});
</script>
<!-- Lightbox的脚本ID -->
<script type="text/javascript">
	$(document).ready(function(){
		$('#work ul li a').lightBox();
	});
</script>
<!-- Cufon字体脚本 -->
<script type="text/javascript">
    Cufon.replace('ul#navigation li a', { textShadow: '0 2px rgba(0, 0, 0, 0.2)' });
</script>
<script type="text/javascript">
    Cufon.replace('#social ul li a', {hover:true});
</script>
25条评论
  1. #1

    Marvin说道:

    这个内容太少了

  2. #2

    体验盒子说道:

    效果还不错,特意试了下IE6下效果,还是不兼容,如真喜欢,还得再改改

  3. #3

    笑熬浆糊4说道:

    thank you! :sad:

  4. #4

    Ahern说道:

    博主,github链接失效了哦

  5. #5

    kk说道:

    To airoschou

    可否也發一個給我,謝謝謝!!

    ayre333@yahoo.com.hk

  6. #6

    topsts说道:

    能不能也给我一份 :roll:
    zyh@topsts.cn
    谢谢博主~

  7. #7

    sikes说道:

    能不能也给我一份
    24163908@qq.com
    谢谢博主

  8. #8

    sikes说道:

    能不能也给我一份
    24163908@qq.com
    谢谢博主~

  9. #9

    tonnytong说道:

    博主能不能给我一份呢,觉得效果好赞。
    邮箱1012128388@qq.com
    谢谢博主

  10. #10

    luminos说道:

    楼主求发一份学习一下
    330939204@qq.com




TOP