网页导航栏中常用li标签嵌套超链接用法

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/HCJS_Zee/article/details/78294750

在网页中导航,菜单等部分的设计,需要使用到列表ul,其中的列表项li一般会嵌套a标签,超链接到指定url。在li标签嵌套a链接时,a链接中通常包含文字。

为了使文字居中,而且当点击li标签时,整个区域都可以响应到a链接,操作不是特别清晰,做了如下总结:

<ul>
  <li><a href='index.html'> 首页 </a></li>"
  <li><a href='staff.html'>员工风采</a></li>
  <li><a href=''>部门精粹</a></li>
  <li><a href=''>深入仓库</a></li>
  <li><a href=''>我要登录</a></li>
</ul>

.container-header .aside ul>li{
  cursor: pointer;
  list-style: none;
  //color: @backgroundColor-black;
  font-size:14px;
  font-family:"微软雅黑 Light";
  //font-weight: bolder;
  float: left;
  //vertical-align: middle;
  width:15%;
  border:1px solid @backgroundColor-white;
  height:70px;
}
.container-header .aside ul>li a{
  list-style: none;
  color: @backgroundColor-black;
  text-decoration: none;
  display: inline-block;
  //width:100%;
  padding:24px 30px;
  height:100%;
}
直接给a标签设置盒子模型(padding:24px 30px;),即可使a标签整个填充li标签,使点击操作可以响应整个li标签区域。

展开阅读全文

a标签嵌套li标签

11-02

由于需要,必须a标签嵌套li标签,不过在使用a:hover li或li:hover时,效果在IE7、IE8下均能正常显示,可是在IE6下怎么都无法实现效果。rnrn但是查阅相关资料,说a标签嵌套li标签不符合规则,但是为什么IE7IE8下就是效果正常呢?rnrnhtml部分代码:rn rn rn rn rn 网站首页rn 新闻资讯rn 理论研究rn 作品欣赏rn 创作园地rn 互动空间rn 战略伙伴rn 联系我们rn rn rn rn rnrnrn/*导航部分*/rn#BoxBbackground-color:#6f010a;width:980px;height:43px;clear:both;margin:0px auto;rn#BoxB #NavLeftSidewidth:86px; height:43px;float:left; background:url(../images/Nav05.jpg) no-repeat;rn#BoxB #NavBodywidth:808px; height:43px; float:left;background:url(../images/Nav03.jpg) repeat-x; rn#BoxB #NavBody ul margin:0px; padding:0px; line-height:46px; text-align:center; /*font-weight:bold; */ font-size:16px; font-family:"黑体"; clear:both;rn#BoxB #NavBody li,#BoxB #NavBody a:link li width:101px; height:43px; line-height:46px;margin:0px; padding:0px;float:left; color:#f51c25; list-style-type:none;rn#BoxB #NavBody a:link li display:block;visibility:visible; zoom:1;rn#BoxB #NavBody a:hover li display:block; visibility:visible;position:relative;zoom:1;rn#BoxB #NavBody a:hover li width:99px;height:41px; line-height:41px;margin:0px; padding:0px; background-color:#d6d1d5; border:1px #6f010a solid; text-align:center; color:#990000; text-decoration:none;rn#BoxB #NavRightSidewidth:86px; height:43px;float:left; background:url(../images/Nav06.jpg) no-repeat;rnrn效果http://www.xh1818.cn/cws/rnrn 论坛

没有更多推荐了,返回首页