📌  相关文章
📜  使用 HTML 和 CSS 创建粘性社交媒体栏(1)

📅  最后修改于: 2023-12-03 15:22:11.967000             🧑  作者: Mango

使用 HTML 和 CSS 创建粘性社交媒体栏

在现代网站设计中，社交媒体栏是一个非常流行的元素。社交媒体栏可以在网站上添加社交媒体图标和链接，以便用户可以在其他网站上找到和关注你。在这个教程里，我们将使用 HTML 和 CSS 来创建一个粘性的社交媒体栏，该栏可以自动停靠在网页的顶部或者底部。

Prerequisites

在执行下面的步骤之前，请确保你已经安装了以下工具：

创建 HTML 文件

首先，我们要创建一个 HTML 文件，该文件将包括我们的社交媒体栏。在编辑器中打开一个新文件，并将以下代码粘贴到文件中：

<!DOCTYPE html>
<html>
  <head>
    <title>Sticky Social Media Bar</title>
  </head>
  <body>
    <div class="social-media-bar">
      <ul>
        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
      </ul>
    </div>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis sodales sapien, at bibendum nisi eleifend quis. Nulla facilisi. Cras eu leo eget ante hendrerit varius eget vel enim. Phasellus a augue blandit, varius nisl non, pretium urna.</p>
  </body>
</html>

这里的 HTML 代码包括一个 div 元素，该元素包含了一些社交媒体图标以及一个 p 元素，用于显示一段样例文字。

创建 CSS 样式

要让我们的社交媒体栏粘在屏幕的顶部或者底部，我们需要使用 CSS 来设置元素的定位和样式。在编辑器中，创建一个新的文件并将以下代码粘贴到文件中：

.social-media-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  padding: 10px;
}

.social-media-bar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.social-media-bar li {
  display: inline-block;
  margin: 0 10px;
}

.social-media-bar a {
  display: block;
  background-color: #fff;
  border-radius: 50%;
  color: #222;
  font-size: 18px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
  transition: all 0.2s ease-in-out;
}

.social-media-bar a:hover {
  transform: scale(1.2);
}

这里的 CSS 包括了一个 social-media-bar 类，用于定义我们的社交媒体栏的样式。其中，position: fixed 用于将元素的位置固定在屏幕上。bottom: 0 和 left: 0 将元素停靠在屏幕底部和左侧。width: 100% 将元素宽度设置为屏幕的宽度，background-color 设置背景颜色，border-top 添加了一个上边框，padding 用于设置内容的内边距。

此外，我们还定义了 ul、li 和 a 的样式。ul 元素用于包含我们的社交媒体图标列表，li 用于定义每个图标的样式，a 用于定义超链接的样式。我们使用了 display: inline-block 将 li 元素的显示方式设置为同一行内显示，margin 用于设置元素之间的间距，background-color 设置背景颜色，border-radius 设置圆角，color 设置文字颜色，font-size 设置文字大小，height 和 width 设置元素的尺寸，line-height 设置行高，text-align 将文字对齐方式设置为居中，transition 定义了动画效果。

最后，我们还定义了一个 :hover 快捷方式，该快捷方式将在鼠标悬停于元素上时提供一个放大效果。

添加字体和图标

为了让社交媒体栏显示图标，我们需要添加一个字体和一些图标。Font Awesome 提供了一个很好的图标集，它可以通过 CDN 来获取。

在 HTML 文件的 head 部分中添加以下代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

这里的代码将在我们的 HTML 文件中添加 Font Awesome 的 CSS 样式表。现在我们可以在 HTML 文件中使用 Font Awesome 的图标。

运行社交媒体栏

现在我们已经创建了 HTML 文件、CSS 样式并且添加了字体和图标，我们可以在浏览器中运行我们的社交媒体栏了。在编辑器中打开 HTML 文件，右键单击并选择 “在浏览器中打开”，这将会在浏览器中打开我们的社交媒体栏。

如果一切顺利，你应该可以看到如下图所示的效果：

sticky-social-media-bar-example.gif

总结

在过去的几年里，社交媒体成为了网站设计中非常重要的元素。在本文中，我们使用 HTML 和 CSS 创建了一个粘性的社交媒体栏，该栏可以自动停靠在网页的顶部或者底部。我们还介绍了如何使用 Font Awesome 添加图标和字体。希望这篇文章能够对你有所帮助！