html菜单的基本制作

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


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>里面的内容；则显示如下；

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

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

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

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

基本菜单效果如下；

相关阅读:
Multivariate Time-series Anomaly Detection viaGraph Attention Network
ts知识点——基础积累
力扣113题引发的关于DFS和回溯的一点思考
驱动挂载物理页代码示例
AtCoder ABC 138
贝加莱软件功能测试
37 深度学习（一）：查看自己显卡的指令|张量|验证集|分类问题|回归问题
前沿对话：聚焦元宇宙，数字营销都能玩什么丨温州元宇宙月
nodejs+vue大学生招聘网站应聘系统设计与实现5b14b
Install and configure iftop

原文地址：https://blog.csdn.net/bcbobo21cn/article/details/134368700