程序员经验分享-hwhale

网易云音乐首页导航样式的实现

2023-10-26

实现效果图：

背景图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;list-style-type:none;color: azure;text-decoration: none;}

        ul,ul li,ul li a {
            background: url("img/sprite.gif") no-repeat scroll left top;
        }
        ul {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color:#CC0000;
            background-repeat: repeat-x;
            background-position: 0 0;
        }
        ul li {
            position: relative;
            float: left;
            padding:0  20px;
            background-position:0 -40px ;

        }
    </style>
</head>
<body>

    <ul>
        <li><a href="#" >首页</a></li>
        <li><a href="#">素材</a></li>
        <li><a href="#" >图片</a> </li>
        <li> <a href="#" >图标</a> </li>
    </ul>
</body>
</html>

注意：background:url("img/sprite.gif") no-repeat scroll left top中的left后面的值不可缺少，可以为top、0、-9999px、999px等；
     background-repeat:repeat-x;放在ul或者li均可； 
     如果想让背景边框线呈现如图效果 ，可在ul的样式中加入padding-top:10px替代line-height:40px，
     并把ul,ul li,ul li a 此处的ul去掉；
 
     背景图片的尺寸要符合实际导航栏的大小。
 

 

转载于:https://www.cnblogs.com/iriliguo/p/6727375.html

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

网易云音乐首页导航样式的实现 的相关文章

  • colmap代码解读

    clomap是作者在ECCV2016年发表的基于两个概率的深度值和法线估计的论文 开源 下面就开源代码Patch match cuda cu文件做简单的介绍 产生随机法向量和随机深度值 扰动法向量 产生随机三个方位角度 和扰动深度值 根据像

  • 多线程案例(2) - 阻塞队列

    目录 一 阻塞队列 1 1 什么是阻塞队列 1 2 生产者消费者模型 1 3 标准库中的阻塞队列 1 4 阻塞队列的实现 一 阻塞队列 1 1 什么是阻塞队列 阻塞队列 BlockingQueue 是一种特殊的队列 遵循 先进先出 的原则

  • Deep-Learning-YOLOV4实践：ScaledYOLOv4模型训练自己的数据集调试问题总结

    error error1 CUDA out of memory error2 TypeError can t convert cuda error Deep Learning YOLOV4实践 ScaledYOLOv4 数据集制作 Deep

  • 知识库-kafka shell脚本用法

    脚本名称 用途描述 connect distributed sh 连接kafka集群模式 connect standalone sh 连接kafka单机模式 kafka acls sh todo kafka broker api versi

  • 一篇搞定dockerfile定制镜像过程

    一 定制镜像的两种方法 1 docker commit 通过已有容器创建镜像 提交容器快照作为镜像 不推荐 2 docker build 就是本文着重讲的dockerfile创建镜像方式 推荐 docker commit无法还原镜像制作过程

  • 【Linux学习】epoll详解

    什么是epoll epoll是什么 按照man手册的说法 是为处理大批量句柄而作了改进的poll 当然 这不是2 6内核才有的 它是在2 5 44内核中被引进的 epoll 4 is a new API introduced in Linu

  • centos7运行vue项目问题汇总

    一 node踩坑之This is probably not a problem with npm There is likely additional logging output above 错误 解决步骤 1 可能由于种种版本更新的原因

  • windbg 常用命令详解

    一 1 address eax 查看对应内存页的属性 2 vertarget 显示当前进程的大致信息 3 peb 显示process Environment Block 4 lmvm 可以查看任意一个dll的详细信息 例如 我们查看cyus

  • java中List按照指定字段排序工具类

    文章标题 java中List按照指定字段排序工具类 文章地址 http blog csdn net 5iasp article details 17717179 包括如下几个类 1 实体类 package com newyear wish

  • 【C语言】螺旋数组

    螺旋数组的打印 程序C语言代码 更改宏定义的数值即可实现螺旋数组行列的变化 include stdio h define ROW 5 宏定义行 define COL 5 宏定义列 void main int arr ROW COL 0 in

  • Python Decorators（二）：Decorator参数

    Python Decorators II Decorator Arguments October 19 2008 本文是Python 3 Patterns Idioms Python3之模式和用法 一书的章节节选第二部分 点击这里阅读第一部

  • Kotlin数据类型（一：数据类型）

    一 Boolean Boolean类型有两种类型的 true flase val a Boolean true val b Boolean false 二 Number数据类型 package net println kotlin auth

  • 强化学习 DQN 速成

    强化学习 DQN 速成 这是对 深度强化学习 王树森 张志华 中 DQN 部分的缩写以及部分内容的个人解读 书中的 DQN 是一个相对终极版本的存在 相信体量会比网络上其他资料要大很多 基本概念 我们通过贪吃蛇来引入几个基本概念 符号 中文

  • Flink Windows（窗口）详解

    Windows 窗口 Windows是流计算的核心 Windows将流分成有限大小的 buckets 我们可以在其上应用聚合计算 ProcessWindowFunction ReduceFunction AggregateFunction或

  • MySQL redo log和undo log

    Redo Log REDO LOG称为重做日志 当MySQL服务器意外崩溃或者宕机后 保证已经提交的事务持久化到磁盘中 持久性 InnoDB是以页为单位去操作记录的 增删改查都会加载整个页到buffer pool中 磁盘 gt 内存 事务中

  • Matlab矩阵处理

    一 通用的特殊矩阵 zero m zeros m n zero size A 产生全为零的矩阵 格式下同 ones 产生全为一的矩度阵 eye 产生单位矩阵 rand 产生在 0 1 区间均匀分布的矩阵 randn 产生均值为0 方差为1的

  • C计数问题---2023河南萌新联赛第（三）场：郑州大学

    解析 n 可以分成两个数 记录每个数的因子对数 乘起来即可 注意当因子相同时 只 1 include

  • Java文件类型校验之Apache Tika

    一 背景 判断文件类型一般可采用两种方式 1 后缀名判断 简单易操作 但无法准确判断类型 2 文件头信息判断 通常可以判断文件类型 但有些文件类型无法判断 如word和excel头信息的前几个字节是一样的 无法判断 使用apache tik

  • flink watermark 生成机制与总结

    flink watermark 生成机制与总结 watermark 介绍 watermark生成方式 watermark 的生成值算法策略 watermark策略设置代码 watermark源码分析 watermark源码调用流程debug

  • 你知道几种延迟队列的实现方案？

    在开发中 往往会遇到一些关于延时任务的需求 例如 生成订单30分钟未支付 则自动取消 生成订单60秒后 给用户发短信 对上述的任务 我们给一个专业的名字来形容 那就是延时任务 那么这里就会产生一个问题 这个延时任务和定时任务的区别究竟在哪里

随机推荐

  • Reid训练代码之数据集处理

    本篇文章是对yolov5 reid这篇文章训练部分的详解 该项目目录为 config reid输入大小 数据集名称 损失函数等配置 configs 训练时期超参数定义 data 存储数据集和数据处理等代码 以及yolov5类别名称等 eng

  • 怎样更改itunes备份位置_什么是iTunes备份文件？

    由于它是由Apple创建的 因此iTunes改变了用户组织和播放音乐和视频的方式 iTunes已经允许数百万用户通过iTunes Store下载他们喜爱的曲目 歌曲和视频 值得庆幸的是 iTunes拥有一个先进的备份系统 能够备份和恢复Ip

  • Android libdvm.so 与 libart.so

    Android libdvm so 与 libart so 系统升级到5 1之后 发现system lib 下面没有libdvm so了 只剩下了libart so 对于libart模式 从4 4就在Developer optins里面就可

  • FsonFormat Eclipse Plugin 一键解决复杂JSON ，快速实现JavaBean

    简介 当开发人员或者测试人员在开发或者测试接口中 去获取到接口返回的结果值时 都要通过JSONObject和JSONArray解析json结构 然后再通过For循环遍历相应的Key 最后把value值进行App展示或者校验是否预期结果 编写

  • 有关树莓派+arduino构建小车

    这里写自定义目录标题 欢迎使用Markdown编辑器 新的改变 功能快捷键 合理的创建标题 有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成一个适合你的列表 创建一个表格 设定内容居中 居左 居右 Sma

  • eclipse中没有runtime environments_Go语言中的panic和recover

    初识别panic和recover 本节将分析两个经常成对出现的关键字 panic 和 recover 这两个关键字都与 defer 有千丝万缕的联系 也都是 Go 语言中的内置函数 但是提供的功能却是互补的 panic 能够改变程序的控制流

  • opencv 图像雾检测_雾的检测算法

    雾的检测算法相对来说文献不是很多 这次和大家介绍两篇相对来说比较容易实现的两篇文章 其中一篇是基于灰度直方图的方式进行分析检测 另一篇是将rgb图像空间转化为hsv空间进行分析检测 1 灰度图检测 首先来说第一片 Fog Detection

  • 如何用ai写文章？这三个软件可以自动生成文章

    随着人工智能技术的不断发展 ai写作已经成为了当今的热门话题 它是指利用机器学习 自然语言处理等技术 让机器能够像人类一样写作 相较于传统写作方式 ai写作大大提高了写作的效率和质量 可以让我们的创意和技术相融合 其应用范围也非常广泛 无论

  • 探索编程世界的宝藏：程序员必掌握的20大算法

    程序员必须掌握哪些算法 文章目录 1 引言 2 冒泡排序算法 编程世界的排序魔法 3 选择排序算法 排序世界的精确挑选器 4 插入排序算法 排序世界的巧妙插珠者 5 快速排序算法 排序世界的分而治之大师 6 归并排序算法 排序世界的合而为一

  • 统计并输出该字符串中26个英文字母

    字符串 第3题 描述 输入一个字符串 统计并输出该字符串中26个英文字母 不区分大小写 出现的次数 输入 输入一个字符串 输出 分行输出26个英文字母 不区分大小写 出现的次数 输入示例 I am a student 输出示例 a 2 d

  • Python：蒙特卡罗方法模拟解决三门问题

    蒙特卡罗方法与三门问题 蒙特 卡罗方法 Monte Carlo method 也称统计模拟方法 是一种统计学的方法 模拟方法 通过大量随机样本模拟问题 从而获得所要计算的值 三门问题 三门问题 Monty Hall problem 亦称为蒙

  • STM32：TIM_OCxInit函数用法解释

    TIM OC3Init函数是用于初始化定时器TIM的PWM输出通道3的函数 可以使用以下步骤进行使用 创建一个TIM OC InitTypeDef类型的结构体对象 例如命名为TIM OCInitStruct 使用TIM OCStructIn

  • 网络基础知识总结

    一 广域网和局域网 局域网 Local Area Network 简称LAN 也就是内网 局域网就是在固定的一个地理区域内由2台以上的电脑用网线和其他网络设备搭建而成的一个封闭的计算机组 它可以是邻居之间的2台电脑 也可以是一幢100层大楼

  • [深入研究4G/5G/6G专题-41]: URLLC-12-《3GPP URLLC相关协议、规范、技术原理深度解读》-6-MAC层调度器的总体架构、调度器的原理和三种URLLC调度器的增强方案

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文主页 https blog csdn net HiWangWenBing article details 125942872 目录 前言

  • 杭电ACM 1000题

    import java util Scanner public class Main public static void main String args Scanner cin new Scanner System in while c

  • ajax 跨域 session 丢失问题

    ajax 跨域时session丢失了 解决方法 首先我 Google 了一下这个问题的原因 我找到了这个 1 Access Control Allow Origin该字段是必须的 它的值要么是请求时Origin字段的值 要么是一个 表示接受

  • Cookie与前端安全

    目录 一 Cookie的作用 二 cookie与http协议 1 http响应 cookie的生成 2 http请求 cookie的发送 三 Cookie的属性 1 Expires Max Age 2 Domain Path 3 Secur

  • 30分钟速成TypeScript

    一 TypeScript 是什么 TypeScript 是 JavaScript 的超集 在 JavaScript 的基础上增加了类 模块 接口 泛型和静态类型 可选 等常见的概念 从编程语言的动 静来区分 TypeScript属于静态类型

  • JS代码风格利器——Eslint

    ESLint 是一个开源的 JavaScript 代码检查工具 由 Nicholas C Zakas 于 2013 年 6 月 创建 代码检查是一种静态的分析 常用于寻找有问题的模式或者代码 并且不依赖于具体 的编码风格 对大多数编程语言来

  • 网易云音乐首页导航样式的实现

    实现效果图 背景图片

热门标签