当前位置：首页 > news >正文

【前端客栈】使用CSS实现畅销书排行榜页面

news 2026/2/10 17:47:44

📬📫hello，各位小伙伴们，我是小浪。大家都知道，我最近是在更新各大厂的软件测试开发的面试真题，也是得到了很大的反馈和好评，几位小伙伴也是成功找到了测开的实习，非常不错。如果能前后端兼顾的话，我们就可以自己独立开发项目，成为真正意义上的"全栈开发工程师"！💡💡

🌇今天我们要学习的内容就是CSS的基础语法，学完之后便可以独立制作出一个简单的页面。

🛍最终的效果图如下：

一、CSS语法

1、使用快捷键"!+tab"快速生成大致的框架；

2、文本颜色-color

我们直接在style标签中输入color，VSCode会自动帮我们补全并提示我们选择文本的颜色；

文本颜色这里我们可以自己选择设置颜色的格式：

十六进制 0~F；

rgb() 0~255；

rgba() 0~1 0 完全透明 1完全不透明；

    <style>p{color: #00ffcc;color: rgb(red, green, blue);color: rgba(red, green, blue, alpha);}</style>

3、水平对其方式text-align

            text-align: center;text-align: right;text-align: left;

4、首行缩进text-indent

一般我们是首行缩进两个字符，也就是2em；

text-indent: 2em;

5、行高line-height

后面的数字我们自行选择尺寸；

line-height: 30px;

6、文本修饰text-decoration

文本修饰包括三个：

line-through 删除线；

underline 下划线；

overline 上划线；

7、阴影效果text-shadow

下面的参数依次代表阴影的颜色，向X轴偏移量，向Y轴偏移量，偏移大小；

text-shadow: red 2px 2px 5px;

效果：

8、a标签样式

未访问样式： a:link

    a:link{color: green;font-size: 30px;}

访问过的样式: a:visited

    a:visited{color: gold;text-decoration: none;}

鼠标悬浮: a:hover

    a:hover{color: aqua;}

活动状态: a:active

    a:active{color: brown;}

9、列表样式

        list-style: decimal;

none 去除修饰符，square 实心方块，disc 实习圆，circle 空心圆，decimal 数字；

10、背景样式

    <style>div{width: 500px;height: 500px;/* 背景颜色 *//* background-color: blue; *//* 背景图片 *//* background-image: url(../imgs/book.jpg); *//* 背景平铺 默认平铺no-repeat 不平铺repeat-x  x轴平铺repeat-y  y轴平铺*//* background-repeat: no-repeat; *//* 大小 宽   高*//* background-size: 200px 200px; *//* 背景图片位置 距上方的距离距左边的距离关键字 水平位置  left right center垂直位置 top  bottom*//* background-position: center; *//* 背景颜色渐变 to top     to bottom   to left to right    to top left     to top right            to bottom left   to bottom right*/background: linear-gradient(to top left,red,blue,green);}</style>

二、畅销书排行榜设计

1、制作要求

2、实现代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 280px;height: 360px;background: linear-gradient(to top,#f9fbcb,#f8f8f3);}h1{text-indent: 1em;line-height: 30px;font-size: 16px;color: white;background-image: url(./bang.gif);background-color:#518700;background-repeat: no-repeat;background-position: 100px center;}a{color: #1a66b3;font-size: 12px;line-height: 28px;}a:link{text-decoration: none;}a:hover{text-decoration: underline;}</style>
</head>
<body><div><h1>畅销书排行</h1><img src="./book_no01.gif" alt=""><a href="#">不抱怨的世界</a><br><img src="./book_no02.gif" alt=""><a href="#">遇见未知的自己</a><br><img src="./book_no03.gif" alt=""><a href="#">活法(季羡林、…)</a><br><img src="./book_no04.gif" alt=""><a href="#">高效能人士的七个习惯</a><br><img src="./book_no05.gif" alt=""><a href="#">被迫强大(北外女生香奈儿…)</a><br><img src="./book_no06.gif" alt=""><a href="#">遇见心想事成的自己(《遇…)</a><br><img src="./book_no07.gif" alt=""><a href="#">世界上最伟大的推销员(插…)</a><br><img src="./book_no08.gif" alt=""><a href="#">我的成功可以复制(唐骏亲…)</a><br><img src="./book_no09.gif" alt=""><a href="#">少有人走的路:心智成熟的…</a><br><img src="./book_no10.gif" alt=""><a href="#">活出全新的自己_唤醒…</a><br></div>
</body>
</html>

总结：具体效果的实现每个人写的代码大概率是不同的，所以大家应该有自己的想法，根据上面学过的CSS语法，根据需求可以自己独立完成！

3、最终效果

🛠4、源码获取处

github：文本排行畅销榜素材。

🌠如果感觉博主写的还不错的话可以点个star，后续持续更新前端学习页面制作案例，感谢支持！

【前端客栈】使用CSS实现畅销书排行榜页面

📬📫hello，各位小伙伴们，我是小浪。大家都知道，我最近是在更新各大厂的软件测试开发的面试真题，也是得到了很大的反馈和好评，几位小伙伴也是成功找到了测开的实习，非常不错。如果能前…...

编程日记 2023/5/18 1:01:13

【周末闲谈】超越ChatGPT？科大讯飞星火认知大模型

个人主页：【😊个人主页】系列专栏：【❤️周末闲谈】 ✨第一周二进制VS三进制 ✨第二周文心一言，模仿还是超越？ ✨第二周畅想AR 文章目录前言星火名字的由来科大讯飞星火落地应用演示赶超ChatGPT的底气在哪里?“硬…...

编程日记 2023/5/18 0:56:12

第N2周：中文文本分类-Pytorch实现

目录一、前言二、准备工作三、数据预处理1.加载数据2.构建词典3.生成数据批次和迭代器三、模型构建1. 搭建模型2. 初始化模型3. 定义训练与评估函数四、训练模型1. 拆分数据集并运行模型一、前言 🍨 本文为🔗365天深度学习训练营中的学习记录博客 …...

编程日记 2023/5/18 0:51:11

Salesforce许可证和版本有什么区别，购买帐号时应该如何选择？

Salesforce许可证分配给特定用户，授予他们访问Salesforce产品和功能的权限。Salesforce版本和许可证是不同的概念，但极易混淆。 Salesforce版本：这是对组织购买的Salesforce产品和功能的访问权限。大致可分为Essentials、Professional、Ente…...

编程日记 2023/5/30 17:17:59

接口测试怎么做？全网最详细从接口测试到接口自动化详解，看这篇就够了...

目录：导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结（尾部小惊喜） 前言抛出一个问题&…...

编程日记 2023/5/30 0:24:46

DataStore入门及在项目中的使用

首先给个官网的的地址：应用架构：数据层 - DataStore - Android 开发者 | Android Developers 小伙伴们可以直接看官网的资料，本篇文章是对官网的部分细节进行补充一、为什么要使用DataStore 代替SharedPreferences SharedPreferences&a…...

编程日记 2023/5/18 0:36:07

用Python爬取中国各省GDP数据

介绍在数据分析和经济研究中，了解中国各省份的GDP数据是非常重要的。然而，手动收集这些数据可能是一项繁琐且费时的任务。幸运的是，Python提供了一些强大的工具和库，使我们能够自动化地从互联网上爬取数据。本文将介绍如何使用P…...

编程日记 2023/5/18 0:31:05

深度学习-第T5周——运动鞋品牌识别

深度学习-第T5周——运动鞋品牌识别深度学习-第T5周——运动鞋品牌识别一、前言二、我的环境三、前期工作1、导入数据集2、查看图片数目3、查看数据四、数据预处理1、加载数据1、设置图片格式2、划分训练集3、划分验证集4、查看标签 2、数据可视化3、检查数据4、配置数据集 …...

编程日记 2023/5/31 20:11:48

自媒体的孔雀效应：插根鸡毛还是专业才华？

自媒体时代，让许多原本默默无闻的人找到了表达自己的平台。有人声称，现在这个时代，“随便什么人身上插根鸡毛就可以当孔雀了”。可是，事实真的如此吗？ 首先，我们不能否认的是，自媒体确实为大众提…...

编程日记 2023/5/18 0:21:01

Linux系统优化

一、系统启动流程 1.centos6 centos6开机启动流程，传送门 2.centos7启动流程二、系统启动运行级别 2.1 什么是运行级别运行级别：指操作系统当前正在运行的功能级别； [rootweb01 ~]# ll /usr/lib/systemd/system lrwxrwxrwx. 1 root root…...

编程日记 2023/5/18 0:16:00

Java笔记_22(反射和动态代理)

Java笔记_22 一、反射1.1、反射的概述1.2、获取class对象的三种方式1.3、反射获取构造方法1.4、反射获取成员变量1.5、反射获取成员方法1.6、综合练习1.6.1、保存信息1.6.2、跟配置文件结合动态创建一、反射 1.1、反射的概述什么是反射? 反射允许对成员变量，成…...

编程日记 2023/5/30 15:33:12

前端web入门-HTML-day01

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录 HTML初体验 HTML 定义标签语法总结： HTML 基本骨架基础知识： 总结&#…...

编程日记 2023/5/18 0:05:58

创建一个Go项目

创建一个Go项目 1.创建项目 package mainfunc main() {println("你好啊，简单点了！") }如果是本地的话可以采用go run 项目名的方式。可以采用go run --work 项目名的方式，此时可以展示日志信息。如果是只编译的话 go build 项…...

编程日记 2023/5/18 0:00:57

从 Spring 的创建到 Bean 对象的存储、读取

目录创建 Spring 项目： 1.创建一个 Maven 项目： 2.添加 Spring 框架支持： 3.配置资源文件： 4.添加启动类： Bean 对象的使用： 1.存储 Bean 对象： 1.1 创建 Bean： 1.2 存储 B…...

编程日记 2023/5/29 16:29:48

【一文吃透归并排序】基本归并·原地归并·自然归并 C++

目录 1 引入情境基本归并排序实现 C 2 原地归并排序2-1 死板的解法2-2 原地工作区2-3 链表归并排序 3 自底向上归并排序4 两路自然归并排序4-1 形式化描述4-2 代码实现 1 引入情境归并思想：假设有两队小孩，都是从矮到高排序，现在通过一扇门后…...

编程日记 2023/5/17 23:50:55

读《Spring Boot 3核心技术与最佳实践》有感

我是谁？ 👨‍🎓作者：bug菌 ✏️博客：CSDN、掘金、infoQ、51CTO等 🎉简介：CSDN/阿里云/华为云/51CTO博客专家，C站历届博客之星Top50，掘金/InfoQ/51CTO等社区优质创作者&am…...

编程日记 2023/5/17 23:45:54

板子短路了？

有段时间没更新了，主要是最近有点忙，当然也因为有点“懒”。做这行业的都知道，下半年都是比较忙的，相信大家也是！ 相信做硬件的小伙伴们，遇到过短路的板子已经不计其数了。短路带来的危害：…...

编程日记 2023/5/17 23:40:53

一行代码绘制高分SCI限制立方图

一、概述 Restricted cubic splines (RCS)是一种基于样条函数的非参数化模型，它可以可靠地拟合非线性关系，可以自适应地调整分割结点。在统计学和机器学习领域，RCS通常用来对连续型自变量进行建模，并在解释自变量与响应变量的关系…...

编程日记 2023/5/17 23:35:52

spring 容器结构/机制debug分析--Spring 学习的核心内容和几个重要概念--IOC 的开发模式--综合解图

目录 Spring Spring 学习的核心内容解读上图: Spring 几个重要概念 ● 传统的开发模式解读上图 ● IOC 的开发模式解读上图代码示例—入门 xml代码注意事项和细节 1、说明 2、解释一下类加载路径 3、debug 看看 spring 容器结构/机制综合解图 Spring Spr…...

编程日记 2023/5/17 23:30:51

excel实战小测第四

【项目背景】本项目为某招聘网站部分招聘信息，要求对“数据分析师”岗位进行招聘需求分析，通过对城市、行业、学历要求、薪资待遇等不同方向进行相关性分析，加深对数据分析行业的了解。结合企业真实招聘信息，可以帮助有意转向数…...

编程日记 2023/5/31 18:36:48

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法最新版…...

编程新知 2026/2/8 4:37:08

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2026/2/10 13:18:55

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/31 21:56:58

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口目录第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2026/2/1 13:28:03

Java-41 深入浅出 Spring - 声明式事务的支持事务配置 XML模式 XML+注解模式

点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...

编程新知 2026/2/6 11:05:22

反射获取方法和属性

Java反射获取方法在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

LLM基础1_语言模型如何处理文本

基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器理解词嵌入：给词语画"…...

编程新知 2025/9/25 5:16:24

安卓基础（aar）

重新设置java21的环境，临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的： MyApp/ ├── app/ …...

编程新知 2026/1/25 8:10:56

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了，要么要会员、要么写的乱七八糟。这里我整理一下，把问题说清楚并且给出代码，拿去用就行，照着葫芦画瓢。问题在继承QWebEngineView后，重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2026/2/9 23:40:53