共享博客如何使用 CSS 将两个箭头图像（upvote/downvote）存储在彼此之上？
网站的布局是一个重要的组成部分。通过促进用户参与，它提高了网站的视觉标准和整体质量。虽然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如何让导航栏变透明
在css中，可以通过opacity属性来让导航栏变透明，只需要给导航栏元素添加“opacity: 透明度值;”样式即可；...
CSS
3个月前 (09-20) 206 -
css 怎么去除a标签的手形
css去除a标签的手形的方法：1、创建一个html示例文件；2、设置一个a标签；3、给a标签添加一个css属性为“cur...
CSS
3个月前 (09-20) 156 -
css里怎样设置字体大小和字体颜色
在css中，可以使用“font-size”和color属性设置字体大小和字体颜色，只需要给字体元素添加“{font-si...
CSS
3个月前 (09-20) 175 -
css如何固定导航栏
在css中，可以使用position属性固定导航栏；只需要给导航栏元素添加“position: fixed;”样式进行固...
CSS
3个月前 (09-20) 143 -
css边框变圆角边框怎么写
写法：1、给边框添加“border-radius:圆角值;”样式统一设置圆角大小；2、添加“border-top-lef...
CSS
3个月前 (09-20) 137