数据结构
网络
关系数据库管理系统 (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 次浏览
广告