網站的布局是一個重要的組成部分。通過促進用戶參與，它提高了網站的視覺標準和整體質量。雖然CSS在網站開發中并不是必需的，但樣式很重要，因為沒有用戶愿意與一個平淡無味的網站進行交互。
當您構建網站時，您可能會認為照片是一項“最好有”的功能，除了看起來漂亮之外沒有任何用處。然而，網站上的圖形不僅僅只是創造一幅可愛的圖片。
圖像為您的網頁提供美觀的外觀。使用照片進行 SEO 的優點很多。 CSS 使我們能夠對這些圖像進行樣式設置和定位，從而創造出奇妙的視覺效果。在本文中，我們將討論如何使用 CSS 將箭頭圖像（贊成/反對）疊加在一起。
首先，讓我們看看如何在HTML頁面中添加箭頭圖像。
添加箭頭圖像
要添加箭頭圖像，我們將使用標簽。
示例
<!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>
登錄后復制
在上面的示例中，我們顯示了兩個箭頭圖像 – upvote 和 downvote。
示例
在下面的示例中，我們將兩個箭頭圖像（上投票/下投票）疊放在一起
<!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 屬性 –
顯示屬性
這個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>
登錄后復制
浮動屬性
這個CSS屬性使開發人員能夠指定元素將在哪一側浮動。具有position: absolute的元素會忽略浮動屬性。它的值可以是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>
登錄后復制
清晰的屬性
浮動元素旁邊的元素遵循其周圍的流動。為了解決這個問題，CSS 中有 clear 屬性。它的值可以是無、左、右、兩者、初始和繼承。
語法
element{
clear: value;
}
登錄后復制
結論
在本文中，我們了解了如何在 HTML 文檔中顯示箭頭（贊成票和反對票）圖像。此外，我們還討論了如何使用 CSS display、float 和 clear 屬性將它們堆疊在一起。
以上就是如何使用 CSS 將兩個箭頭圖像（upvote/downvote）存儲在彼此之上？的詳細內容，更多請關注www.92cms.cn其它相關文章！
