Quay lại-
0
-
0
-
FacebookGiới thiệu sản phẩm
Hoàn tất đăng ký Google One … Mua 2 TB dùng cho Drive, Gmail và Google Photos. 225.000 ₫ 56.250 ₫/tháng trong 2 tháng.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Giới thiệu bản thân + Phân trang đơn giản</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* Một số style nhỏ cho phân trang */
.pagination li {
cursor: pointer;
}
.pagination li.disabled {
cursor: not-allowed;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="container my-5">
<!-- Giới thiệu bản thân -->
<section id="about" class="mb-4 text-center">
<img src="https://i.pinimg.com/736x/89/63/81/8963810efc7075be5540338fe16dd248.jpg" width="150px" alt="Ảnh cá nhân" class="rounded-circle mb-3" />
<h1>Trần Thị B</h1>
<p>Giáo viên lập trình, yêu thích HTML, CSS, JS và Bootstrap.</p>
</section>
<!-- Danh sách dự án -->
<section id="projects">
<h3>Danh sách sách</h3>
<div id="project-list" class="row gy-3 mb-3">
<!-- Dự án sẽ hiện ở đây -->
</div>
<!-- Nút phân trang -->
<ul id="pagination" class="pagination justify-content-center"></ul>
</section>
</div>
<script>
// 1. Dữ liệu dự án mẫu
const projects = [];
for(let i=1; i<=30; i++) {
projects.push({ id: i, title: `Cuốn sách số ${i}`, author: `Tác giả: tác giả số ${i}`, description: `Đây là mô tả ngắn về cuốn sách số ${i}` });
}
const itemsPerPage = 5; // số dự án mỗi trang
let currentPage = 1;
const totalPages = Math.ceil(projects.length / itemsPerPage);
// 2. Hàm hiển thị dự án theo trang
function showProjects(page) {
const projectList = document.getElementById('project-list');
proje
Hãy bình luận để nhặt 100 thóc nhé
Sản phẩm cùng tác giả
-
Nhà sáng tạo Trần Lâm Nguyên 15 tuổifghjkfvghjkghjkvbnm ksjnsjhfdhghsdzhfdjfjfsfiffjf -
Nhà sáng tạo Trần Lâm Nguyên 15 tuổi................... -
Nhà sáng tạo Trần Lâm Nguyên 15 tuổi1234567890-=qưertyuiop
Đăng nhập để tham gia bình luận