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

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

news 2026/2/10 6:51:40

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

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

🛍最终的效果图如下：

e3b6876a957f4f53a1a847197c6208b6.png

一、CSS语法

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

3a20d2a64901454e83ea69b789eaeceb.png

2、文本颜色-color

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

b4afb491e6814289b75923427890bbb2.png

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

十六进制 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 删除线；

3df4bb0b347144f3bc2af7afdb05f923.png

underline 下划线；

0fae3c6edf334d598a71c60cd9e4f554.png

overline 上划线；

5554b19056ca4f36981819fc4edac7e1.png

 7、阴影效果text-shadow

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

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

效果：

f076f66d30e74d1792d60dbaf95c4026.png

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、制作要求

c6d050dd07734c3b898288a35d40bbe2.png

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、最终效果

5c96c4a50ee7466eae10a4a580e07f3a.png

🛠4、源码获取处

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

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

相关文章：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DataStore入门及在项目中的使用

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

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

用Python爬取中国各省GDP数据

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

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

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

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

Linux系统优化

一、系统启动流程 1.centos6 centos6开机启动流程&#xff0c;传送门 2.centos7启动流程 二、系统启动运行级别 2.1 什么是运行级别 运行级别&#xff1a;指操作系统当前正在运行的功能级别&#xff1b; [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、反射的概述 什么是反射? 反射允许对成员变量&#xff0c;成…...

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

前端web入门-HTML-day01

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

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

创建一个Go项目

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

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

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

目录 创建 Spring 项目&#xff1a; 1.创建一个 Maven 项目&#xff1a; 2.添加 Spring 框架支持&#xff1a; 3.配置资源文件&#xff1a; 4.添加启动类&#xff1a; Bean 对象的使用&#xff1a; 1.存储 Bean 对象&#xff1a; 1.1 创建 Bean&#xff1a; 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 引入情境 归并思想&#xff1a;假设有两队小孩&#xff0c;都是从矮到高排序&#xff0c;现在通过一扇门后…...

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

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

我是谁&#xff1f; &#x1f468;‍&#x1f393;作者&#xff1a;bug菌 ✏️博客&#xff1a;CSDN、掘金、infoQ、51CTO等 &#x1f389;简介&#xff1a;CSDN/阿里云/华为云/51CTO博客专家&#xff0c;C站历届博客之星Top50&#xff0c;掘金/InfoQ/51CTO等社区优质创作者&am…...

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

板子短路了？

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

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

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

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

编程日记 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实战小测第四

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

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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

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

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2026/2/2 7:39:34

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2026/1/25 10:13:29

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/12/9 14:22:07

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2026/1/27 2:41:27

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

编程新知 2026/1/5 0:33:43