gpt4 book ai didi

javascript - 如何使用CSS在顶部导航栏上添加后退按钮?

转载 作者:太空宇宙 更新时间:2023-11-04 06:20:47 25 4
gpt4 key购买 nike

大家好我想在顶部导航栏上添加一个后退箭头按钮,就像图像一样: enter image description here

但是我当前的代码使用 css 根本不显示背面图像。你们能帮我把可点击的后退按钮设置为可见吗?提前致谢。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>

.abcde {
-webkit-box-direction: normal
}


.abcde,
.Fresh {
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}

.abcde {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 44px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0 16px
}


.sky14 {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #262626;
display: block;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
min-width: 0;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap
}

</style>
<style>

.abcde .Fresh Mango {
background-image: url(./backArrow.png);
}


</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

function MyNavigation()
{

alert("do something here");

}

</script>
</head>

<body>

<div class="abcde" id="abcde">
<div class="Fresh Mango"><a href="javascript:MyNavigation();"><span class="cherry" aria-label="Back"></span></a></div>
<h1 class="sky14">Photo</h1>
<div class="Fresh Orange"></div>
</div>
</body>
</html>

最佳答案

Could you guys help me make the clickable back button visible ?

是的。这是一个非常快速的例子。如有任何问题,请随时提出。

(因为我无法从您的示例中获取./backArrow.png,所以我只使用了来自互联网的一个)。

.abcde {
display: flex;
align-items: center;
justify-content: space-between;
}

.sky14 {
color: #262626;
display: block;
flex-grow: 1;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}

.abcde .Fresh.Mango {
background-image: url(https://image.flaticon.com/icons/svg/8/8764.svg);
cursor: pointer;
width: 20px;
height: 20px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<script>
function MyNavigation() {
alert("do something here");
}
</script>
<div class="abcde" id="abcde">
<div class="Fresh Mango" onClick="MyNavigation();"></div>
<h1 class="sky14">Photo</h1>
<div class="Fresh Orange"></div>
</div>
</body>
</html>

关于javascript - 如何使用CSS在顶部导航栏上添加后退按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55526628/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com