html制作个人简历网页

最新推荐文章于 2024-05-06 18:33:50 发布

猫化

最新推荐文章于 2024-05-06 18:33:50 发布

阅读量1.7w

点赞数 26

分类专栏：前端编写(推荐) 项目经验(后端) 文章标签： java html js css 面试

I from China

本文链接：https://blog.csdn.net/weixin_43701595/article/details/106727619

版权

注:

支持二次开发,是我自己写的,因为全程都是调用网上的地址,所以没有任何其他的包需要导入和下载,一个html就可以,~~我最近做了修改,添加了一个唯美标签的js~~
希望大家仅做参考,毕竟每个人做出来的都是不一样的,只有你去做了,它才是你自己的

效果图

在这里插入图片描述

附赠:

html代码在线运行工具(推荐)

html+js在线运行工具

源码分享

个人简历网页.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>王宇东的个人简历</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 引入 bootstrap4.js -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <!-- 引入 echarts主题 -->
  <script src="https://www.runoob.com/static/js/wonderland.js"></script>
  <!-- 樱花特效引入,会和唯美标签冲突从而不显示,就注掉了 -->
  <!-- <script src="https://files.cnblogs.com/files/quaint/sakuraPlus.js"></script> -->
  <!-- 唯美标签引入 -->
		<script src="./wmbq.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#wmbq{
    position:relative;height:190px;margin:10px auto 10px;}
			#wmbq a{
    position:absolute;color:#FFFFFF;text-decoration: none;text-align:center;text-overflow:ellipsis;white-space:nowrap;top:0;left:0;padding:3px 5px;border:0;transition:none;}
			#wmbq a:hover{
    background: none; display:block;}
			#wmbq a:nth-child(n){
    display:inline-block;line-height:18px;text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px red, 0 0 5px red, 0 0 5px red, 0 0 5px red, 0 0 5px red;}
			#wmbq a:nth-child(2n){
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #FF1177, 0 0 5px #FF1177, 0 0 5px #FF1177, 0 0 5px #FF1177, 0 0 5px #FF1177;}
			#wmbq a:nth-child(3n){
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #228DFF, 0 0 5px #228DFF, 0 0 5px #228DFF, 0 0 5px #228DFF, 0 0 5px #228DFF;}
			#wmbq a:nth-child(4n){
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000;}
			#wmbq a:nth-child(5n){
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #00ffdc, 0 0 5px #00ffdc, 0 0 5px #00ffdc, 0 0 5px #00ffdc, 0 0 5px #00ffdc;}
			#wmbq a:nth-child(6n){
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #ff00de, 0 0 5px #ff00de, 0 0 5px #ff00de, 0 0 5px #ff00de, 0 0 5px #ff00de;}
		</style>
  <style>
    /* 背景渐变色渲染原理 */
    body{
     min-height: 100%; background: linear-gradient(#ffffff,#FFFAD0); }
    .fakeimg {
    
        height: 380px;
        background: #aaa;
    }
    #grad1 {
    
    height: 400px;
      background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(16,33,106,1));
    }
  </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<div class="jumbotron text-center" style="margin-bottom:0" id="grad1">
    <br/>
    <h1>王先生 21岁</h1>
    <h2>☾腾讯云工坊班☆企业SaaS开发☆CSDN Lv4☽</h2>
    <br/>
    <p>软件设计有两种方式：一种方式是,使软件过于简单,明显没有缺陷；另一种方式是,使软件过于复杂,没有明显的缺陷。—C.A.R. Hoare</p>
    <h3>想应聘的岗位:Java实习生</h3>
    <br/>
  <div class="container">          
    <table class="table table-striped">
      <thead>
        <tr>
          <th><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3235483746,549061446&fm=26&gp=0.jpg" alt="logo" style="width:40px;">xyecy1314@qq.com</th>
          <th><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=507605381,3084649466&fm=26&gp=0.jpg" alt="logo" style="width:40px;">156-1963-2607</th>
        </tr>
      </thead>
    </table>
  </div>
</div>
<!-- 滚动监听 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  
    <!-- logo -->
    <a class="navbar-brand" href="#">
        <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/edca5131cdf6336989582c5d44af5652_222_222.jpg" alt="logo" style="width:40px;">
    </a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href=</

最低0.47元/天解锁文章

猫化

关注

26
点赞
踩
164

收藏

觉得还不错? 一键收藏
4
评论
html制作个人简历网页

注:支持二次开发,是我自己写的,因为全程都是调用网上的地址,所以没有任何其他的包需要导入和下载,一个html就可以了,但是希望大家仅做参考,毕竟每个人做出来的都是不一样的,只有你去做了,它才是你自己的效果图源码分享<!DOCTYPE html><html lang="en"><head> <title>王宇东的个人简历</title> <meta charset="utf-8"> <meta nam
复制链接

扫一扫