HTML 首页倒三角形导航块-白红宇

HTML 首页倒三角形导航块

阅读量：4584 次

发布时间：2019-06-09

本文共 1078 字，大约阅读时间需要 3 分钟。

制作效果：

制作模型：

/*公共类*/.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;}