热门标签
热门文章
当前位置: article > 正文
【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网站源码_个人主页html
作者：秋刀鱼在做梦 | 2024-08-09 19:00:44
赞
踩
个人主页html
作者：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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
源码下载
【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网站源码（源码） 点击下载
万套模板，程序开发，在线开发，在线沟通
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/954672
推荐阅读
相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
