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

最新CSS3纵向菜单的实现

news 2026/4/1 13:49:41

纵向菜单

通过下面例子，你会知道把列表转换成菜单的关键技术

a中的#是URL的占位符可以点击，真正用途中写实际URL

<nav class="list1"><ul><li><a href="#">Alternative</a></li><li><a href="#">Country</a></li><li><a href="#">Jazz</a></li><li><a href="#">Rock</a></li></ul>
</nav>
  1. 新建HTML页面，并初始化上面的内容
  2. 去掉默认的内边距和外边距
  3. 设置菜单位置外边框50px,宽度150px
  4. 给菜单加上边框1px,固态,#f00,圆角3px,内边距上5px,左右10px,下3px
  5. 去掉项目符号并添加链接间距上下3px，左右10px
  6. 非首位选择器设置上边框1px,实线,#f00
  7. 链接添加样式，去掉下划线，字体大小20px,字体为Exo, helvetica,arial, sans-serif，字体粗细400，字体颜色#000，背景颜色#ffed53
  8. 悬停到a上高亮，字体变为#069
  9. 目前只有文本可以点击(a是行内元素收缩包住了文本)，为了用户体验整行都能点击，将li的内边距移到a内部，上边框红线给非首位li中的a加上，a为了撑满显示为块级元素。

 

案例源码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}nav {margin: 50px;width: 150px;}.list1 ul {border: 1px solid #f00;border-radius: 3px;padding: 5px 10px 3px;}.list1 li {list-style-type: none;}.list1 li+li a {border-top: 1px solid #f00;}.list1 a {display: block;padding: 3px 10px;text-decoration: none;font: 20px Exo, helvetica, arial, sans-serif;font-weight: 400;color: #000;background: #ffed53;}.list1 a:hover {color: #069;        }</style></head><body><nav class="list1"><ul><li><a href="#">Alternative</a></li><li><a href="#">Country</a></li><li><a href="#">Jazz</a></li><li><a href="#">Rock</a></li></ul></nav></body>
</html>

相关文章：

最新CSS3纵向菜单的实现

纵向菜单 通过下面例子&#xff0c;你会知道把列表转换成菜单的关键技术 a中的#是URL的占位符可以点击&#xff0c;真正用途中写实际URL <nav class"list1"><ul><li><a href"#">Alternative</a></li><li><…...

编程日记 2024/8/6 0:15:51

GooLeNet模型搭建

一、model import torch from torch import nn from torchsummary import summaryclass Inception(nn.Module):def __init__(self, in_channels, c1, c2 , c3 , c4):super(Inception, self).__init__()self.ReLU nn.ReLU()#路线1:1x1卷积self.p1_1 nn.Conv2d(in_channels i…...

编程日记 2024/8/6 0:14:49

使用ThreadLocal来存取单线程内的数据

一.什么是ThreadLocal&#xff1f; ThreadLocal&#xff0c;即线程本地变量。如果你创建了一个 ThreadLocal变量&#xff0c;那么访问这个变量的每个线程都会有这个变量的一个本地拷贝&#xff0c;多个线程操作这个变量的时候&#xff0c;实际是在操作自己本地内存里面的变量&…...

编程日记 2024/8/6 0:11:45

elasticsearch教程

1. 单点部署(rpm): #提前关闭firewalld,否则无法组建集群 #1. 下载ES rpm包 ]# https://www.elastic.co/cn/downloads #2. 安装es ]# rpm -ivh elasticsearch-7.17.5-x86_64.rpm #3. 调整内核参数(太低的话es会启动报错) echo "vm.max_map_count655360 fs.file-max 655…...

编程日记 2024/8/6 0:10:44

Arrays、Lambda表达式、Collection集合

1. Arrays 1.1 操作数组的工具类 方法名说明public static String toString(数组)把数组拼接成一个字符串public static int binarySearch(数组,查找的元素)二分查找法查找元素public static int[] copyOf(原数组,新数组长度)拷贝数组public static int[] copyOfRange(原数组…...

编程日记 2024/8/6 0:09:41

2024年前端趋势：全栈或许是不容错过的选择！

近年来&#xff0c;前端开发的技术不断推陈出新&#xff0c;2024年也不例外。在这个变化迅速的领域&#xff0c;全栈开发逐渐成为一股不容忽视的趋势。无论你是经验丰富的开发者&#xff0c;还是刚刚入门的新手&#xff0c;掌握全栈技术都能让你在竞争中脱颖而出。而在这个过程…...

编程日记 2024/8/6 0:05:34

MySQL 实战 45 讲（01-05）

本文为笔者学习林晓斌老师《MySQL 实战 45 讲》课程的学习笔记&#xff0c;并进行了一定的知识扩充。 sql 查询语句的执行流程 大体来说&#xff0c;MySQL 可以分为 Server 层和存储引擎层两部分。 Server 层包括连接器、查询缓存、分析器、优化器和执行器。 连接器负责接收客…...

编程日记 2024/8/6 0:04:33

仓颉编程语言入门 -- Array数组详解

仓颉编程语言入门 – Array数组详解 一. 如何创建Array数组 我们可以使用 Array 类型来构造单一元素类型&#xff0c;有序序列的数据。 1.仓颉使用 Array 来表示 Array 类型。T 表示 Array 的元素类型&#xff0c;T 可以是任意类型 , 类似于泛型的概念 var arr:Array<St…...

编程日记 2024/8/6 0:03:31

C#初级——简单单例模式使用

单例模式 单例模式是一种常用的软件设计模式&#xff0c;它确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取这个实例&#xff0c;通过单例模式防止私有成员被多次引用&#xff0c;防止数据被随意纂改。本文使用的是线程不安全的懒汉式单例。 创建单例模式 首…...

编程日记 2024/8/6 0:01:28

2024.07.29 校招 实习 内推 面经

地/球&#x1f30d; &#xff1a; neituijunsir 交* 流*裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 美/团// 快驴、小象、优/选/事/业/部2024年校/园/招聘&#xff08;内推&#xff09; 校招 | 美团快驴、小象、优选事业部2024年校园招聘&#xff08;内推&#xff…...

编程日记 2024/8/5 23:59:27

速盾：爬虫攻击和cc攻击的区别是什么？

爬虫攻击和CC&#xff08;Distributed Denial of Service&#xff09;攻击是网络安全领域两种不同类型的攻击方式。尽管它们都涉及对目标网站或服务器的非法访问&#xff0c;但它们的目的、方法和影响各不相同。在接下来的文章中&#xff0c;我们将详细介绍这两种攻击方式的区别…...

编程日记 2024/8/5 23:58:26

Tomcat与Nginx的区别详解

目录 引言Tomcat概述 Tomcat的历史Tomcat的架构Tomcat的功能Nginx概述 Nginx的历史Nginx的架构Nginx的功能Tomcat与Nginx的区别 架构上的区别...

编程日记 2024/8/5 23:54:22

【大模型从入门到精通5】openAI API高级内容审核-1

这里写目录标题 高级内容审核利用 OpenAI 内容审核 API 的高级内容审核技术整合与实施使用自定义规则增强审核综合示例防止提示注入的策略使用分隔符隔离命令理解分隔符使用分隔符实现命令隔离 高级内容审核 利用 OpenAI 内容审核 API 的高级内容审核技术 OpenAI 内容审核 AP…...

编程日记 2024/8/5 23:53:21

JVM系列 | 对象的消亡3——垃圾收集器的对比与实现细节

垃圾收集器 文章目录 各收集器简单对比收集器启动参数各收集器详细说明JDK 1.3 之前JDK 1.3 | SerialJDK 1.4 | ParNewJDK 1.4 | Parallel ScavengeJDK 5 | CMS 收集器JDK 7 | G1 各收集器简单对比 收集器名称出现时间淘汰时间目标采用技术线程数STW分代备注无名JDK 1.3之前JD…...

编程日记 2024/8/5 23:52:20

C# Unity 面向对象补全计划 七大原则 之 开闭原则（OCP） 难度：☆ 总结：已经写好的就别动它了，多用继承

本文仅作学习笔记与交流&#xff0c;不作任何商业用途&#xff0c;作者能力有限&#xff0c;如有不足还请斧正 本系列作为七大原则和设计模式的进阶知识&#xff0c;看不懂没关系 请看专栏&#xff1a;http://t.csdnimg.cn/mIitr&#xff0c;查漏补缺 1.开闭原则&#xff08;OC…...

编程日记 2024/8/5 23:51:18

微信防封指南请收好

一、新号与老号的添加限制 建议新注册的微信号主动添加好友的数量不宜过多&#xff0c;推荐每日添加不超过5个好友&#xff1b;对于老号&#xff0c;建议每日添加不超过20个好友。保持适度的添加速度&#xff0c;避免被系统判定为异常操作。 二、避免使用营销性词汇 在发送消…...

编程日记 2024/8/5 23:50:16

选择排序算法改进思路和算法实现

选择排序 在未排序的数组中&#xff0c;用第一个数去和后面的数比较&#xff0c;找出最小的数&#xff0c;和第一个数交换。第一个数已为已排序的数。 相当于0~7 从0~7中找到最小的数放在0 从1~7中找到最小的数放在1 从2~7中找到最小的数放在2 ...以此类推 从6~7中找到最…...

编程日记 2024/8/5 23:49:15

【文件解析漏洞复现】

一&#xff0e;IIS解析漏洞复现 1.IIS6.X 方式一&#xff1a;目录解析 搭建IIS环境 在网站下建立文件夹的名字为.asp/.asa 的文件夹&#xff0c;其目录内的任何扩展名的文件都被IIS当作asp文件来解析并执行。 访问成功被解析 方式一&#xff1a;目录解析 在IIS 6处理文件解…...

编程日记 2024/8/5 23:47:12

【STL】 vector的底层实现

1.vector的模拟代码完整实现&#xff08;后面会拆分开一个一个细讲&#xff09; #pragma once #include<assert.h>// 抓重点namespace bit {/*template<class T>class vector{public:typedef T* iterator;private:T* _a;size_t _size;size_t _capacity;};*/templa…...

编程日记 2024/8/5 23:45:11

责任链模式：解耦职责，优化请求处理

在软件设计中&#xff0c;如何有效地处理复杂的请求是一个重要的课题。 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;提供了一种解耦请求发送者和接收者的方法&#xff0c;使得多个对象都有机会处理请求&#xff0c;从而达到灵活和可扩展的设计。 什么…...

编程日记 2024/8/5 23:42:08

春联生成模型快速上手：输入‘幸福‘、‘平安‘等关键词，自动生成对仗工联

春联生成模型快速上手&#xff1a;输入幸福、平安等关键词&#xff0c;自动生成对仗工联 1. 春联生成器简介 春节贴春联是中国人延续千年的传统习俗&#xff0c;但创作一副对仗工整、寓意吉祥的春联并不容易。现在&#xff0c;借助AI技术&#xff0c;任何人都能轻松生成专业水…...

编程新知 2026/4/1 13:49:21

从《魔兽世界》到你的项目：拆解一个高可用的Unity Buff系统架构设计

从《魔兽世界》到你的项目&#xff1a;拆解一个高可用的Unity Buff系统架构设计 在MMO游戏的黄金时代&#xff0c;《魔兽世界》的Buff系统曾让无数玩家着迷——从圣骑士的光环到法师的变形术&#xff0c;每个效果背后都隐藏着精密的系统设计。如今&#xff0c;这些经过千万级用…...

编程新知 2026/4/1 12:18:11

RWKV7-1.5B-G1A快速上手：5分钟部署你的轻量级文本生成助手

RWKV7-1.5B-G1A快速上手&#xff1a;5分钟部署你的轻量级文本生成助手 1. 为什么选择RWKV7-1.5B-G1A 如果你正在寻找一个轻量级但功能强大的文本生成模型&#xff0c;RWKV7-1.5B-G1A绝对值得考虑。这个基于RWKV-7架构的模型在1.5B参数规模下展现了出色的性能&#xff0c;特别…...

编程新知 2026/4/1 7:53:50

每日算法题 21---54.螺旋矩阵

题目54.螺旋矩阵要求给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。示例思路核心思路是用边界圈定遍历范围&#xff0c;按照固定方向循环遍历&#xff0c;每遍历完一条边就收缩对应边界&#xff0c;直到边界交叉终止&…...

编程新知 2026/4/1 7:10:48

智能车调参手记：我用Kp=200, Ki=60, Kd=40让小车稳如老狗

智能车调参手记&#xff1a;我用Kp200, Ki60, Kd40让小车稳如老狗 凌晨三点的实验室里&#xff0c;咖啡杯已经见底&#xff0c;眼前的智能车在测试跑道上又一次冲出了弯道。这已经是本周第七次熬夜调试&#xff0c;上坡时的速度波动问题始终困扰着我们。就在准备放弃的时候&…...

编程新知 2026/4/1 6:09:22

Go Module 依赖冲突调试方法

Go Module 依赖冲突调试方法 在Go语言开发中&#xff0c;依赖管理是一个关键环节。随着项目规模的扩大&#xff0c;依赖的第三方库越来越多&#xff0c;版本冲突问题也愈发常见。Go Module作为官方推荐的依赖管理工具&#xff0c;虽然简化了依赖管理流程&#xff0c;但在多级依…...

编程新知 2026/4/1 5:59:20

Stable Diffusion 2.0超分实战：4倍放大图片还能保持清晰度的秘密

Stable Diffusion 2.0超分实战&#xff1a;4倍放大图片还能保持清晰度的秘密 在数字图像处理领域&#xff0c;超分辨率技术一直是设计师和开发者关注的焦点。传统放大方法往往导致图像模糊、细节丢失&#xff0c;而基于深度学习的超分方案正在改变这一局面。Stable Diffusion 2…...

编程新知 2026/4/1 5:57:11

告别轮询！用STM32F407的USART3+DMA+空闲中断实现高效串口数据接收

STM32F407高效串口通信&#xff1a;USART3DMA空闲中断实战指南 在嵌入式开发中&#xff0c;串口通信是最基础也最常用的外设之一。传统的中断接收方式虽然简单&#xff0c;但在高速或大数据量传输时&#xff0c;频繁的中断响应会显著增加CPU负担&#xff0c;甚至导致数据丢失。…...

编程新知 2026/4/1 5:39:02

Vision Transformer在timm中的实现与优化

Vision Transformer在timm中的实现与优化 【免费下载链接】pytorch-image-models The largest collection of PyTorch image encoders / backbones. Including train, eval, inference, export scripts, and pretrained weights -- ResNet, ResNeXT, EfficientNet, NFNet, Visi…...

编程新知 2026/4/1 4:48:23

7步掌握MetaGPT：从单行需求到完整软件的多智能体革命

7步掌握MetaGPT&#xff1a;从单行需求到完整软件的多智能体革命 【免费下载链接】MetaGPT &#x1f31f; The Multi-Agent Framework: First AI Software Company, Towards Natural Language Programming 项目地址: https://gitcode.com/GitHub_Trending/me/MetaGPT 想…...

编程新知 2026/4/1 4:11:49