html个人简历网页

最新推荐文章于 2024-06-10 10:34:16 发布

置顶

猫化

最新推荐文章于 2024-06-10 10:34:16 发布

阅读量3.4k

点赞数 3

分类专栏：前端编写(推荐) 文章标签： html

I from China

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

版权

html个人简历网页

效果图

在这里插入图片描述

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>☾JavaWeb☆软件技术☆CSDN Lv4☽</h2>
    <br/>
    <p>软件设计有两种方式：一种方式是,使软件过于简单,明显没有缺陷；另一种方式是,使软件过于复杂,没有明显的缺陷。—C.A.R. Hoare</p>
    <h3>想应聘的岗位:钱多就行</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="#section1">专业技能</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">项目经验</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">自我展示</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"

最低0.47元/天解锁文章

猫化

关注

3
点赞
踩
28

收藏

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

html个人简历网页效果图html在线运行传送门源码声明效果图html在线运行传送门源码<!DOCTYPE html><html lang="en"><head> <title>王宇东的个人简历</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
复制链接

扫一扫