“无依赖绝对定位”与导航图标定位实例页面

展示

代码

• HTML：

  <div class="nav">
      <h4 class="nav-list">
          <a href class="nav-a">普通导航</a>
      </h4>
      <h4 class="nav-list">
          <a href class="nav-a">
              热门导航<i class="icon-hot"></i>
          </a>
      </h4>
      <h4 class="nav-list">
          <a href class="nav-a">
              新导航<i class="icon-new"></i>
          </a>
      </h4>
  </div>

• CSS：

  .nav {
      display: table;
      table-layout: fixed;
      width: 100%;
      max-width: 600px;
      margin: 1em auto; 
      background-color: #333;
      text-align: center;
  }
  .nav-list { 
      display: table-cell;
      font-weight: 400;
  }
  .nav-a { 
      display: block; 
      line-height: 20px; 
      padding: 20px; 
      color: #bbb; 
      text-decoration: none; 
  }
  .nav-a:hover { 
      color: #fff; 
  }
  
  .icon-hot { 
      position: absolute; 
      width: 28px; height: 11px; 
      margin: -6px 0 0 2px; 
      background: url(hot.gif);
  }
  .icon-new { 
      position: absolute; 
      width: 12px; height: 13px; 
      margin: -6px 0 0 2px; 
      background: url(new.png) no-repeat center;
  }