一个简单的个人导航页html源码

 <!DOCTYPE html>
<html lang="zh-cn">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>xxx个人导航页</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
 
    body {
      background: linear-gradient(to bottom right, #ff99cc, #66ccff);
    }
    .nav {
        margin-top: 25px;
    }
 
   .nav-link {
      color: #333;
      font-size: 18px;
      border: 1px solid #ddd;
      padding: 10px 20px;
      margin-right: 10px;
      border-radius: 5px;
    }
 
   .nav-link:hover {
      color: #007bff;
    }
 
   .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
 
    .container2 {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 80vh;
      background-color: rgba(255, 255, 255, 0.85);
      padding: 25px;
      border-radius: 2%;
      box-shadow: #ddd;
    }
 
 
    nav ul {
      list-style: none;
      padding: 0;
      display: flex;
    }
  </style>
</head>
 
<body>
 
  <div class="container">
    <div class="container2">
    <h1>printf("xiin\n");</h1>
    <nav>
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="https://www.cnblogs.com/xiins">博客 / blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">论坛 / bbs</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">QQ: xxx</a>
        </li>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Mail: xxx</a>
        </li>
      </ul>
    </nav>
    </div>
    <div class="copyright">
        © 2024 xxx All Rights Reserved.
    </div>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
 
</html>

发布于 2024-09-13 21:27 xiins

阅读(824) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Less is richness，基于less is more的博客园宽屏主题魔改

· Vue 项目结构参考

· 分享一个好看的个人主页源码

· 一个非常简单简洁的自适应导航栏

· 一个html5写的简单导航页面

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

一个简单的个人导航页html源码

公告

关于我

我的标签

随笔分类 (105)

目录导航

	<!DOCTYPE html>
	<html lang="zh-cn">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>xxx个人导航页</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>

	body {
	background: linear-gradient(to bottom right, #ff99cc, #66ccff);
	}
	.nav {
	margin-top: 25px;
	}

	.nav-link {
	color: #333;
	font-size: 18px;
	border: 1px solid #ddd;
	padding: 10px 20px;
	margin-right: 10px;
	border-radius: 5px;
	}

	.nav-link:hover {
	color: #007bff;
	}

	.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	}

	.container2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 80vh;
	background-color: rgba(255, 255, 255, 0.85);
	padding: 25px;
	border-radius: 2%;
	box-shadow: #ddd;
	}


	nav ul {
	list-style: none;
	padding: 0;
	display: flex;
	}
	</style>
	</head>

	<body>

	<div class="container">
	<div class="container2">
	<h1>printf("xiin\n");</h1>
	<nav>
	<ul class="nav">
	<li class="nav-item">
	<a class="nav-link" href="https://www.cnblogs.com/xiins">博客 / blog</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#">论坛 / bbs</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#">QQ: xxx</a>
	</li>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#">Mail: xxx</a>
	</li>
	</ul>
	</nav>
	</div>
	<div class="copyright">
	© 2024 xxx All Rights Reserved.
	</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
	</body>

	</html>