我在 php 中有一个代码来显示它像这样输出的面包屑
我找到了php代码
输出的链接
<div id="crumbs"><a href="http://localhost">Home</a> » <a href="http://localhost/about/">About The Tests</a> » <span class="current">Page Image Alignment</span></div>
它看起来像这样
#crumbs a,
#crumbs span {
border-radius: 0px 10px 10px 0px;
box-shadow: -3px 2px 18px -3px #000;
background: #4489ff;
width: max-content;
display: inline-block;
color: white;
font-size: 17px;
padding: 6px;
font-weight: bolder;
margin-left: -1px;
margin-top: 1rem;
text-decoration: none;
}
#crumbs span.current{
background: #eef5ff !important;
color: black !important;
}
<center>
<!-- Do Not use <center> tag ! !-->
<div id="crumbs"><a href="http://localhost">Home</a> <a href="http://localhost/about/">About The Tests</a> <span class="current">Page Image Alignment</span></div>
<!-- Do Not use </center> tag ! !-->
</center>
我想把面包屑做成一条线,像这样。我已经完成了 90%,但我不知道如何像图像一样显示框阴影
请告诉如何。感谢您的帮助!
编辑:我删除了绝对定位方法,将其居中并使其响应。
.crumbswrapper {text-align: center;}
#crumbs {
text-align: left;
display: inline-block;
font-family: roboto;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 12px;
}
.innerwrap {
display: inline-block;
background:#4489ff;
padding-right: 10px;
margin: 0 0 0 -5px;
}
.innerwrap:last-child {
background: none;
}
.innerwrap:nth-last-child(2) {
background: #eef5ff;
}
#crumbs a, #crumbs span {
background:#4489ff;
border-radius: 0 20px 20px 0;
box-shadow: 5px 0 10px -4px #444;
color: white;
padding: 10px 25px 10px 20px;
text-decoration: none;
white-space: nowrap;
line-height: 34px;
}
.innerwrap:nth-last-child(2) a {
box-shadow: none!important;
}
#crumbs span.current{
background: #eef5ff !important;
box-shadow: none!important;
white-space: nowrap;
color: #4489ff!important;
}
<div class="crumbswrapper">
<div id="crumbs">
<div class="innerwrap"><a href="http://localhost">Home</a></div>
<div class="innerwrap"><a href="http://localhost/about/">About The Tests</a></div>
<div class="innerwrap"><span class="current">Page Image Alignment</span></div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句