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中嵌入js代码的方法

Html h1标签怎么居中?有关于Html中的h1居中实例解析

Html空格代码怎么写?

Html怎么设置背景图片

Html图片大小如何设置

Html的<canvas>标签作用

怎样在Html网页中插入视频

Html怎么禁止另存

前端开发者必须知道的http协议相关知识

清除Html页面缓存的方法

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




打赏

取消

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

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

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

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

评论

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