CSS3 圆形风格面包屑代码详解

2019-09-12 郑州网站建设  

<meta charset="utf-8">

<title>CSS3圆形风格面包屑导航</title>

<link rel="stylesheet" type="text/css" href=http://www.divcss5.com/css3-style/"http:/css.h5course.cn/reset.css" />

<style type="text/css">

html, body {

height: 100%;

padding: 0 100px;

background-color: #59a386;

}

.title {

padding: 50px 0;

color: #77c2a5;

font-size: 25px;

font-weight: bold;

}

ul.breadcrumb {

display: inline-block;

margin-left: 50px;

}

/*实现每个导航项的基本样式*/

ul.breadcrumb li {

float: right;

padding: 5px;

margin: 3px 0 0 -50px;

background-color: #59a386;

border-radius: 50px;

transition: all 0.2s linear 0s;

}

ul.breadcrumb li a {

display: block;

overflow: hidden;

min-width: 50px;

width: 50px;

height: 50px;

padding: 0 33.33px 0 52px;

color: #509378;

background-color: #65ba99;

text-align: center;

line-height: 50px;

border-radius: 50px;

transition: all 0.2s linear 0s;

box-sizing: border-box;

}

/*控制每个导航项中文本的出现*/

ul.breadcrumb li a .text {

display: none;

opacity: 0;

}

ul.breadcrumb li a:hover {

width: 150px;

background-color: #77c2a5;

}

ul.breadcrumb li a:hover .text {

display: inline-block;

opacity: 1;

}

/*处理第一个导航项*/

ul.breadcrumb li:last-child a {

padding: 0;

}

ul.breadcrumb li:last-child:hover {

padding: 3px;

margin-top: 0;

}

ul.breadcrumb li:last-child:hover a {

width: 60px;

height: 60px;

line-height: 60px;

}

</style>

</head>

<body>

<h1 class="title">CSS3圆形风格面包屑导航</h1>

<ul class="breadcrumb">

<li>

<a href="#">

<span class="text icon-file">手机端</span>

</a>

</li>

<li>

<a href="#">

<span class="text icon-folder-open">JS</span>

</a>

</li>

<li>

<a href="#">

<span class="text icon-code">CSS3</span>

</a>

</li>

<li>

<a href="#">

<span class="text icon-beaker">HTML5</span>

</a>

</li>

<li>

<a href="#">

<span class="icon icon-home">HOME</span>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2024.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • HTML
  • meta
  • head
  • η
  • м
  • charse