目标伪类选择器

E:target选择匹配E的所哟元素,且匹配元素被相关url指向

鼠标点击右边京东秒杀跳转到京东秒杀div,并变成黄色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            /* 清除样式 */
            margin:0;
            padding:0
        }
        ul{
            list-style: none;
            position: fixed;
            right: 0px;
            top:100px;
        }
        li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 5px solid blue;
            
        }

        div{
            height: 600px;
            border:5px solid red;
            /* background:yellow; */
        }


        div:target{
            /* E:target选择匹配E的所哟元素,且匹配元素被相关url指向鼠标点击到 */
            background: yellow;
        }


        /* 锚点作用:页面不同区域的跳转, 使用a链接。 
           <a href="#锚点名字"></a>

           <div id="锚点名字"></div>

        */
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#a">京东秒杀</a>
        </li>
        <li>
            <a href="#b">双11</a>
        </li>
        <li>
            <a href="#c">频道优选</a>
        </li>
        <li>
            <a href="#d">特色广场</a>
        </li>
    </ul>

    <div id="a"> 
        京东秒杀
    </div>
    <div id="b">
        双11
    </div>
    <div id="c">
        频道优选
    </div>
    <div id="d">
        特色广场
    </div>
    
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HTML块级元素和内联元素(头部和布局)

目录 1.HTML块级和内联标签&#xff1a; 1.块级元素&#xff1a; 2.内联元素: 3.元素嵌套&#xff1a; 4.元素转换&#xff1a; 示例如下: 2.内联框架&#xff1a; 前言&#xff1a; 示例如下: 3.布局&#xff1a; 4.头部标签&#xff1a; 前言&#xff1a; 说明&…

Java获取当前时间

获取当前的时间 在Java中获取时间和日期使用Date类中的 toString方法 import java.util.Date;public class DateDemo {public static void main(String[] args) {Date date1new Date();System.out.println(date1.toString());} } 进一步格式化时间 SimpleDateFormat 是格式化…

Netty组件优化之FastThreadLocal

ThreadLocal:CSDNhttps://mp.csdn.net/mp_blog/creation/editor/132995427 Netty中的FastThreadLocal是对Java中的FastThreadLocal的优化主要是为了解决ThreadLocal中线性查找 带来的性能下降同时实现快速查找和赋值 FastThreadLocal构建这里的index代表一个编号&#xff0c;从…

ROS机器人入门第五课:话题通信自定义msg

文章目录 ROS机器人入门第五课&#xff1a;话题通信自定义msg一、介绍二、流程&#xff08;一&#xff09;定义msg文件&#xff08;二&#xff09;编辑配置文件&#xff08;三&#xff09;编译 三、话题通信自定义msg调用&#xff08;一&#xff09;调用流程0.vscode配置1.发布…

论文笔记 - :MonoLSS: Learnable Sample Selection For Monocular 3D Detection

论文笔记✍MonoLSS: Learnable Sample Selection For Monocular 3D Detection &#x1f4dc; Abstract &#x1f528; 主流做法限制 &#xff1a; 以前的工作以启发式的方式使用特征来学习 3D 属性&#xff0c;没有考虑到不适当的特征可能会产生不利影响。 &#x1f528; 本…

基于java+SpringBoot+Vue的网上书城管理系统设计与实现

基于javaSpringBootVue的网上书城管理系统设计与实现 开发语言: Java 数据库: MySQL技术: SpringBoot MyBatis工具: IDEA/Eclipse、Navicat、Maven 系统展示 前台展示 后台展示 系统简介 整体功能包含&#xff1a; 网上书城管理系统是一个基于互联网的在线购书平台&#…

基于springboot实现旅游网站系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现旅游网站系统演示 摘要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff0c;旅游网站当然也不能排除在外&#xff0c;随着旅游网站的不断成熟&#xff0c;它彻底改变了过去传统的旅游…

CI/CD实战-jenkins结合ansible 7

配置主机环境 在jenkins上断开并删除docker1节点 重新给master添加构建任务 将server3&#xff0c;server4作为测试主机&#xff0c;停掉其上后面的docker 在server2&#xff08;jenkins&#xff09;主机上安装ansible 设置jenkins用户到目标主机的免密 给测试主机创建用户并…

windows操作系统本地部署开源语言模型ChatGLM3-6b,超详细

前言 首先感谢智谱AI和清华大学 KEG 实验室联合开源的ChatGLM3对话预训练模型&#xff0c;让我们国人有属于自己的AI聊天机器人。 ChatGLM3-6B 的基础模型 ChatGLM3-6B-Base 采用了更多样的训练数据、更充分的训练步数和更合理的训练策略。在语义、数学、推理、代码、知识等不…

mysql 用户管理-权限管理

学习了用户管理&#xff0c;再学习下权限管理。 3&#xff0c;权限管理 权限管理主要是对登录到MySQL的用户进行权限验证。所有用户的权限都存储在MySQL的权限表中&#xff0c;不合理的权限规划会给MySQL服务器带来安全隐患。数据库管理员要对所有用户的权限进行合理规…

C++练级之路——C++入门

1、命名空间 在C/C中会出现大量的变量&#xff0c;函数&#xff0c;起名字是一个很大的问题&#xff0c;为了防止命名重复&#xff0c;就出现了命名空间的概念&#xff0c;使用命名空间的目的是对标识符的名称进行本地化&#xff0c;以避免命名冲突和名字污染 #include <st…

黄金涨是商品牛市的领先信号

自2022年11月以来&#xff0c;黄金价格持续上涨&#xff0c;目前已经突破历史新高&#xff0c;历史上黄金上涨&#xff0c;大多是商品全面牛市的领先信号。在2008年Q4、2019年也出现过&#xff0c;黄金比其他商品更强&#xff0c;但随后的2009年和2020年均是商品的全面牛市。同…

AI副业拆解:使用Suno生成你的专属歌曲

大家好我是在看&#xff0c;记录普通人学习探索AI之路。 今天和大家拆解Suno的定制个性化音乐&#xff0c;Suno应用程序热度非凡&#xff0c;其独特之处在于&#xff0c;用户仅需提供歌词内容与期望的歌曲风格&#xff0c;即可一键生成专属曲目。 Suno的诞生&#xff0c;无疑…

考研数学|零基础张宇全年复习规划+资料分享

可以全程张宇老师的高等数学&#xff0c;张宇老师的拿手绝活是 但是其他科目&#xff0c;还有更好的选择&#xff0c;比如线性代数&#xff0c;汤家凤老师还有李永乐老师讲的都不错&#xff0c;概率论&#xff0c;余丙森老师还有方浩老师讲的很好。下面我就讲清楚&#xff0c;…

FPGA时序优化之Reduce MUXF Mapping

我们都知道&#xff0c;FPGA中的拥塞有&#xff1a;全局拥塞&#xff0c;短线拥塞和长线拥塞。 今天我们就来看短线拥塞的一种解决方案&#xff1a;Reduce MUXF Mapping。 UltraScale的CLB资源 在介绍Reduce MUXF Mapping&#xff0c;我们需要知道什么是MUXF&#xff0c;这就…

MongoDB Atlas维护指南:常见类型、注意事项与窗口设置

为了给Atlas用户更好的产品体验&#xff0c;MongoDB产品团队会进行定期维护。 本文将会介绍&#xff1a; 常见维护项目种类及频率&#xff0c;注意事项维护期间的影响及建议维护窗口设置说明维护告警设置和邮件通知范例 维护窗口常见项目 定期SSL证书轮换软件升级&#xff…

内网渗透-(黄金票据和白银票据)详解(一)

目录 一、Kerberos协议 二、下面我们来具体分析Kerberos认证流程的每个步骤&#xff1a; 1、KRB_AS-REQ请求包分析 PA-ENC-TIMESTAMP PA_PAC_REQUEST 2、 KRB_AS_REP回复包分析&#xff1a; TGT认购权证 Logon Session Key ticket 3、然后继续来讲相关的TGS的认证过程…

基于springboot+vue+Mysql的篮球论坛系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

【最全详细解读】Sora都有哪些不足与缺陷?

Sora介绍 Sora是一个能以文本描述生成视频的人工智能模型&#xff0c;由美国人工智能研究机构OpenAI开发。 Sora这一名称源于日文“空”&#xff08;そら sora&#xff09;&#xff0c;即天空之意&#xff0c;以示其无限的创造潜力。其背后的技术是在OpenAI的文本到图像生成模…

win11运行vmware报错“此平台不支持虚拟化的 amd-v/rvi”问题(已解决)

背景&#xff1a; Windows11 安装vmware17 player运行eve需要打开there &#xff08;reference:https://docs.vmware.com/cn/VMware-Workstation-Player-for-Windows/17.0/com.vmware.player.win.using.doc/GUID-3140DF1F-A105-4EED-B9E8-D99B3D3F0447.html&#xff09; 但是…
最新文章