史记《80后传》

史记《80后传》
夫80后者,初从文,未及义务教育之免费,不逮高等学校之分配,适值扩招,过五关,斩六将,硕博相继,数年乃成,负债十万。觅生计,十年无休,披星戴月,秉烛达旦,蓄十万。楼市暴涨,不足购房,遂投股市,翌年缩至万余,抑郁成疾。医保曰,不符大病之条例,拒赔。乃倾其所有,入院一周病无果,因欠费被逐院门。友怜之,赊三鹿一包,冲而饮,卒。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>书籍介绍</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; background-color: #f9f9f9f9; } .book-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 20px; } .book-item { border: 1px solid #ddd; border-radius: 5px; padding: 10px; width: 200px; text-align: center; cursor: pointer; } .book-item img { width: 100%; height: auto; border-radius: 5px; } .book-item h3 { margin: 10px 0; } .book-description { margin: 20px; padding: 20px; border: 1px solid #ddd; border-radius: 5px; width: 80%; background-color: white; } .book-description h2 { margin-top: 0; } .book-description img { width: 100px; height: auto; margin: 10px 0; } .enter-borrowing { margin-top: 20px; padding: 10px 20px; background-color: #ff6b6b; color: white; border: none; border-radius: 5px; cursor: pointer; } </style> </head> <body> <h1>书籍介绍</h1> <div class="book-list"> <div class="book-item" onclick="showDescription('book1')"> <img src="O1CN01JXSrRS1CP1HcgQpqL-101450072.avif" alt="百年孤独"> <h3>百年孤独</h3> </div> <div class="book-item" onclick="showDescription('book2')"> <img src="OIP-C.webp" alt="挪威的森林"> <h3>挪威的森林</h3> </div> <div class="book-item" onclick="showDescription('book3')"> <img src="download.webp" alt="时间简史"> <h3>时间简史</h3> </div> <div class="book-item" onclick="showDescription('book4')"> <img src="O1CN01cBii7J2ADuaLm1YzQ_!!352798170.avif" alt="浪潮之巅"> <h3>浪潮之巅</h3> </div> <div class="book-item" onclick="showDescription('book5')"> <img src="12100263b-0.jpg" alt="史记"> <h3>史记</h3> </div> <div class="book-item" onclick="showDescription('book6')"> <img src="p4YBAFqc1luABOkkAACXf_Ga2PU016_n.jpg" alt="世界历史"> <h3>世界历史</h3> </div> <div class="book-item" onclick="showDescription('book7')"> <img src="OIP-C.jpg" alt="艺术的故事"> <h3>艺术的故事</h3> </div> <div class="book-item" onclick="showDescription('book8')"> <img src="v2-07d883c65d1982f324a2f514cb04cd7e_r.jpg" alt="美的历程"> <h3>美的历程</h3> </div> </div> <div class="book-description" id="bookDescription"> <!-- 书籍描述将在这里显示 --> </div> <button class="enter-borrowing" onclick="goToBorrow()">进入借阅系统</button> <script> function showDescription(bookId) { const bookDescription = document.getElementById('bookDescription'); const books = { 'book1': { title: '百年孤独', author: '加西亚·马尔克斯', description: '《百年孤独》是哥伦比亚作家加西亚·马尔克斯的代表作,也是拉丁美洲魔幻现实主义文学的代表作之一,被誉为“再现拉丁美洲历史社会图景的鸿篇巨著”。', image: 'O1CN01JXSrRS1CP1HcgQpqL-101450072.avif' }, 'book2': { title: '挪威的森林', author: '村上春树', description: '《挪威的森林》是日本作家村上春树于1987年所著的一部长篇爱情小说。', image: 'OIP-C.webp' }, 'book3': { title: '时间简史', author: '史蒂芬·霍金', description: '《时间简史》是英国物理学家史蒂芬·霍金创作的科学著作。', image: 'download.webp' }, 'book4': { title: '浪潮之巅', author: '吴军', description: '《浪潮之巅》是吴军博士撰写的一本信息产业史。', image: 'O1CN01cBii7J2ADuaLm1YzQ_!!352798170.avif' }, 'book5': { title: '史记', author: '司马迁', description: '《史记》是西汉史学家司马迁撰写的纪体史书,是中国历史上第一部纪体通史。', image: '12100263b-0.jpg' }, 'book6': { title: '世界历史', author: 'H.G. 威尔斯', description: '《世界历史》是英国著名作家H.G.威尔斯撰写的一本世界历史书籍。', image: 'p4YBAFqc1luABOkkAACXf_Ga2PU016_n.jpg' }, 'book7': { title: '艺术的故事', author: 'E.H.贡布里希', description: '《艺术的故事》是E.H.贡布里希撰写的一本艺术史书籍。', image: 'OIP-C.jpg' }, 'book8': { title: '美的历程', author: '李泽厚', description: '《美的历程》是李泽厚撰写的一本美学书籍。', image: 'v2-07d883c65d1982f324a2f514cb04cd7e_r.jpg' } }; const book = books[bookId]; bookDescription.innerHTML = ` <h2>${book.title}</h2> <img src="${book.image}" alt="${book.title}"> <p><strong>作者:</strong> ${book.author}</p> <p>${book.description}</p> `; } function goToBorrow() { window.location.href = 'a2.html'; // 跳转到书籍借阅系统页面 } </script> </body> </html><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图书借阅系统</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; } .sidebar { width: 80%; padding: 20px; background-color: #f9f9f9; } .content { width: 20%; padding: 20px; } .menu { margin-bottom: 20px; } .menu button { margin-right: 10px; padding: 10px; background-color: #eee; border: none; cursor: pointer; } .menu button.active { background-color: #ff6b6b; color: white; } .book-item { border: 1px solid #ddd; border-radius: 5px; padding: 10px; margin-bottom: 10px; display: flex; align-items: center; } .book-item img { width: 50px; height: 50px; margin-right: 10px; object-fit: cover; } .book-item div { flex: 1; } .cart { border: 1px solid #ddd; border-radius: 5px; padding: 10px; } .cart h2 { margin-top: 0; } .cart ul { list-style: none; padding: 0; } .cart li { margin-bottom: 5px; display: flex; justify-content: space-between; } .cart-total { font-weight: bold; margin-top: 10px; border-top: 1px solid #ddd; padding-top: 10px; } </style> </head> <body> <div class="sidebar"> <h2>图书分类</h2> <div class="menu"> <button class="active" onclick="filterBooks('all')">全部</button> <button onclick="filterBooks('novel')">小说</button> <button onclick="filterBooks('science')">科技</button> <button onclick="filterBooks('history')">历史</button> <button onclick="filterBooks('art')">艺术</button> </div> <div class="book-list"> <div class="book-item" data-category="novel" data-id="1"> <img src="O1CN01JXSrRS1CP1HcgQpqL-101450072.avif" alt="百年孤独"> <div> <h3>百年孤独</h3> <p>加西亚·马尔克斯</p> <button onclick="borrowBook(this, 1)">借阅</button> </div> </div> <div class="book-item" data-category="novel" data-id="2"> <img src="OIP-C.webp" alt="挪威的森林"> <div> <h3>挪威的森林</h3> <p>村上春树</p> <button onclick="borrowBook(this, 2)">借阅</button> </div> </div> <div class="book-item" data-category="science" data-id="3"> <img src="download.webp" alt="时间简史"> <div> <h3>时间简史</h3> <p>史蒂芬·霍金</p> <button onclick="borrowBook(this, 3)">借阅</button> </div> </div> <div class="book-item" data-category="science" data-id="4"> <img src="O1CN01cBii7J2ADuaLm1YzQ_!!352798170.avif" alt="浪潮之巅"> <div> <h3>浪潮之巅</h3> <p>吴军</p> <button onclick="borrowBook(this, 4)">借阅</button> </div> </div> <div class="book-item" data-category="history" data-id="5"> <img src="12100263b-0.jpg" alt="史记"> <div> <h3>史记</h3> <p>司马迁</p> <button onclick="borrowBook(this, 5)">借阅</button> </div> </div> <div class="book-item" data-category="history" data-id="6"> <img src="p4YBAFqc1luABOkkAACXf_Ga2PU016_n.jpg" alt="世界历史"> <div> <h3>世界历史</h3> <p>H.G. 威尔斯</p> <button onclick="borrowBook(this, 6)">借阅</button> </div> </div> <div class="book-item" data-category="art" data-id="7"> <img src="OIP-C.jpg" alt="艺术的故事"> <div> <h3>艺术的故事</h3> <p>E.H.贡布里希</p> <button onclick="borrowBook(this, 7)">借阅</button> </div> </div> <div class="book-item" data-category="art" data-id="8"> <img src="v2-07d883c65d1982f324a2f514cb04cd7e_r.jpg" alt="美的历程"> <div> <h3>美的历程</h3> <p>李泽厚</p> <button onclick="borrowBook(this, 8)">借阅</button> </div> </div> </div> </div> <div class="content"> <div class="cart"> <h2>借阅清单</h2> <ul id="cart-list"> <!-- 借阅书籍将在这里显示 --> </ul> <div class="cart-total"> 共借阅: <span id="total-count">0</span> 本 </div> <button onclick="checkout()" style="width:100%;padding:10px;background:#ff6b6b;color:white;border:none;margin-top:10px;">确认借阅</button> </div> </div> <script> let borrowedBooks = []; function filterBooks(category) { const books = document.querySelectorAll('.book-item'); const buttons = document.querySelectorAll('.menu button'); buttons.forEach(btn => { btn.classList.remove('active'); if (btn.textContent.toLowerCase().includes(category) || (category === 'all' && btn.textContent === '全部')) { btn.classList.add('active'); } }); books.forEach(book => { if (category === 'all' || book.dataset.category === category) { book.style.display = 'flex'; } else { book.style.display = 'none'; } }); } function borrowBook(button, bookId) { const bookItem = button.closest('.book-item'); const title = bookItem.querySelector('h3').textContent; const author = bookItem.querySelector('p').textContent; if (borrowedBooks.some(book => book.title === title)) { alert('这本书已经在您的借阅清单中!'); return; } borrowedBooks.push({ id: bookId, title, author }); updateCart(); } function updateCart() { const cartList = document.getElementById('cart-list'); const totalCount = document.getElementById('total-count'); cartList.innerHTML = ''; borrowedBooks.forEach((book, index) => { const li = document.createElement('li'); li.innerHTML = ` <span>${book.id}. ${book.title}</span> <button onclick="removeBook(${index})" style="color:red;background:none;border:none;cursor:pointer;">×</button> `; cartList.appendChild(li); }); totalCount.textContent = borrowedBooks.length; } function removeBook(index) { borrowedBooks.splice(index, 1); updateCart(); } function checkout() { if (borrowedBooks.length === 0) { alert('请先选择要借阅的书籍!'); return; } const bookTitles = borrowedBooks.map(book => `${book.id}. ${book.title}`).join('\n'); alert(`您已成功借阅以下书籍:\n\n${bookTitles}\n\n共 ${borrowedBooks.length} 本`); borrowedBooks = []; updateCart(); } </script> </body> </html><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图书管理系统登录</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f9f9f9; } .login-container { background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px; } .login-container h2 { text-align: center; margin-bottom: 20px; } .login-container label { display: block; margin-bottom: 5px; } .login-container input[type="text"], .login-container input[type="password"] { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 5px; } .login-container input[type="radio"] { margin-right: 5px; } .login-container .role-selection { margin-bottom: 20px; } .login-container button { width: 100%; padding: 10px; background-color: #ff6b6b; color: white; border: none; border-radius: 5px; cursor: pointer; } .login-container button:hover { background-color: #ff4d4d; } </style> </head> <body> <div class="login-container"> <h2>登录图书管理系统</h2> <form id="loginForm"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <div class="role-selection"> <label>角色:</label> <input type="radio" id="admin" name="role" value="admin"> <label for="admin">管理员</label> <input type="radio" id="member" name="role" value="member"> <label for="member">会员</label> </div> <button type="submit">登录</button> </form> </div> <script> document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; const role = document.querySelector('input[name="role"]:checked').value; // 这里可以添加验证逻辑,例如发送到服务器验证 console.log('用户名:', username); console.log('密码:', password); console.log('角色:', role); alert('登录成功!'); // 登录成功后跳转到相应的页面 window.location.href = 'a1.html'; // 假设登录成功后跳转到书籍介绍页面 }); </script> </body> </html>将其改为动态网站
最新发布
06-05
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值