display: inline-block; position: relative; width: 163px; text-align: center;

This CSS code sets the display property of an element to inline-block, which means that the element will be treated as an inline-level block container. It also sets the position property to relative, which means that the element will be positioned relative to its normal position in the document flow. The width property is set to 163px, which sets the width of the element to 163 pixels. Finally, the text-align property is set to center, which centers the content of the element horizontally within its width.

请用 Express 框架实现如下功能:当单击上图中某本图书名称后，显示该图书详细信息，如下图所示: 左侧是封面图，右侧最上面是书名，有一条hr横线分割开来，下面是：作者：出版社：淘书价格：内容简介： bookInfo.html模板文件: <html lang="en"> <head> <title><%=title%></title> <link rel="stylesheet" type="text/css"href="/stylesheets/divBar.css"> <style type="text/css"> divbook/width:90%;margin:10px auto? divpictureffloat:left;text-align: center;width:20%:height:800px;position: relative;top: 20px)divinfofwidth: 80%;height:800px;padding-left: 50px;position: relative; top: 20px;)abookname/display: block:height: 30px:line-height: 30px:font-size: 20px:color: bluea.bookname:hoverftext-decoration: underline n: center; span.pricefdisplay: inline-block;height: 30px;line-height: 30px;font-size:20px;color: red;a.apfdisplay:inline-block;height: 30px;line-height: 30px;font-size: 15px;color: bluespan.other(display:inline-block;height: 30px;line-height: 30px;font-size: 15px;color: blackspan.abstractfdisplay: block;font-size: 15px;color: black} </style> </head> <body> 补充这里的代码： </body>

假设你的图书列表页面是/books，当用户单击某本图书名称时，会跳转到该图书的详细信息页面，页面路由为/book/:id，其中:id为该图书的唯一标识符。以下是使用Express框架实现该功能的代码： ``` // 引入模块 const express = require('express'); const router = express.Router(); const fs = require('fs'); // 定义图书列表页面路由 router.get('/books', (req, res) => { // 读取图书列表数据 const booksData = JSON.parse(fs.readFileSync('./data/books.json')); // 渲染图书列表页面 res.render('books', {title: '图书列表', books: booksData}); }); // 定义图书详细信息页面路由 router.get('/book/:id', (req, res) => { // 读取该图书的详细信息 const bookId = req.params.id; const booksData = JSON.parse(fs.readFileSync('./data/books.json')); const bookInfo = booksData.find(book => book.id === bookId); // 渲染图书详细信息页面 res.render('bookInfo', {title: bookInfo.name, book: bookInfo}); }); // 导出路由模块 module.exports = router; ``` 在上述代码中，我们使用了Express框架中的Router对象来定义路由。首先，我们定义了/books路由来展示图书列表页面。在/books路由的回调函数中，我们读取了存储图书列表数据的JSON文件，并将数据传递给books模板进行渲染。接着，我们定义了/book/:id路由来展示图书详细信息页面。在/book/:id路由的回调函数中，我们使用req.params.id获取用户单击的图书的唯一标识符，然后根据该标识符读取存储图书列表数据的JSON文件，并使用Array.prototype.find()方法找到该图书的详细信息。最后，我们将该图书的详细信息传递给bookInfo模板进行渲染。下面是bookInfo模板的代码： ``` <html lang="en"> <head> <title><%= title %></title> <link rel="stylesheet" type="text/css" href="/stylesheets/divBar.css"> <style type="text/css"> div.book {width:90%;margin:10px auto;} div.picture {float:left;text-align: center;width:20%;height:800px;position: relative;top: 20px;} div.info {width: 80%;height:800px;padding-left: 50px;position: relative; top: 20px;} a.bookname {display: block;height: 30px;line-height: 30px;font-size: 20px;color: blue} a.bookname:hover {text-decoration: underline} span.price {display: inline-block;height: 30px;line-height: 30px;font-size:20px;color: red;} a.ap {display:inline-block;height: 30px;line-height: 30px;font-size: 15px;color: blue;} span.other {display:inline-block;height: 30px;line-height: 30px;font-size: 15px;color: black;} span.abstract {display: block;font-size: 15px;color: black;} </style> </head> <body> <div class="book"> <div class="picture"> <img src="<%= book.cover %>" alt="<%= book.name %>"> </div> <div class="info"> <a href="#" class="bookname"><%= book.name %></a> <hr> <p>作者：<span class="other"><%= book.author %></span></p> <p>出版社：<span class="other"><%= book.publisher %></span></p> <p>淘书价格：<span class="price">￥<%= book.price %></span></p> <br> <p>内容简介：</p> <p><span class="abstract"><%= book.abstract %></span></p> </div> </div> </body> </html> ``` 在bookInfo模板中，我们使用了模板引擎中的变量替换语法<%= %>来将图书的详细信息渲染到页面中。具体来说，我们将图书的封面图片、书名、作者、出版社、淘书价格和内容简介分别渲染到相应的HTML元素中。其中，图书的封面图片使用了<img>标签来显示，其他信息使用了<p>标签和<span>标签来显示。最后，我们将整个图书详细信息页面放在一个名为bookInfo的模板文件中，以便于在/book/:id路由回调函数中进行渲染。

<div class="legend"> <span class="lbar">完成值</span> <span class="ltarget_bar">目标值</span> <span class="completion-rate">完成率</span> </div> .bar { height: auto; background-color: #2476d4; color: #fff; display: block; text-align: center; font-size: 14px; width: 80px; display: inline-block; } .target_bar { height: auto; background-color: #eb6207; color: #fff; display: block; text-align: center; font-size: 14px; width: 80px; }改写成进度条的形式

可以按照以下方式将代码改写成进度条的形式： HTML代码： ``` <div class="progress"> <div class="bar" style="width: 60%;"></div> <div class="target_bar" style="width: 80%;"></div> </div> ``` CSS代码： ``` .progress { height: 20px; background-color: #ddd; border-radius: 10px; position: relative; } .bar { height: 100%; background-color: #2476d4; color: #fff; text-align: center; font-size: 14px; border-radius: 10px; position: absolute; top: 0; left: 0; } .target_bar { height: 100%; background-color: #eb6207; color: #fff; text-align: center; font-size: 14px; border-radius: 10px; position: absolute; top: 0; left: 0; } ``` 通过上述代码，可以实现一个带有完成值和目标值的进度条，其中完成值的宽度由样式属性 `width` 控制，目标值的宽度是固定的，两者叠加在一起，形成一个进度条的效果。

阅读全文

display: inline-block; position: relative; width: 163px; text-align: center;

相关推荐

display:inline的用法

css 跨浏览器实现float:center

如何用float配合position:relative实现居中

postcss-center插件与CSS居中技巧

大家在看

航空发动机缺陷检测数据集VOC+YOLO格式291张4类别.7z

数字低通滤波器的设计以及matlab的实现

【微电网优化】基于粒子群优化IEEE经典微电网结构附matlab代码.zip

收放卷及张力控制-applied regression analysis and generalized linear models3rd

谷歌Pixel5基带xqcn文件

最新推荐

nvim-monokai主题安装与应用教程

选课系统设计精髓：7大模块打造高效用户体验

（2）用户刘星具有对部门表的select、update、insert权限，并允许转授给其他人；（用户刘星权限结果） 代码怎么写

Groot应用：打造植树造林的社区互动平台

构建基石：网上选课系统需求分析与UML建模详解

mysql Ver 14.14 Distrib 5.6.51, for Linux (x86_64) using EditLine wrapper 修改root密码

Arctracker：Linux下的开源Tracker和Desktop Tracker模组播放器

Oracle EBS权限体系优化：掌握职责与用户角色设计的最佳实践

Javaweb中如何注释

英语单词数据库SQLite文件及MSSQL脚本

（2）用户刘星具有对部门表的select、update、insert权限，并允许转授给其他人；（用户刘星权限结果）代码怎么写