html菜单的基本制作

news2024/11/16 9:25:22

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

<!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.coloradmin.cn/o/1201152.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

GetSimple CMS忘记密码

GetSimple CMS是一个超简单的 CMS&#xff0c;适合建立个人网站等只需要极少数页面的网站。在站上百科上&#xff0c;是这么说的&#xff1a; GetSimple是一款基于XML存储数据的开源内容管理系统&#xff0c;且易于安装和定制&#xff0c;无需MySQL支持。提供撤销保护和备份功能…

RK3399平台开发系列讲解(应用篇)文件属性 stat 函数

🚀返回专栏总目录 文章目录 一、struct stat 结构体二、st_mode 变量三、struct timespec 结构体沉淀、分享、成长,让自己和他人都能有所收获!😄 📢Linux 下可以使用 stat 命令查看文件的属性,其实这个命令内部就是通过调用 stat()函数来获取文件属性的,stat 函数是 …

详解Java:抽象类和接口

前言&#xff1a;在前文中我们学习认知到了多态的使用和相关知识&#xff0c;算是打开了Java世界的大门&#xff0c;而本次要分享的抽象类和接口则是我们在面向对象编程中最常用的编程结构之一 目录 一.抽象类 abstract 抽象类特性 二.接口 语法规则 接口使用 接口特…

[笔记]深入解析Windows操作系统《番外》windows关键进程解释

文章目录 前言一、Linux起源与发展二、什么是shell1.什么是Shell 总结 前言 一、Linux起源与发展 二、什么是shell 1.什么是Shell 总结 以上就是今天要讲的内容&#xff0c;本文仅仅简单介绍了linux命令行的使用。 参考&#xff1a; shells 概念 centOS7中的几个Ctrl组合…

原型模式 rust和java的实现

文章目录 原型模式介绍优点缺点使用场景 实现java 实现rust 实现 rust代码仓库 原型模式 原型模式&#xff08;Prototype Pattern&#xff09;是用于创建重复的对象&#xff0c;同时又能保证性能。 这种模式是实现了一个原型接口&#xff0c;该接口用于创建当前对象的克隆。当…

Spring-ProxyFactory

ProxyFactory选择cglib或jdk动态代理原理 ProxyFactory在生成代理对象之前需要决定是使用JDK动态代理还是CGLIB技术&#xff1a; public class DefaultAopProxyFactory implements AopProxyFactory, Serializable {Overridepublic AopProxy createAopProxy(AdvisedSupport co…

59基于matlab的爬行动物搜索算法(Reptile search algorithm, RSA)

基于matlab的爬行动物搜索算法&#xff08;Reptile search algorithm, RSA&#xff09;一种新型智能优化算法。该算法主要模拟鳄鱼的捕食行为&#xff0c;来实现寻优求解&#xff0c;具有收敛速度快&#xff0c;寻优能力强的特点。程序已调通&#xff0c;可直接运行。 59matlab…

案例续集留言板

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

Centos, RockyLinux 常用软件安装汇总

一、基本指令&#xff1a; 命令作用clear清屏pwd显示当前路径cat / more显示文本文档uname -a查看当前版本hostnamectl查看当前版本cat /etc/redhat-release查看当前版本free查看剩余内存df -h[查看磁盘剩余空间]du -sh 查看文件夹名"dir"占用的空间lsof -i:8080查看…

未来的拥塞控制与 Linux EEVDF 调度器

有破要有立。 前面提到 经典端到端拥塞控制将越来越失效&#xff0c;未来该如何&#xff0c;谈谈我的看法。 端到端拥塞控制的难点根本上是要解决公平性问题&#xff0c;顺带着提高资源利用率。我们很容易理解&#xff0c;在共享资源场景下&#xff0c;不公平一定是低效的&am…

在AutoDL云环境上训练Stable Diffusion Lora模型

AutoDL官网&#xff1a; AutoDL算力云 | 弹性、好用、省钱。租GPU就上AutoDLAutoDL为您提供专业的GPU租用服务&#xff0c;秒级计费、稳定好用&#xff0c;高规格机房&#xff0c;7x24小时服务。更有算法复现社区&#xff0c;一键复现算法。https://www.autodl.com/ 新建实例…

优酷网页截图黑屏及了解浏览器图形服务API-meethigher

一、背景 周六跟同事逛了上海的豫园、城隍庙、静安寺、静安公园。豫园门票40&#xff0c;相传是明代私人园林&#xff0c;园主人为当年的四川布政使&#xff0c;是江南风格古典园林&#xff0c;风景还不错。 周日天气降温&#xff0c;直接睡了一天&#xff0c;想起同事推荐的《…

springboot项目使用Swagger3

一、Swagger介绍 号称世界上最流行的Api框架&#xff1b;Restful Api 文档在线自动生成工具>Api文档与API定义同步更新直接运行&#xff0c;可以在在线测试API 接口支持多种语言&#xff1a;&#xff08;java&#xff0c;Php…&#xff09; 二、Swagger3 准备工作 1、在p…

【文件IO】

文章目录 File常见方法和属性属性构造方法方法 InputStream方法FileInputStream OutputStream利用 OutputStreamWriter 进行字符写入 总结按字节读取数据按字节写入数据按字符读取数据按字符写入数据 File常见方法和属性 属性 修饰符及类型属性说明static StringpathSeparato…

JavaScript从入门到精通系列第三十五篇:JavaScript中的DOM简介

文章目录 前言 1&#xff1a;对象分类 2&#xff1a;宿主对象 一&#xff1a;DOM 1&#xff1a;dom简介 2&#xff1a;Dom概念图示 二&#xff1a;节点 1&#xff1a;节点概述 2&#xff1a;常用节点分类 3&#xff1a;节点模型示意图 4&#xff1a;节点属性 5&…

Java 之 IO/NIO/OKIO

BIO blocking io AIO Asynchronous IO 从内存读取到写入--输出 从外部到内存 -- 输入 OutputStream //文件不存在则自动创建 try {OutputStream outputStream new FileOutputStream("text.txt");outputStream.write(a);outputStream.write(b);} catch (IOExcep…

若依Linux与Docker集群部署

若依Linux集群部署 1. 若依2.MYSQL Linux环境安装2.1 MYSQL数据库部署和安装2.2 解压MYSQL安装包2.3 创建MYSQL⽤户和⽤户组2.4 修改MYSQL⽬录的归属⽤户2.5 准备MYSQL的配置⽂件2.6 正式开始安装MYSQL2.7 复制启动脚本到资源⽬录2.8 设置MYSQL系统服务并开启⾃启2.9 启动MYSQL…

终止进程后,GPU显存仍被占用问题 | kill -9彻底杀死进程 | ps aux|grep python

本文部分内容参考博客&#xff0c;十分感谢&#xff01;&#xff01;&#xff01; 问题描述&#xff1a;在Linux终端把进程终止后&#xff0c;发现显存没有被释放出来&#xff01; ---------------------------------------------------------------------------------------F…

Git分支与Git标签的介绍及其场景应用

目录 一、Git分支 1.1 定义 1.2 基本概念 1.3 特点与优势 1.4 Git分支操作命令 1.4.1 查看分支 1.4.2 创建分支 1.4.3 删除分支 1.4.4 切换分支 1.4.5 创建并切换到新建分支 1.5 场景应用 1.5.1 前期准备 1.5.2 具体操作 二、Git标签 2.1 定义 2.2 类型 2.3 标…