【Web】CSS（No.27）定位经典案例（二）《顺丰导航栏》

效果图：

在这里插入图片描述

源码：

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8">
	<title>顺丰导航栏</title>
	<style>
	  * {
	  	margin:0;
	  	padding:0;
	  }

	  .box1 {
	  	width:1260px;
	  	height:472px;
	  	margin:0 auto;
	  	text-align:center;
	  	background-image: url(img/sf.png);
	  	background-repeat:no-repeat;
	  }

	  .box2 {
	  	width:960px;
	  	height:75px;
	  	padding-left:150px;
	  }

	  span {
	  	width:160px;
	  	display:inline-block;
	    background-color:black;
	    color:white;
	    text-align:center;
	    line-height:75px;
	    position: relative;
	    top:397px;
	    float:left;
	  }

	  span:hover{
	  	      background-color:white;
	  	      color:black;
	  }
	</style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">
        <span>快递查询</span>
        <span>快递查询</span>
        <span>快递查询</span>
        <span>快递查询</span>
        <span>快递查询</span>
        <span>快递查询</span>
      </div>
   </div>
  </body>
</html>

【Web】CSS（No.27）定位经典案例（二）《顺丰导航栏》

效果图：

源码：

悦读