資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
廣告