CSS 如何将两个箭头图像(upvote/ downvote)放在彼此的上面
一个网站的布局是一个重要的组成部分。它通过促进用户参与,提高了网站的视觉标准和整体质量。虽然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>
在上面的例子中,我们显示了两个箭头图像– upvote和downvote。
例子
在下面的例子中,我们将两个箭头图像(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属性
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属性。它的值可以是 左、右 或 无
语法
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的 清除 属性。它的值可以是 none, left, right, both, initial 和inherit
语法
element{
clear: value;
}
总结
在这篇文章中,我们学习了如何在HTML文档中显示箭头(上升和下降)图像。此外,我们还讨论了如何使用CSS的display, float 和clear 属性将它们叠加在一起。