我正在使用 PHP 来确定是否应在页面上设置第二个面包屑。
这是我的 PHP 代码:
<?php
$c1 = 'News';
$c1u = "crumb1.php";
if(isset($value))
{
$c2 = $value;
$c2u ="#";
}
?>
然而,即使没有设置 $value,CSS 样式的一部分似乎也会像这样显示:
我如何摆脱第一个面包屑后的矩形钻头?
这是我的CSS:
.breadcrumbs-one{
box-shadow: 0 0 2px rgba(0,0,0,.2);
overflow: hidden;
width: 100%;
margin-top:15px;
margin-left:-20px;
}
.breadcrumbs-one li{
float: left;
}
.breadcrumbs-one a{
padding: .7em 1em .7em 2em;
float: left;
text-decoration: none;
color: #000000;
position: relative;
//text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #fff;
background-image: linear-gradient(to right, #212121, #ddd);
background-image: -webkit-linear-gradient(left, #212121, #ddd);
}
.breadcrumbs-one li:first-child a{
padding-left: 1em;
border-radius: 5px 0 0 5px;
}
.breadcrumbs-one a:hover{
background: #fff;
border-radius: 5px 0 0 5px;
}
.breadcrumbs-one a::after,
.breadcrumbs-one a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
border-radius: 5px 0 0 5px;
}
.breadcrumbs-one a::after{
z-index: 2;
border-left-color: #ddd;
border-radius: 5px 0 0 5px;
}
.breadcrumbs-one a::before{
border-left-color: #ccc;
z-index: 1;
border-radius: 5px 0 0 5px;
}
.breadcrumbs-one a:hover::after{
border-left-color: #fff;
border-radius: 5px 0 0 5px;
}
.breadcrumbs-one .current,
.breadcrumbs-one .current:hover{
font-weight: bold;
background: none;
border-radius: 5px 0 0 5px;
}
.breadcrumbs-one .current::after,
.breadcrumbs-one .current::before{
content: normal;
border-radius: 5px 0 0 5px;
}
.breadcrumbs-one li:last-child a::before,
.breadcrumbs-one li:last-child a::after
{
content: normal;
border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
.breadcrumbs-one li:nth-child(3) a::after,
.breadcrumbs-one li:nth-child(3) a::before
{
content: normal;
border-radius: 5px 0 0 5px;
}
.breadcrumbs-one li:last-child a::before,
.breadcrumbs-one li:last-child a::after
{
content: normal;
font-weight: bold;
}
ul.breadcrumbs-one li:first-child a::after,
ul.breadcrumbs-one li:first-child a::before
{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
font-weight: bold;
}
更新:
这是我在头文件中用来显示面包屑的 PHP 代码:
<div class="container">
<ul class="container-fluid bottomtab breadcrumbs-one">
<?php if(isset($c1)) { ?>
<li><a href="<?php echo $c1u;?>"><span><?php echo $c1;?></span></a></li>
<?php } if(isset($c2)) { ?>
<li><a href="<?php echo $c2u;?>"><span><?php echo $c2;?></span></a></li>
<?php } if(isset($c3)) { ?>
<li><a href="<?php if(isset($c3)) {echo $c3u;}?>"><span ><?php if(isset($c3)) { echo $c3;} ?></span></a></li>
<?php } ?>
</ul>
</div>