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

html菜单的基本制作

前面写过一点网页菜单的博文;下面再复习一些技术要点;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #0F0;
}li {float: left;
}li a {display: block;color: white;text-align: center;padding: 14px 16px;
}</style>
</head>
<body><ul><li><a href="#">首页</a></li><li><a href="#">新闻</a></li><li><a href="#">公司</a></li><li><a href="#">解决方案</a></li><li><a href="#">联系我们</a></li>
</ul></body>
</html>

先只看外观静态部分;

html菜单通常是用 ul-li 元素来制作,然后在li元素里面再包含 a 元素;这是最基本的构成;然后再用css来修饰;

上面代码,如果去掉 <style></style>里面的内容;则显示如下;

为了形成横条菜单,需要设置几个基本属性;

ul要设置list-style-type: none; 如果设置ul的背景色,就设置了整个菜单区域的背景色;

然后设置li的float: left;  li 向左浮动;向左浮动之后,li就不是每个li占一行,一个跟一个,都在一行里;

然后为了使得a元素有菜单的效果,一般都设置a元素的 display: block;

基本菜单效果如下;

 

相关文章:

html菜单的基本制作

前面写过一点网页菜单的博文&#xff1b;下面再复习一些技术要点&#xff1b; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.…...

Spark Job优化

1 Map端优化 1.1 Map端聚合 map-side预聚合&#xff0c;就是在每个节点本地对相同的key进行一次聚合操作&#xff0c;类似于MapReduce中的本地combiner。map-side预聚合之后&#xff0c;每个节点本地就只会有一条相同的key&#xff0c;因为多条相同的key都被聚合起来了。其他节…...

CSS花边001:无衬线字体和有衬线字体

网站中我们看到过很多字体&#xff0c;样子各有千秋。通常针对结构&#xff0c;区分为有衬字体&#xff08;serif&#xff09; 和无衬字体&#xff08;sans-serif&#xff09;。今天我们聊一下这个话题。 什么是有衬字体&#xff0c;什么是无衬字体&#xff1f; 衬线字体&…...

nodejs+vue+python+PHP+微信小程序-安卓- 基于小程序的高校后勤管理系统-计算机毕业设计

考虑到实际生活中在高校后勤管理小程序管理方面的需要以及对该系统认真的分析,将系统权限按管理员和用户这两类涉及用户划分。任何系统都要遵循系统设计的基本流程&#xff0c;本系统也不例外&#xff0c;同样需要经过市场调研&#xff0c;需求分析&#xff0c;概要设计&#x…...

Leetcode153. Find Minimum in Rotated Sorted Array

旋转数组找最小值 其中数组中的值唯一 你可以顺序遍历&#xff0c;当然一般会让你用二分来搞 方法1 数组可以分成两部分&#xff0c;左边是 ≥ n u m s [ 0 ] \ge nums[0] ≥nums[0], 右边是 < n u m s [ 0 ] <nums[0] <nums[0] 换句话说就是找第一个 < n u m s…...

为什么要用“交叉熵”做损失函数

大家好啊&#xff0c;我是董董灿。 今天看一个在深度学习中很枯燥但很重要的概念——交叉熵损失函数。 作为一种损失函数&#xff0c;它的重要作用便是可以将“预测值”和“真实值(标签)”进行对比&#xff0c;从而输出 loss 值&#xff0c;直到 loss 值收敛&#xff0c;可以…...

【Android】Android apk 逆向编译

链接&#xff1a;https://pan.baidu.com/s/14r5s9EJwQgeLK5cCb1Gq1Q 提取码&#xff1a;qdqt 解压jadx 在 lib 文件内找到 jadx-gui-1.4.7.jar 打开cmd 执行 &#xff1a;java -jar jadx-gui-1.4.7.jar示列&#xff1a;...

04-详解SpringBoot自动装配的原理,依赖属性配置的实现,源码分析

自动装配原理 依赖属性配置 提供Bean用来封装配置文件中对应属性的值 Data public class Cat {private String name;private Integer age; }Data public class Mouse {private String name;private Integer age; }cartoon:cat:name: "图多盖洛"age: 5mouse:name: …...

[100天算法】-不同路径 III(day 73)

题目描述 在二维网格 grid 上&#xff0c;有 4 种类型的方格&#xff1a;1 表示起始方格。且只有一个起始方格。 2 表示结束方格&#xff0c;且只有一个结束方格。 0 表示我们可以走过的空方格。 -1 表示我们无法跨越的障碍。 返回在四个方向&#xff08;上、下、左、右&#…...

【c++随笔12】继承

【c随笔12】继承 一、继承1、继承的概念2、3种继承方式3、父类和子类对象赋值转换4、继承中的作用域——隐藏5、继承与友元6、继承与静态成员 二、继承和子类默认成员函数1、子类构造函数 二、子类拷贝构造函数3、子类的赋值重载4、子类析构函数 三、单继承、多继承、菱形继承1…...

Excel中使用数据验证、OFFSET实现自动更新式下拉选项

在excel工作簿中&#xff0c;有两个Sheet工作表。 Sheet1&#xff1a; Sheet2&#xff08;数据源表&#xff09;&#xff1a; 要实现Sheet1中的“班级”内容&#xff0c;从数据源Sheet2中获取并形成下拉选项&#xff0c;且Sheet2中“班级”内容更新后&#xff0c;Sheet1中“班…...

Android修行手册 - 可变参数中星号什么作用(冷知识)

点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&…...

Python与ArcGIS系列(三)视图缩放

目录 0 简述1 在所有图层中缩放至所选要素2 在单独图层中缩放至所选要素3 改变地图范围0 简述 本篇介绍如何利用arcpy实现缩放视图到所选要素以及改变地图范围功能。 对于以及创建的选择集数据,通常需要进行缩放以更好地显示所选要素,要素缩放可分为两种:第一种是在所有图层…...

[ASP]数据库编辑与管理V1.0

本地测试&#xff1a;需要运行 ASP专业调试工具&#xff08;自己搜索下载&#xff09; 默认登陆口令&#xff1a;admin 修改口令&#xff1a;打开index.asp找到第3行把admin"admin"改成其他&#xff0c;如admin"abc123" 程序功能齐全&#xff0c;代码精简…...

MyBatis Plus整合Redis实现分布式二级缓存

MyBatis缓存描述 MyBatis提供了两种级别的缓存&#xff0c; 分别时一级缓存和二级缓存。一级缓存是SqlSession级别的缓存&#xff0c;只在SqlSession对象内部存储缓存数据&#xff0c;如果SqlSession对象不一样就无法命中缓存&#xff0c;二级缓存是mapper级别的缓存&#xff…...

如何帮助 3D CAD 设计师实现远程办公

当 3D CAD 设计师需要远程办公时&#xff0c;他们可能需要更强的远程软件&#xff0c;以满足他们的专业需求。比如高清画质&#xff0c;以及支持设备重定向、多显示器支持等功能。3D CAD 设计师如何实现远程办公&#xff1f;接下来我们跟随 Platinum Tank Group 的故事来了解一…...

如何在 Idea 中修改文件的字符集(如:UTF-8)

以 IntelliJ IDEA 2023.2 (Ultimate Edition) 为例&#xff0c;如下&#xff1a; 点击左上角【IntelliJ IDEA】->【Settings…】&#xff0c;如下图&#xff1a; 从弹出页面的左侧导航中找到【Editor】->【File Encodings】&#xff0c;并将 Global Encoding、Project E…...

【C++】单例模式【两种实现方式】

目录 一、了解单例模式前的基础题 1、设计一个类&#xff0c;不能被拷贝 2、设计一个类&#xff0c;只能在堆上创建对象 3、设计一个类&#xff0c;只能在栈上创建对象 4、设计一个类&#xff0c;不能被继承 二、单例模式 1、单例模式的概念 2、单例模式的两种实现方式 …...

php的api接口token简单实现

<?php // 生成 Token function generateToken() {$token bin2hex(random_bytes(16)); // 使用随机字节生成 tokenreturn $token; } // 存储 Token&#xff08;这里使用一个全局变量来模拟存储&#xff09; $tokens []; // 验证 Token function validateToken($token) {gl…...

CCNA课程实验-13-PPPoE

目录 实验条件网络拓朴需求 配置实现基础配置模拟运营商ISP配置ISP的DNS配置出口路由器OR基础配置PC1基础配置 出口路由器OR配置PPPOE拨号创建NAT(PAT端口复用) PC1测试结果 实验条件 网络拓朴 需求 OR使用PPPoE的方式向ISP发送拨号的用户名和密码&#xff0c;用户名&#xf…...

OpenClaw多模型对比:千问3.5-9B与其他开源模型性能实测

OpenClaw多模型对比&#xff1a;千问3.5-9B与其他开源模型性能实测 1. 为什么需要多模型对比 去年冬天&#xff0c;当我第一次在本地部署OpenClaw时&#xff0c;最让我头疼的问题不是安装配置&#xff0c;而是选择哪个大模型作为后端。官方文档列出了十几种兼容模型&#xff…...

WarcraftHelper:经典游戏现代化的终极优化解决方案

WarcraftHelper&#xff1a;经典游戏现代化的终极优化解决方案 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper WarcraftHelper是一款专为魔兽争霸III设…...

澳大利亚太阳能气象与光伏数据集:15年运营数据的深度解析与应用

1. 澳大利亚太阳能数据宝藏&#xff1a;15年实战记录的价值解读 第一次接触澳大利亚DKASC和Yulara Solar System数据集时&#xff0c;我就像发现了一个装满金矿的宝箱。这套横跨15年的太阳能气象与光伏运营数据&#xff0c;记录着北领地沙漠地区39个太阳能电站每分钟的"呼…...

zk(zookeeper)的选举机制

zk中有两种角色&#xff1a;Leader 和 Fllower&#xff0c;Leader是集群各台电脑投票选举出来的。事务【非常重要】&#xff1a;一通操作&#xff0c;要么同时成立&#xff0c;要么都不成立。LeaderZookeeper 集群工作的核心。1.事务请求&#xff08;写操作&#xff09;的唯一调…...

WePush邮件推送完全手册:从基础配置到批量发送的完整流程

WePush邮件推送完全手册&#xff1a;从基础配置到批量发送的完整流程 【免费下载链接】WePush 专注批量推送的小而美的工具&#xff0c;目前支持&#xff1a;模板消息-公众号、模板消息-小程序、微信客服消息、微信企业号/企业微信消息、阿里云短信、阿里大于模板短信 、腾讯云…...

OFA视觉蕴含模型作品集:图文匹配智能判断精彩案例

OFA视觉蕴含模型作品集&#xff1a;图文匹配智能判断精彩案例 1. 视觉蕴含技术简介 视觉蕴含&#xff08;Visual Entailment&#xff09;是人工智能领域的一项重要技术&#xff0c;它能够判断图像内容与文本描述之间的逻辑关系。简单来说&#xff0c;就是让AI系统理解图片和文…...

ExcelCPU安全指南:在电子表格中运行代码的5大风险与防护策略

ExcelCPU安全指南&#xff1a;在电子表格中运行代码的5大风险与防护策略 【免费下载链接】excelCPU 16-bit CPU for Excel, and related files 项目地址: https://gitcode.com/gh_mirrors/ex/excelCPU ExcelCPU是一个创新的16位CPU模拟器&#xff0c;完全在Excel电子表格…...

Braft Editor图片处理优化:拖拽调整大小与等比例缩放的终极指南

Braft Editor图片处理优化&#xff1a;拖拽调整大小与等比例缩放的终极指南 【免费下载链接】braft-editor 美观易用的React富文本编辑器&#xff0c;基于draft-js开发 项目地址: https://gitcode.com/gh_mirrors/br/braft-editor Braft Editor是一款基于React和Draft.j…...

STM32F407+LAN9252 EtherCat从站开发避坑指南:从SSC配置到TwinCAT3联调全流程

STM32F407LAN9252 EtherCat从站开发实战&#xff1a;从零构建工业通信节点的完整指南 当工业4.0的浪潮席卷全球制造业时&#xff0c;EtherCat协议凭借其卓越的实时性能成为自动化领域的黄金标准。对于嵌入式开发者而言&#xff0c;掌握基于STM32和LAN9252的从站开发技术&#x…...

论文引用格式太复杂?9种主流标准一键搞定,2026年硕博生必备神器推荐

&#x1f4a1; 核心要点 你是否也遇到过这样的崩溃时刻&#xff1a;熬夜写完论文&#xff0c;却被导师的一句"引用格式不规范&#xff0c;重新调整"打回原形&#xff1f;手动调整APA、MLA、GB/T 7714等不同格式&#xff0c;一个标点符号都不能错&#xff0c;一篇论文…...