学习div+ul+li+css进行导航或栏目布局[页面设计]

作者: unvs 分类: Web前端 发布时间: 2011-03-10 20:56 ė16,428 views 6没有评论

之前很少使用ul+li进行排列布局,感觉怪怪的,现在发现很多网站全部是div+ul+li+css构成的,没有一个table标记(div+css便于网站seo),感觉自己落后了。今天特地找了些资料,进行ul、li与css结合的相关学习,发现眼前又多了一片天空。

    下面是整理的相关资料及加的注释:

A).运用CSS格式化列表符:

ul li{
list-style-type:none;    //将每列前面的符号去掉;
}

B).如果你想将列表符换成图像,则:

ul li{
list-style-type:none;
list-style-image: url(images/icon.gif); //列表样式背景图;
}

C).为了左对齐,可以用如下代码:

ul{
list-style-type:none;
margin:0px; //设置边距皆为0px;
}

D).如果想给列表加背景色,可以用如下代码:

ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}

E).如果想给列表加MOUSEOVER背景变色效果,可以用如下代码:

ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }

说明:display:block;这一行必须要加的,这样才能块状显示

F).LI中的元素水平排列,关键FLOAT:LEFT: //制作导航菜单;

ul{
list-style-type:none;
width:100%; //设置宽度;
}
ul li{
width:80px; //设置每列宽度;
float:left; //允许文本靠右;
}

再加一点,碰到当使用ul、li时,会发现每列文字不会完全靠左,出现空隙,尽管你设置了margin:0px或者text-align:left都不行,如下图:

ul-li
 

运行的效果是每列第一个字对齐情字,那么我想把每列对齐友字怎么实现呢?

解决办法:在li的css里,加入float:left;这句就可实现,意为允许文本靠右,同时你可设置margin属性,调整间距。

下面是网上的一个导航实例:

<div id="menu">
    <ul>
      <li><a href="#">首页</a></li>
   <li class="menuDiv"></li>
   <li><a href="#">博客</a></li>
   <li class="menuDiv"></li>
   <li><a href="#">设计</a></li>
   <li class="menuDiv"></li>
   <li><a href="#">相册</a></li>
   <li class="menuDiv"></li>
   <li><a href="#">论坛</a></li>
   <li class="menuDiv"></li>
   <li><a href="#">关于</a></li>
    </ul>
  </div>

CSS:
#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;}

此篇文章为作者去年的原创,现在看来貌是很简单的东西,但总有一些博友需要的,所以拿出来分享,共同学习、进步!!!

本博文章基本上属于原创或收集整理,都是心血结晶。
欢迎转载分享,转载请注明出处,谢谢!
本文地址:学习div+ul+li+css进行导航或栏目布局[页面设计]

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ɣ回顶部