資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 CSS 將兩張箭頭影像（點贊/點踩）疊加在一起？
網站佈局是一個必不可少的組成部分。它透過提升使用者參與度，提高了網站的視覺標準和整體質量。雖然 CSS 並非網站開發的嚴格必要條件，但樣式很重要，因為沒有使用者希望與一個普通而無吸引力的網站互動。
在構建網站時，您可能會認為圖片是“錦上添花”的功能，除了看起來漂亮之外沒有其他用途。但是，網站上的圖形的作用遠不止於建立美麗的圖片。
影像為您的網頁增添了美感。使用影像進行 SEO 的優勢很多。CSS 使我們能夠設定這些影像的樣式和位置，從而創造出極佳的視覺效果。在本文中，我們將討論如何使用 CSS 將箭頭影像（點贊/點踩）疊加在一起。
首先，讓我們看看如何在 HTML 頁面中新增箭頭影像。
新增箭頭影像
要新增箭頭影像，我們將使用<img>標籤。
示例
<!DOCTYPE html> <html> <head> <title> Adding arrow images </title> </head> <body> <img src= "https://cdn-icons-png.flaticon.com/512/16/16287.png" alt= "up arrow"> <img src= "https://cdn-icons-png.flaticon.com/512/608/608258.png" alt= "down arrow"> </body> </html>
在上面的示例中，我們顯示了兩張箭頭影像——點贊和點踩。
示例
在下面的示例中，我們將兩張箭頭影像（點贊/點踩）疊加在一起
<!DOCTYPE html>
<html>
<head>
<title> Arrow Images </title>
<style>
h1{
color: green;
text-decoration: underline;
}
img{
width: 150px;
margin-left: 20px;
height: 100px;
margin-bottom: 30px;
}
.demo{
float: left;
clear: left;
}
.demo img{
display: block;
float: none;
clear: both;
}
</style>
</head>
<body>
<h1> Up and Down arrow images </h1>
<div class= "demo">
<img src= "https://cdn-icons-png.flaticon.com/512/16/16287.png" alt= "up arrow">
<img src= "https://cdn-icons-png.flaticon.com/512/608/608258.png" alt= "down arrow">
</div>
</body>
</html>
使用的屬性
在這個示例中，我們使用 CSS 指定了影像的高度和寬度。為了將這些影像疊加在一起，我們使用了以下 CSS 屬性：
display 屬性
CSS 的此屬性允許開發者指定元素的顯示行為型別。簡單來說，它允許您確定元素的容器型別。
語法
element{
display: value;
}
示例
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: green;
text-decoration: underline;
}
.p1{
display: block;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p class= "p1">This is an example</p>
</div>
</body>
</html>
float 屬性
CSS 的此屬性使開發人員能夠指定元素將浮動到哪一側。具有position: absolute的元素會忽略 float 屬性。其值可以是left、right或none。
語法
element{
float: value;
}
示例
<!DOCTYPE html>
<html>
<head>
<title> Float </title>
<style>
h1{
color: green;
text-decoration: underline;
}
#img1{
float: left;
}
</style>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<body>
<div>
<p>Left or right side of the container. <i class= "far fa-clock" id= "img1"></i> </p>
</div>
</body>
</html>
clear 屬性
位於浮動元素旁邊的元素會圍繞它流動。為了解決這個問題，CSS 有一個clear屬性。其值可以是none、left、right、both、initial和inherit。
語法
element{
clear: value;
}
結論
在本文中，我們學習瞭如何在 HTML 文件中顯示箭頭（點贊和點踩）影像。此外，我們還討論瞭如何使用 CSS 的display、float和clear屬性將它們疊加在一起。
更新於：2023年2月20日
144 次瀏覽
廣告