HTML 首页倒三角形导航块

2023-11-08 20:24•html•阅读 1583

HTML 首页倒三角形导航块

制作效果：

制作模型：

/*公共类*/
.w {
    /*版心 提取 */
    width: 1210px;
    margin: 0 auto;
}
/*这里已经居中体现*/
.fl {
    float: left
}

.fr {
    float: right
}

.al {
    text-align: left
}

.ac {
    text-align: center
}

.ar {
    text-align: right
}

.hide {
    display: none
}
.site-nav{
    height: 30px;
    line-height: 30px;
    background: #f1f1f1;
}
.site-nav-send{
    position:relative;
    padding:0 25px 0 10px;
    /*background:red;*/
}
.site-nav-send:hover{
    background-color: #fff;
}
.site-nav-send i{
    position: absolute;
    top:12px;
    right:8px;
    width: 15px;
    height: 7px;
    overflow:hidden;                      //多余部分隐藏         
    /*background: yellow;*/
}
.site-nav-send  s{

    font:400  13px/15px "consolas";
    position:absolute;                          //第二种办法：  不使用TOP ，display:block ; margin-top:-7px;
    top:-8px;

}

    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="icon" href="favicon.ico">
</head>
<body>
<div class="site-nav">
  <div class="w">
      <div class="fl">
         <div class="site-nav-send">
             送至：北京
             <i><s>◇</s></i>
         </div>
      </div>
          <div class="fr">
              abcc
          </div>
      </div>
  </div>
</div>
</body>