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;

基本菜单效果如下;

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RLHF讲解

RLHF包含了两个至关重要的步骤&#xff1a; 训练Reward Model用Reward Model和SFT Model构造Reward Function&#xff0c;基于PPO算法来训练LLM frozen RMfrozen SFT ModelActor π Φ R L \pi_{\Phi}^{R L} πΦRL​ initialized from SFT ModelCritic V η V_\eta Vη​ i…

tensorboard报错解决:No dashboards are active for the current data set

版本&#xff1a;tensorboard 2.10.0 问题&#xff1a;文件夹下明明有events文件&#xff0c;但用tensorboard命令却无法显示。 例如&#xff1a; 原因&#xff1a;有可能是文件路径太长了&#xff0c;导致系统无法读取文件。在win系统中规定&#xff0c;目录的绝对路径不得超…

案例续集留言板

前端没有保存数据的功能,后端把数据保存下来(内存,数据库等等......) 前端代码如下 : <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initia…

论文笔记--Baichuan 2: Open Large-scale Language Models

论文笔记--Baichuan 2: Open Large-scale Language Models 1. 文章简介2. 文章概括3 文章重点技术3.1 预训练3.1.1 预训练数据3.1.2 模型架构 3.2 对齐3.2.1 SFT3.2.2 Reward Model(RM)3.2.3 PPO 3.3 安全性 4. 文章亮点5. 原文传送门 1. 文章简介 标题&#xff1a;Baichuan 2…

PyQt制作【小红书图片抓取】神器

文章目录 &#x1f4e2;闲言碎语&#x1f43e;窗口设计&#x1f43e;功能设计&#x1f4da;资源领取 &#x1f4e2;闲言碎语 最近写一个系统&#xff0c;被一个Bug折腾了两天&#xff0c;至今还未解决。由于解决Bug弄得我有点心力憔悴&#xff0c;于是想着写其他小项目玩玩&am…

Halcon WPF 开发学习笔记(2):Halcon导出c#脚本和WPF初步开发

文章目录 前言HalconC#教学简单说明如何二开机器视觉如何二次开发Halcon导出Halcon脚本新建WPF项目&#xff0c;导入Halcon脚本和Halcon命名空间 前言 我目前搜了一下我了解的机器视觉软件&#xff0c;有如下特点 优点缺点兼容性教学视频(B站前三播放量)OpenCV开源&#xff0…

Windows桌面黑屏无法打开软件窗口不显示卡死等解决方案

问题还原 该软件窗口无论如何操作均 无法打开显示的窗口 ,但是 可使用 ALTTab 看到任务视图 目录 问题还原 解决方案 1. 使用 WinR 打开命令窗口 盲输 cmd 2. 盲输 taskkill /f /im explorer.exe 关闭资源管理器 3. 输入 start explorer.exe 启动任务管理器即可恢复正常…

TDD、BDD、ATDD以及SBE的概念和区别

在软件开发或是软件测试中会遇到以下这些词&#xff1a;TDD 、BDD 、ATDD以及SBE&#xff0c;这些词代表什么意思呢&#xff1f; 它们之间有什么关系吗&#xff1f; TDD 、BDD 、ATDD以及SBE的基本概念 TDD&#xff1a;&#xff08;Test Driven Development&#xff09;是一种…

基于飞蛾扑火算法优化概率神经网络PNN的分类预测 - 附代码

基于飞蛾扑火算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于飞蛾扑火算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于飞蛾扑火优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…

链表OJ题(4)

目录 10.链表的回文结构 11.随机链表的复制 &#x1f642;找中间节点一定要考虑偶数个和奇数个的问题。 &#x1f642;指针指向的前中后。 &#x1f642;链表节点的位置个数/链表的节点中的数字。&#x1f197;&#x1f197; 今天最后两道链表OJ题目。 10.链表的回文结构…

【C++】非类型模板参数 | array容器 | 模板特化 | 模板为什么不能分离编译

目录 一、非类型模板参数 二、array容器 三、模板特化 为什么要对模板进行特化 函数模板特化 补充一个问题 类模板特化 全特化与偏特化 全特化 偏特化 四、模板为什么不能分离编译 为什么 怎么办 五、总结模板的优缺点 一、非类型模板参数 模板参数分两类&#x…

数据结构预算法--链表(单链表,双向链表)

1.链表 目录 1.链表 1.1链表的概念及结构 1.2 链表的分类 2.单链表的实现(不带哨兵位&#xff09; 2.1接口函数 2.2函数的实现 3.双向链表的实现&#xff08;带哨兵位&#xff09; 3.1接口函数 3.2函数的实现 1.1链表的概念及结构 概念&#xff1a;链表是一种物理存储结…

黑豹程序员-架构师学习路线图-百科:Knife4j API接口文档管理

文章目录 由来&#xff1a;接口文档第一代&#xff1a;Swagger第二代&#xff1a;Knife4j界面 由来&#xff1a;接口文档 古老编程是一个语言前后端通吃&#xff0c;ASP、JSP、PHP都是如此。 但随着项目规模变大&#xff0c;项目团队也开始壮大&#xff0c;岗位职责开始细分&a…

如何从零开始手写一个消息中间件(从宏观角度理解消息中间件的技术原理)

如何从零开始手写一个消息中间件&#xff08;从宏观角度理解消息中间件的技术原理&#xff09; 什么是消息中间件消息中间件的作用逐一拆解消息中间件的核心技术消息中间件核心技术总览IOBIONIOIO多路复用AIOIO多路复用详细分析selectpollepoll Java中的IO多路复用 协议序列化消…

【halcon】halcon 函数文件 以及 脚本引擎如何调用外部函数文件 上篇

前言 halcon有几种文件&#xff1a; 本地程序函数&#xff08;.hdev&#xff09;外部函数文件&#xff08;.hdvp)库函数(.hdp) 说多了容易混淆&#xff0c;今天就说&#xff0c;我觉得最有用的&#xff1a;外部函数文件&#xff08;.hdvp) 步骤 先写一段halcon脚本&#x…

Nuxt.js——基于 Vue 的服务端渲染应用框架

文章目录 前言一、知识普及什么是服务端渲染什么是客户端渲染&#xff1f;服务端渲染与客户端渲染那个更优秀&#xff1f; 二、Nuxt.js的特点Nuxt.js的适用情况&#xff1f; 三、Vue是如何实现服务端渲染的&#xff1f;安装依赖使用vue安装 Nuxt使用npm install安装依赖包使用n…

C语言——打印1000年到2000年之间的闰年

闰年&#xff1a; 1、能被4整除不能被100整除 2、能被400整除 #define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h> int main() {int year;for(year 1000; year < 2000; year){if((year%4 0) && (year%100!0) || (year%400 0)){printf("%d ",ye…

Java学习_对象

对象在计算机中的执行原理 类和对象的一些注意事项 this关键字 构造器 构造器是一种特殊的方法 : 特殊之处在于&#xff0c;名字必须与所在类的名字一样&#xff0c;而且不能写返回值类型 封装 封装的设计规范&#xff1a;合理隐藏、合理暴露 实体类 成员变量和局部变量的区别 …

vite基础学习笔记:14.路由跳转(二)携带query参数

说明&#xff1a;自学做的笔记和记录&#xff0c;如有错误请指正 1. 路由跳转&#xff08;携带query参数&#xff09; &#xff08;1&#xff09;第一层路由&#xff08;点击卡片路由跳转至新页面-携带query参数&#xff09; 知识点&#xff1a; query传参对应的是path和qu…

vscode 终端进程启动失败: shell 可执行文件“C:\Windows\System32\WindowsPower

vscode 终端进程启动失败: shell 可执行文件“C:\Windows\System32\WindowsPower 第一次用vscode&#xff0c;然后遇到这个问题&#xff0c;在设置里搜索 terminal.integrated.defaultProfile.windows 将这里的null改成"Command Prompt" 重启就可以了