文章目录
- 1.设计来源
- 1.1 主界面
- 1.2 关于我界面
- 1.3 我的项目界面
- 1.4 我的经验界面
- 1.5 我的技能界面
- 1.6 我的文章界面
- 1.7 联系我界面
- 2.效果和源码
- 2.1 动态效果
- 2.2 源代码
- 源码下载
- 万套模板,程序开发,在线开发,在线沟通
作者:xcLeigh
文章地址:https://blog.csdn.net/weixin_43151418/article/details/140293771
【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网站源码,大作业个人简历源码
,大作业个人网站源码,页面内容有首页、关于我、我的项目、我的经验、我的技能、我的文章、联系我等功能块,用到菜单、表单、单选/多选、表格、自适应布局、锚点、轮播图、动画等技术点,各种风格都有,代码上手简单,代码独立,可以直接使用。也可直接预览效果。
1.设计来源
1.1 主界面
主界面,该界面左侧是菜单导航,点击三个横杠显示菜单,点击关闭,关闭菜单,点击对应的菜单,跳转到对应的内容。
主界面,该界面右侧内容,是采用了轮播图的方式,展示自己喜欢的图片和生活名言,自己根据实际情况应用;
1.2 关于我界面
关于我界面,该界面是是采用了图文结合+百分比占用,主要介绍自己相关信息,自己根据实际情况应用;
1.3 我的项目界面
我的项目界面,该界面是是采用了单选/多选功能点,瀑布式布局,all代表全部显示,摄影,只显示摄影相关的内容,图文结合,自己根据实际情况应用;
1.4 我的经验界面
我的经验界面,该界面是是采用了TAB和图文结合的轮播图,点击四个经验块,会出现每个经验块对应的文字描述,同事评价块是轮播五个同事对我的评价,这里用的是明星举例,自己根据实际情况应用;
1.5 我的技能界面
我的技能界面,该界面是是分布式排列,展示了我的三个技能大面和每个技能下的技术点,自己根据实际情况应用;
1.6 我的文章界面
我的文章界面,该界面是是图文结合的展示方式,鼠标悬浮出现文章时间、文章名称、文章简介、点击查看文章具体地址和查看更多文章操作,自己根据实际情况应用;
1.7 联系我界面
联系我界面,该界面是表单展示和按钮操作,详细介绍联系我的方式和提供地址邮箱等信息,自己根据实际情况应用;
2.效果和源码
2.1 动态效果
这里是完整的效果演示,可在此代码基础上更加完善功能,支持扩展自己的风格,可以删减内容,打造属于自己的个人网站。
【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网
2.2 源代码
这里是主界面的代码,其他图片、js、css等代码,见下面的 源码下载 ,里面有所有代码资源和相关说明。
<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="徐先生的个人简历、个人主页、个人网站"> <meta name="author" content="徐先生的个人简历、个人主页、个人网站"> <title>徐先生的个人简历、个人主页、个人网站</title> <link rel="stylesheet" href="css/style.css"> <style type="text/css"> html,body,h1, h2, h3, h4, h5, h6,span,a,b{font-family: 华文中宋;} </style> </head> <body> <div class="container-fluid nopadding"> <div class="row nopadding"> <!-- Header start --> <div class="col-md-1 col-sm-1 col-xs-12 header nopadding text-center"> <!-- Logo start --> <div class="logo"> <a href="index.html"><img class="" src="images/logo.png" alt=""> <h2>简历</h2></a> </div> <!-- logo end --> <div class="menu_icon" id="mynav"> <p onclick="openNav()">☰</p> </div> <!-- sidenav start --> <div id="mySidenav" class="sidenav"> <div class="sidenav_left"> <!-- Logo start --> <div class="logo_over hidden-xs"> <a href="index.html"><img src="images/logo.png" alt=""> <h2>简历</h2></a> </div> <!-- Logo end --> <!-- menu start --> <ul id="menu"> <li data-menuanchor="page1" class="active"><a onclick="closeNav()" href="#page1">首页</a></li> <li data-menuanchor="page2"><a onclick="closeNav()" href="#page2">关于我</a></li> <li data-menuanchor="page3"><a onclick="closeNav()" href="#page3">我的项目</a></li> <li data-menuanchor="page4"><a onclick="closeNav()" href="#page4">我的经验</a></li> <li data-menuanchor="page5"><a onclick="closeNav()" href="#page5">我的技能</a></li> <li data-menuanchor="page6"><a onclick="closeNav()" href="#page6">我的文章</a></li> <li data-menuanchor="page7"><a onclick="closeNav()" href="#page7">联系我</a></li> </ul> <!-- menu end --> <div class="menu_close"> <a href="javascript:void(0)" class="closebtn menu_icon" onclick="closeNav()">× 关闭</a> </div> </div> <div class="sidenav_right hidden-xs"> <div class="slogan_over"> <h3>简历内容</h3> </div> </div> </div> <!-- sidenav end --> </div> <!-- Header end --> <!-- content start --> <div class="col-md-11 col-sm-11 col-xs-12 content nopadding"> <!-- Pagepilling start --> <div id="pagepiling"> <!-- Section one area start --> <div class="section" id="section1"> <div id="lionhero" class="owl-carousel owl-theme"> <div class="item"> <div class="slide one"></div> <div class="welcome-text"> <p><b>生活</b><br/>就是一个发现美的过程。</p> <a href="#" class="btn btn-lg btn-light">我的名言<i class="fa fa-angle-right"></i></a> </div> </div> <div class="item"> <div class="slide two"></div> <div class="welcome-text"> <p><b>勤学</b><br/>与其用华丽的外衣装饰自己,不如用知识武装自己。</p> <a href="#" class="btn btn-lg btn-light">我的名言<i class="fa fa-angle-right"></i></a> </div> </div> <div class="item"> <div class="slide three"></div> <div class="welcome-text"> <p><b>突破</b><br/>在困难面前,唯一的选择就是前进。</p> <a href="#" class="btn btn-lg btn-light">我的名言<i class="fa fa-angle-right"></i></a> </div> </div> </div> <!-- more_link start --> <div class="more_link"> <a href="#page2">鼠标向下滚动 <br> <i class="fa fa-angle-down"></i> </a> </div> <!-- more_link end --> </div> <!-- Section one area end --> <!-- Section seven area start --> <div class="section " id="section7"> <!-- intro start --> <div class="intro contact"> <div class="container-fluid nopadding"> <div class="row nopadding "> <div class="col-md-12 contact_form"> <h2>联系我</h2> <!-- contact form area start --> <div class="col-md-6 col-sm-6 nopadding"> <form id="contactForm" class="shake" data-toggle="validator"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <input id="name" type="text" class="form-control" name="Name" autocomplete="off" placeholder="请输入您的名字" required data-error="请输入您的名字"> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-12"> <div class="form-group"> <input id="email" type="email" class="form-control" name="email" autocomplete="off" placeholder="请输入您的邮箱" required data-error="请输入您的邮箱"> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-12"> <div class="form-group"> <input id="msg_subject" type="text" class="form-control" name="msg_subject" autocomplete="off" placeholder="请输入您的主题" required data-error="请输入您的主题"> <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <textarea id="message" class="form-control textarea" rows="3" name="Message" placeholder="请输入您说的内容" required data-error="请输入您说的内容"></textarea> <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <button id="submit" type="submit" class="btn btn-contact">发送消息</button> <div id="msgSubmit" class="h3 text-center hidden"></div> <div class="clearfix"></div> </div> </div> </form> </div> <!-- contact form area end --> <!-- office address area start --> <div class="col-md-5 col-sm-6 office"> <div class="office-details"> <i class="fa fa-map-marker"></i> <span>徐先生的个人简历、个人主页、个人网站, <br>北京市,海淀区.</span> </div> <div class="office-details"> <i class="fa fa-phone"></i> <span>+133 1100 1100, +133 1100 1100</span> </div> <div class="office-details"> <i class="fa fa-envelope"></i> <span>test@126.com</span> </div> </div> <!-- office address area end --> <!-- social icon start --> <div class="col-md-1 col-sm-12 social_icon text-right"> <ul class="member-social"> <li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-weixin"></i></a></li> <li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-qq"></i></a></li> <li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-weibo"></i></a></li> <li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-linkedin"></i></a></li> <li><a href="https://blog.csdn.net/weixin_43151418" target="_blank"><i class=" fa fa-facebook"></i></a></li> </ul> </div> <!-- social icon end --> </div> </div> </div> <div class="footer"> <p>Copyright © 2024.Company name All rights reserved.<a href="https://blog.csdn.net/weixin_43151418" target="_blank">xcLeigh</a> | <a href="https://item.taobao.com/item.htm?id=805108173963" target="_blank">欣晨软件服务</a></p> </div> </div> <!-- intro end --> </div> <!-- Section seven area end --> </div> <!-- Pagepiling end --> </div> <!-- content end --> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/main.js"></script> </body> </html>
复制
源码下载
【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网站源码(源码) 点击下载
万套模板,程序开发,在线开发,在线沟通
- 专业后端大佬在线沟通需求开发
- 专业前端大佬在线沟通需求开发
- 专业网站整套大佬在线沟通需求开发
- 专业毕业设计大佬在线沟通需求开发
- 专业大作业大佬在线沟通需求开发
- 【优惠活动】专属定制,程序在线开发
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA,体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署(有自己的阿里云);
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务;
如🈶合作请联系我,期待您的联系。
注:本文撰写于CSDN平台,作者:xcLeigh(所有权归作者所有),https://blog.csdn.net/weixin_43151418,如果相关下载没有跳转,请查看这个地址,相关链接没有跳转,皆是抄袭本文,转载请备注本文原地址。
亲,码字不易,动动小手,欢迎 点赞 ➕ 收藏,如 🈶 问题请 留言(评论),博主看见后一定及时给您答复,💌💌💌
原文地址:https://blog.csdn.net/weixin_43151418/article/details/140293771(防止抄袭,原文地址不可删除)