Home >Web Front-end >CSS Tutorial >What does it look like to implement breadcrumb style using only css code without using a background image?
What does it look like to implement breadcrumb style using only css code without using a background image?
- PHPzforward
- 2016-05-16 12:05:112100browse
no background image is used, only css code is used to implement the breadcrumb style. it has certain reference value. friends in need can refer to it. i hope it will be helpful to everyone! ! !
use the css boder attribute to cleverly implement arrows. the html code is as follows:
<ul class="breadcrumb"> <li><a href="">首页<span class="arrow"></span></a></li> <li><a href="" class="old">关于我们<span class="arrow"></span></a></li> <li><a href="">联系我们<span class="arrow"></span></a></li> <li><a href="" class="old">在线留言<span class="arrow"></span></a></li> <li><a href="">首页</a></li> </ul>
css the code is as follows:
<style type="text/css">
* {
margin:0;
padding:0;
}
.breadCrumb {
width:600px;
height:30px;
background:#cccccc;
list-style:none;
line-height:30px;
}
.breadCrumb li {
float:left;
}
.breadCrumb a {
text-decoration:none;
padding:0 20px 0 10px;
position:relative;
float:left;
}
.breadCrumb a span {
position: absolute;
display: block;
line-height: 0px;
height: 0px;
width: 0px;
right: 0px;
top: 0px;
border-left: 10px solid #CCCCCC;
border-top: 15px solid #e9e9e9;
border-bottom: 15px solid #e9e9e9;
}
.breadCrumb a.old {
background:#e9e9e9;
}
.breadCrumb a.old span {
border-left: 10px solid #e9e9e9;
border-right: none;
border-top: 15px solid #cccccc;
border-bottom: 15px solid #cccccc;
}recommended learning: "php video tutorial》
Statement：
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete