SVG图片与网站导航的高亮设置

2023-10-17 19:13:37

SVG图片是什么？

SVG（可缩放矢量图形）是一种基于XML的图像格式。它使用文本来图像，因此可以被无限放大而不会失真。SVG图像通常比其他格式的图像文件更小，并且可以被编辑和重新着色。

如何在网站上使用SVG图片？

要将SVG图片添加到你的网站，你可以使用以下步骤：

将SVG图片保存到你的计算机上。
使用文本编辑器或代码编辑器打开你的HTML文件。
在你要放置SVG图片的位置添加以下代码：

<img src="path/to/image.svg" alt="Image description">

其中，path/to/image.svg是SVG图片的路径，alt属性是SVG图片的替代文本。

如何设置高亮当前菜单项？

要设置高亮当前菜单项，你可以使用以下步骤：

在你的HTML文件中添加以下代码：

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

在你的CSS文件中添加以下代码：

#menu li a {
  color: #000;
  text-decoration: none;
}

#menu li a:hover {
  color: #fff;
  background-color: #000;
}

#menu li.current-menu-item a {
  color: #fff;
  background-color: #000;
}

其中，#menu是菜单的ID，#menu li a是菜单项的链接，#menu li a:hover是当鼠标悬停在菜单项上时的样式，#menu li.current-menu-item a是当前菜单项的样式。

代码演示

以下是一个代码演示，展示了如何使用SVG图片和设置高亮当前菜单项：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </nav>
  </header>
  <main>
    <section>
      <h1>Welcome to My Website</h1>
      <p>This is a simple website that I created to showcase how to use SVG images and set highligh the current menu item.</p>
    </section>
  </main>
  <footer>
    <p>Copyright &copy; 2023 My Website</p>
  </footer>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #000;
  color: #fff;
  padding: 20px;
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav li a {
  color: #fff;
  text-decoration: none;
}

nav li a:hover {
  color: #000;
  background-color: #fff;
}

nav li.current-menu-item a {
  color: #fff;
  background-color: #000;
}

main {
  margin-top: 20px;
}

section {
  padding: 20px;
}

h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

footer {
  background-color: #000;
  color: #fff;
  padding: 20px;
}