HTML中标签栏的几种实现方法


本文摘自PHP中文网,作者小云云,侵删。

HTML中标签的用法很多,本文为大家推荐一篇标签栏的几种实现方法,对学习标签知识很有用,希望能帮助到大家。

标签页:分类 + 描述

标签栏:分类 =>让用户明白自己在哪里,将要去哪里

一、css命名方式:


XML/HTML Code复制内容到剪贴板


  1. <p class="service-tabs service-tabs1">


  2.   <ul class="service-tabs-inner">

  3.     <li class="on"><a href="#nogo">关注</a></li>

  4.     <li><a href="#nogo">推荐</a></li>

  5.     <li><a href="#nogo">导航</a></li>

  6.     <li><a href="#nogo">购物</a></li>

  7.   </ul>


  8. </p>




标签页:tab

优 势:1、方便查找 2、符合SEO规范

二、布局方式:

1.<ul><li> </p>
1) float:清浮动 overflow:hidden;/伪类:after/
2) display:inline-block IE7不兼容:*display:inline;*zoom:1; 空白间隔 : font-size:0;/同一行/margin负值/letter-spacing

2.<table>

三、模板代码:

1、悬停加背景色


CSS Code复制内容到剪贴板


  1. .service-tabs li a{width:160px;height:80px;display:block;color:#666;font-size:32px;}

  2. .service-tabs1 li a:hover{color:#2CC185;}

  3. .service-tabs1 li.on a{background-color:#2CC185;color:#fff;} /*背景颜色*/



阅读剩余部分

相关阅读 >>

Html属于什么文件Html的文件该如何打开

Html的空格代码怎么写?教你如何使用空格nbsp代码

使用Html和css实现康奈尔笔记的模板

Html文本区域大小怎么设置

vue中怎么对事件进行防抖和节流操作?

Html5中关于div与span Html块级元素的详细介绍

xml与Html是什么?有哪些区别?

Html如何设置段落空两格

怎么在Html增加css

Html ins标签常用的用法有哪些?Html ins常用属性的介绍

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...