数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用HTML和CSS创建带有不同社交媒体句柄的分享按钮？
要使用HTML和CSS创建带有不同社交媒体句柄的分享按钮，我们将使用基本的CSS属性和HTML标签。在本文中，我们将逐步了解如何创建带有不同社交媒体句柄的分享按钮。
在本文中，我们有六个HTML按钮，我们的任务是使用HTML和CSS创建带有不同社交媒体句柄的分享按钮。我们将创建**Facebook**、**Twitter**、**Reddit**、**Pinterest**、**Linkedin**和**Whatsapp**的分享按钮。
创建带有不同社交媒体句柄的分享按钮的步骤
要使用HTML和CSS创建带有不同社交媒体句柄的分享按钮，我们将按照以下步骤进行，并提供逐步说明和示例代码。
使用HTML创建分享按钮
我们已实现以下步骤来使用HTML创建分享按钮
- 我们使用了div容器将所有分享按钮组合在一起。
- 我们使用了HTMLbutton标签创建了六个分享按钮，类名为**buttons**，并分别带有社交媒体句柄名称。
- 每个按钮都包含一个<i>元素，类名为**fab**，代表**Font Awesome图标**和特定的图标名称，例如fa-facebook-f。
- 在HTML的head部分，我们使用了script标签，它加载Font Awesome图标库。
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/704ff50790.js"
crossorigin="anonymous"></script>
</head>
<body>
<h3>
Creating a Share Button with different
Social Handles using HTML and CSS
</h3>
<p>
This example creates a share button with
different social handles using HTML and
CSS which shares current page address.
</p>
<div class="container">
<button class="buttons facebook">
<i class="fab fa-facebook-f"></i>
</button>
<button class="buttons twitter">
<i class="fab fa-twitter"></i>
</button>
<button class="buttons linkedin">
<i class="fab fa-linkedin-in"></i>
</button>
<button class="buttons pinterest">
<i class="fab fa-pinterest"></i>
</button>
<button class="buttons reddit">
<i class="fab fa-reddit-alien"></i>
</button>
<button class="buttons whatsapp">
<i class="fab fa-whatsapp"></i>
</button>
</div>
</body>
</html>
使用CSS设计分享按钮
我们已实现以下步骤来使用CSS设计分享按钮
- 我们使用了**container**类，使用CSSdisplay属性、CSS**gap**属性和margin-top属性将按钮水平排列，按钮之间间隔10像素，顶部边距为2%。
- 然后，我们使用**buttons**类为所有按钮应用通用样式，例如border、border-radius(圆角边框)、color(徽标颜色)、cursor(将光标更改为指针)、font-size(设置徽标大小)和padding。
- 然后，我们使用社交媒体句柄名称作为类名，为每个按钮定义特定的background-color和边框，对应于各自的社交媒体平台。
- 然后，我们使用hover伪类来定义悬停时的特定背景颜色和徽标颜色。
.container {
display: flex;
gap: 10px;
margin-top: 2%;
}
.buttons {
border: none;
border-radius: 10px;
color: #fff;
cursor: pointer;
font-size: 24px;
padding: 16px 24px;
}
.facebook {
background-color: #3b5998;
border: 1px solid #3b5998;
}
.facebook:hover {
background-color: white;
color: #3b5998;
}
.twitter {
background-color: #1da1f2;
border: 1px solid #1da1f2;
}
.twitter:hover {
background-color: white;
color: #1da1f2;
}
.linkedin {
background-color: #0077b5;
border: 1px solid #0077b5;
}
.linkedin:hover {
background-color: white;
color: #0077b5;
}
.pinterest {
background-color: #bd081c;
border: 1px solid #bd081c;
}
.pinterest:hover {
background-color: white;
color: #bd081c;
}
.reddit {
background-color: #ff4500;
border: 1px solid #ff4500;
}
.reddit:hover {
background-color: white;
color: #ff4500;
}
.whatsapp {
background-color: #25d366;
border: 1px solid #25d366;
}
.whatsapp:hover {
background-color: white;
color: #25d366;
}
完整的示例代码
以下是实现上述步骤的完整示例代码，使用HTML和CSS创建带有不同社交媒体句柄的分享按钮。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 10px;
margin-top: 2%;
}
.buttons {
border: none;
border-radius: 10px;
color: #fff;
cursor: pointer;
font-size: 24px;
padding: 16px 24px;
}
.facebook {
background-color: #3b5998;
border: 1px solid #3b5998;
}
.facebook:hover {
background-color: white;
color: #3b5998;
}
.twitter {
background-color: #1da1f2;
border: 1px solid #1da1f2;
}
.twitter:hover {
background-color: white;
color: #1da1f2;
}
.linkedin {
background-color: #0077b5;
border: 1px solid #0077b5;
}
.linkedin:hover {
background-color: white;
color: #0077b5;
}
.pinterest {
background-color: #bd081c;
border: 1px solid #bd081c;
}
.pinterest:hover {
background-color: white;
color: #bd081c;
}
.reddit {
background-color: #ff4500;
border: 1px solid #ff4500;
}
.reddit:hover {
background-color: white;
color: #ff4500;
}
.whatsapp {
background-color: #25d366;
border: 1px solid #25d366;
}
.whatsapp:hover {
background-color: white;
color: #25d366;
}
</style>
<script src="https://kit.fontawesome.com/704ff50790.js"
crossorigin="anonymous"></script>
</head>
<body>
<h3>
Creating a Share Button with different
Social Handles using HTML and CSS
</h3>
<p>
This example creates a share button with
different social handles using HTML and
CSS which shares current page address.
</p>
<div class="container">
<button class="buttons facebook">
<i class="fab fa-facebook-f"></i>
</button>
<button class="buttons twitter">
<i class="fab fa-twitter"></i>
</button>
<button class="buttons linkedin">
<i class="fab fa-linkedin-in"></i>
</button>
<button class="buttons pinterest">
<i class="fab fa-pinterest"></i>
</button>
<button class="buttons reddit">
<i class="fab fa-reddit-alien"></i>
</button>
<button class="buttons whatsapp">
<i class="fab fa-whatsapp"></i>
</button>
</div>
</body>
</html>
结论
在本文中，为了使用HTML和CSS创建带有不同社交媒体句柄的分享按钮，我们使用了基本的CSS属性，例如**border**、**background-color**等，以及用于社交媒体句柄按钮的**Font Awesome**图标。
更新于：2024年9月19日
10K+ 次浏览
广告