一个列表引发的思考(简单版)

news2024/9/28 1:15:54

最近老板让我按照设计图写一个页面,不嫌丢人的说这是我第一次写页面,哈哈哈。
然后设计图里有一个这样的需求,感觉挺有意思的。

image.png

为什么感觉有意思呢,因为这个列表它前面是图片,然后单行和双行的不一样。(请忽略没有见过世面的我)

要实现它其实很简单,首先把列表写出来:

image.png

然后css里就加东西呗,根据需要设置字体大小、行高、左边留点位置用来显示图片、添加上图片、最后不要忘记把项目符号去掉,就像···下面这样:

image.png

就是这么简单

0B3FBFE1.gif

下面请看效果!

image.png

为什么说引发思考了呢?

因为,我做到这里的时候发现我把某些知识点给忘记了(在线猛哭)

那么!让我们来复习一下吧!

咳咳

那就回忆一下伪类选择器吧。

伪类,可以理解为不存在的类、特殊的类,伪类用来描述一个元素的特殊状态。比如:第一个子元素、被点击的元素、鼠标移入的元素···

伪类一般情况下都是使用:开头

1、:first-child第一个子元素

在这里插入图片描述

2、:last-child最后一个子元素

在这里插入图片描述

3、:nth-child(n)选中第n个元素

特殊值:

  • n 第n个它的取值范围是0到正无穷
  • 2n 或 even 表示选中偶数位的元素
  • 2n+1 或 odd 表示选中奇数位的元素

比如选中第二行的元素:
在这里插入图片描述

再比如选中偶数位的元素:
在这里插入图片描述

再比如选中奇数位的元素:
在这里插入图片描述

:first-of-type选中同类型的第一个

在这里插入图片描述
好啦,今天的思考就结束了!多谢观看!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/366808.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

电子技术——稳定性问题

电子技术——稳定性问题 本节我们讨论稳定性问题。 反馈放大器的传递函数 在考虑频率响应的情况下,开环增益 AAA 通常是关于复频率 sss 的函数 。那么 A(s)A(s)A(s) 就称为 开环传递函数 。同时, β\betaβ 也可能是一个关于复频率 sss 的函数。我们称…

Element表单嵌套树形表格的校验问题

如图&#xff0c;第一次遇到属性表格的校验问题 曾经写过单纯的表格校验是这样的 <el-form ref"forms" :model"forms"><el-table ref"multipleTable" :data"forms.tableData" tooltip-effect"dark" border style&…

关于iframe一些通讯的记录(可适用工作流审批)

一.知识点(1).我们可以通过postMessage(发送方)和onmessage(接收方)这两个HTML5的方法, 来解决跨页面通信问题&#xff0c;或者通过iframe嵌套的不同页面之间的通信a.父页面代码如下<div v-if"src" class"iframe"><iframeref"iframe"id…

SpringBoot集成Redis实现分布式会话

在单体应用的时代&#xff0c;Session 会话直接保存在服务器中&#xff0c;实现非常简单&#xff0c;但是随着微服务的流行&#xff0c;现代应用架构基本都是分布式架构&#xff0c;请求随机的分配到后端的多个应用中&#xff0c;此时session就需要共享&#xff0c;而存储在red…

【运动控制】CNC三轴小线段路径规划

CNC三轴小线段路径规划 文章目录CNC三轴小线段路径规划一、项目说明二、具体实现1、速度规划2、小线段插补3、运动学逆解刀轴插补点4、差分处理得到实际的速度和加速度5、加速度滑动平均6、实现的效果如图所示三、Reference写在前面&#xff0c;本文是作为一个练手小项目的总结…

2023年阿里云ECS服务器S6/C6/G6/N4/R6/sn2ne/sn1ne/se1ne处理器CPU性能详解

阿里云ECS服务器S6/C6/G6/N4/R6/sn2ne/sn1ne/se1ne处理器CPU性能怎么样&#xff1f;阿里云服务器优惠活动机型有云服务器S6、计算型C6、通用型G6、内存型R6、云服务器N4、云服务器sn2ne、云服务器sn1ne、云服务器se1ne处理器CPU性能详解及使用场景说明。 1、阿里云服务器活动机…

Ollydbg简明使用指南

OllyDebug&#xff0c;简称OD&#xff0c;一种反汇编软件&#xff0c;动态追踪工具&#xff0c;将IDA与SoftICE结合起来的思想&#xff0c;Ring 3 级的调试器。OllyDebug的使用界面是可视化操作。 英文版 Read this for quick start. Consult help file for details and more …

Hive窗口函数

概述 窗口函数&#xff08;window functions&#xff09;也叫开窗函数、OLAP函数。 如果函数具有over子句&#xff0c;则它是窗口函数 窗口函数可以简单地解释为类似于聚合函数的计算函数&#xff0c;但是通过group by 子句组合的 常规聚合会隐藏正在聚合的各个…

task与function

task和function主要是有助于代码的可重用性&#xff0c;都可以在module-endmodule之外声明。 1.function 1.1.function逻辑的综合 function&#xff1a;一个只有1个wire型输出值、全是组合逻辑的函数&#xff0c;且函数名即输出信号名&#xff0c;小括号中按顺序例化输入信号。…

C语言中#include<...>和#include“...“的区别

C语言文章更新目录 C语言学习资源汇总&#xff0c;史上最全面总结&#xff0c;没有之一 C/C学习资源&#xff08;百度云盘链接&#xff09; 计算机二级资料&#xff08;过级专用&#xff09; C语言学习路线&#xff08;从入门到实战&#xff09; 编写C语言程序的7个步骤和编程…

深入浅出C++ ——哈希的应用

文章目录一、位图1. 位图的概念2. STL中的位图3. 位图的特点4. 位图的应用5. 位图的实现6. 位图的使用二、布隆过滤器1. 布隆过滤器提出2. 布隆过滤器概念3. 布隆过滤器的设计思路4. 布隆过滤器的插入5. 布隆过滤器的查找6. 布隆过滤器删除7. 布隆过滤器的优缺点8. 布隆过滤器的…

div增加鼠标点透,css设置点击穿透

需求&#xff1a;将一张照片盖到一个div上面&#xff0c;但同时下面div上面的点击事件不受影响。 这样就需要用到 CSS 的鼠标穿透属性&#xff1a;pointer-events: none&#xff0c;下面主要对pointer-events属性的值做一个简单的介绍。 pointer-event的所有属性值: pointer…

计讯物联环保数采仪全系列产品为节能降耗减碳贡献绿色力量

政策背景 近日&#xff0c;工业和信息化部、国家发展改革委、生态环境部三部门联合印发《工业领域碳达峰实施方案》&#xff08;以下简称“方案”&#xff09;。《方案》提出&#xff0c;促进中小企业绿色低碳发展。优化中小企业资源配置和生产模式&#xff0c;探索开展绿色低…

在字节跳动,造赛博古籍

“你在字节跳动哪个业务&#xff1f;”“古籍数字化。把《论语》《左传》《道德经》这些古籍变成电子版&#xff0c;让大家都能免费看。”没错&#xff0c;除了你熟悉的那些 App&#xff0c;字节跳动还在做一些小众而特别的事情&#xff0c;古籍数字化就是其中之一。在字节跳动…

Python+Selenium4元素交互1_web自动化(5)

目录 0. 上节回顾 1. 内置的等待条件 2. 元素属性 1. Python对象属性 2. HTML元素属性 3. 元素的交互 1. 输入框 2. 按钮 3. 单选框和复选框 0. 上节回顾 DEBUG的方式&#xff1a;JS断点 Python断点编程语言提供的等待方式&#xff1a;sleepselenium提供的等待方式&…

CDGA|浅谈“以治促用,以用促治”的数据治理战略

数据治理夯实企业数字化转型基础。采取“以治促用&#xff0c;以用促治”的数据治理战略&#xff0c;可以充分释放了企业核心运行要素的活力。 “以治促用”是指通过建立在数据治理链路及用户多维评估系统的基础上&#xff0c;对数据资产重新进行价值识别&#xff0c;推进高价值…

30岁测试开发年薪不足50万,被面试官嘲讽混得太差?

近日&#xff0c;有网友发帖称&#xff1a;“30岁去应聘测试开发&#xff0c;拿不到七八十万的年薪确实有点丢人了&#xff0c;还被面试官diss混得太差了”&#xff0c;网友们看完都炸了。 来看看网友们都是怎么说的。 有网友说&#xff1a; 扯淡 有网友气到&#xff1a; 那拿…

接口自动化

为了实现真正意义上的接口自动化&#xff0c;一般使用yaml文件存储测试用例&#xff0c;代码调用里面的数据来发送请求 Controller RequestMapping("/send") public class Login {ResponseBodyRequestMapping("/login")public State login(String name,Str…

ES6-ES11基本全部语法

在进入es6语法之前&#xff0c;先走一波es5遍历迭代Api&#xff0c;&#xff0c;它们的作用&#xff0c;应用场景&#xff0c;参数&#xff0c;以及返回值分别是什么。&#xff08;forEach、map、some、every、filter&#xff09;我们统一设定一个初始数组&#xff1a;let arra…

Prophet 处理时间序列数据

Prophet 处理时间序列数据 flyfish 论文地址 https://peerj.com/preprints/3190/ 官网 https://facebook.github.io/prophet/ 源码地址 https://github.com/facebook/prophet hon import pandas as pd from prophet import Prophet df pd.read_csv(https://raw.githubuse…