MD测试
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible"content="ie=edge" />
<title>lijunhao2023的博客</title>
<!-- Font Awesome -->
<link rel="stylesheet"href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet"href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
<!-- MDB -->
<link rel="stylesheet"href="css/mdb.min.css" />
<!-- Custom styles -->
<link rel="stylesheet"href="css/style.css" />
</head>
<body>
<header>
<!-- Intro settings -->
<style>
#intro {
/* Margin to fix overlapping fixed navbar */
margin-top: 58px;
}
@media (max-width: 991px) {
#intro {
/* Margin to fix overlapping fixed navbar */
margin-top: 45px;
}
}
</style>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
<div class="container-fluid">
<button class="navbar-toggler"type="button"data-mdb-toggle="collapse"data-mdb-target="#navbarExample01"
aria-controls="navbarExample01"aria-expanded="false"aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse"id="navbarExample01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link"aria-current="page"href="#intro">主页</a>
</li>
<li class="nav-item">
<a class="nav-link"href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"rel="nofollow"
target="_blank">Learn Bootstrap 5</a>
</li>
<li class="nav-item">
<a class="nav-link"href="https://mdbootstrap.com/docs/standard/"target="_blank">Download MDB UI KIT</a>
</li>
</ul>
<ul class="navbar-nav d-flex flex-row">
<!-- Icons -->
<li class="nav-item me-3 me-lg-0">
<a class="nav-link"href="https://github.com/lijunhao2023/lijunhao2023.github.io"rel="nofollow"target="_blank">
<i class="fab fa-github"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Jumbotron -->
<div id="intro"class="p-5 text-center bg-light">
<h1 class="mb-3 h2">lijunhao2023的博客</h1>
<p class="mb-3">由lijunhao2023搭建</p>
<div class="text-center py-4 align-items-center">
<a href="https://www.luogu.com.cn/user/487106"class="btn btn-primary m-1"role="button">
我的洛谷博客
</a>
<a href="https://www.cnblogs.com/lijunhao2023/"class="btn btn-warning m-1"role="button"rel="nofollow"
target="_blank">
我的博客园
</a>
<a href="https://pixaloj.github.io"class="btn btn-success m-1"role="button"rel="nofollow"
target="_blank">
PixalOJ
</a>
</div>
</div>
<!-- Jumbotron -->
</header>
<!--Main Navigation-->
<!--Main layout-->
<main class="my-5">
<div class="container">
<!--Section: Content-->
<section class="text-center">
<h4 class="mb-5"><strong>最近的博客</strong></h4>
<div class="row">
<div class="col-lg-4 col-md-12 mb-4">
<div class="card">
<div class="bg-image hover-overlay ripple"data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/184.jpg"class="img-fluid" />
<a href="#!">
<div class="mask"style=""></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Post title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
<a href="#!"class="btn btn-primary">Read</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<div class="bg-image hover-overlay ripple"data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg"class="img-fluid" />
<a href="#!">
<div class="mask"style=""></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Post title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
<a href="#!"class="btn btn-primary">Read</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<div class="bg-image hover-overlay ripple"data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/111.jpg"class="img-fluid" />
<a href="#!">
<div class="mask"style=""></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Post title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
<a href="#!"class="btn btn-primary">Read</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-12 mb-4">
<div class="card">
<div class="bg-image hover-overlay ripple"data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/002.jpg"class="img-fluid" />
<a href="#!">
<div class="mask"style=""></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Post title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
<a href="#!"class="btn btn-primary">Read</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<div class="bg-image hover-overlay ripple"data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/022.jpg"class="img-fluid" />
<a href="#!">
<div class="mask"style=""></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Post title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
<a href="#!"class="btn btn-primary">Read</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<div class="bg-image hover-overlay ripple"data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/standard/nature/035.jpg"class="img-fluid" />
<a href="#!">
<div class="mask"style=""></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Post title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
<a href="#!"class="btn btn-primary">Read</a>
</div>
</div>
</div>
</div>
</section>
<!--Section: Content-->
<!-- Pagination -->
<nav class="my-4"aria-label="...">
<ul class="pagination pagination-circle justify-content-center">
<li class="page-item">
<a class="page-link"href="#"tabindex="-1"aria-disabled="true"> 上一页 </a>
</li>
<li class="page-item active"aria-current="page">
<a class="page-link"href="#">1 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item">
<a class="page-link"href="#"> 下一页 </a>
</li>
</ul>
</nav>
</div>
</main>
<!--Main layout-->
<!--Footer-->
<footer class="bg-light text-lg-start">
<hr class="m-0" />
<div class="text-center py-4 align-items-center">
<p>关注我</p>
<a href="https://www.luogu.com.cn/user/487106"class="btn btn-primary m-1"role="button">
洛谷
</a>
<a href="https://github.com/lijunhao2023"class="btn btn-black m-1"role="button"rel="nofollow"
target="_blank">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Copyright -->
<div class="text-center p-3"style="">
© 2021 Copyright lijunhao2023.Powered by MDB.
</div>
<!-- Copyright -->
</footer>
<!--Footer-->
<!-- MDB -->
<script type="text/javascript"src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"src="js/script.js"></script>
</body>
</html>
浙公网安备 33010602011771号