console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
   
    nav {
      display: flex;
      justify-content: space-around;
      background-color: gray;
    }

    nav a {
      color:pink;
      text-decoration: none;
      padding: 14px 20px;
      font-size: 20px;
    }

    nav a:hover {
      background-color: bule;
    }
  </style>
  <title>导航栏</title>
</head>

<body>
  <nav>
    <a href="#">Flash特效</a>
    <a href="#">JavaScript特效</a>
    <a href="#">jQuery特效</a>
    <a href="#">首页</a>
  </nav>
</body>

</html>

/* 重置所有ul的默认外边距和内边距 */
ul {
	margin: 0px;
	padding: 0px;
}

/* 为ul下的li设置样式，移除列表项前的符号，并设置高度、宽度、字体等 */
ul li {
	height: 30px;
	width: 115px;
	list-style: none; /* 移除列表项前的符号 */
	float: right; /* 将列表项浮动到左边，实现水平排列 */
	font: 0.9em Arial, Helvetica, sans-serif; /* 设置字体样式 */
	text-align: center; /* 文本居中 */
}

/* 为ul li下的a标签设置样式，包括颜色、宽度、背景、边框等 */
ul li a {
	color: #FAFAFA; /* 文字颜色为白色 */
	width: 113px; /* 宽度稍微小于li的宽度，为边框留出空间 */
	margin: 0px;
	padding: 0px 0px 0px 8px; /* 左内边距为8px，为文字留出空间 */
	text-decoration: none; /* 无下划线 */
	display: block; /* 将a标签显示为块级元素，填满整个li */
	background: #808080; /* 背景颜色 */
	line-height: 29px; /* 行高与li的高度一致 */
	border-right: 1px solid #ccc; /* 右边边框 */
	border-bottom: 1px solid #ccc; /* 底部边框 */
}

/* 设置二级菜单li的样式，调整高度和背景 */
ul li ul li {
	height: 25px;
}

/* 设置二级菜单a标签的样式，调整背景和行高 */
ul li ul li a {
	background: #666; /* 背景颜色较深 */
	line-height: 24px; /* 行高稍微小于li的高度 */
}

/* 设置鼠标悬停在a标签上时的样式，改变背景颜色和边框样式 */
ul li a:hover {
	background: #666; /* 背景颜色 */
	border-bottom: 1px dashed #FF0000; /* 底部边框为红色虚线 */
}

/* 设置二级菜单默认不可见 */
ul li ul {
	visibility: hidden; /* 默认情况下二级菜单不可见 */
	/* display:none; */ /* 另一种隐藏方式，注释掉 */
}

/* 当鼠标悬停在li上时，显示二级菜单 */
ul li:hover ul {
	visibility: visible; /* 显示二级菜单 */
	/* display:block; */ /* 另一种显示方式，注释掉 */
}

/* 设置鼠标悬停在二级菜单的a标签上时的样式，改变背景颜色 */
ul li ul li a:hover {
	background: #666; /* 背景颜色更深 */
}