如皋网站建设-如皋网站优化-如皋SEO-如皋网页设计

如皋网站建设咨询热线:15862770030
网站首页 > 网站建设知识 > 网站建设之CSS中使用项目列表创建一个典型的纵向列表菜单栏

网站建设之CSS中使用项目列表创建一个典型的纵向列表菜单栏

时间:2017/8/29 20:40:45 标签:

除了部分单页面,大部分网页设计中,导航菜单都是必不可少的一部分,第一种是垂直方向排列的,也就是纵向排列,通常用作列表栏目用,提供网站内部栏目的集中展示。另外一种是横向排列,通常用作顶部导航条的位置,这个排列方式在下一节单独讲解。这一节通过案例详细介绍一个典型的纵向栏目列表的制作,运用项目列表ul和li可以轻松实现,首先创建一个ul项目列表,li列表项填写具体的栏目名称即可,重点部分在css,一般需要定义的有4个地方:

1)ul样式需要定义,案例中为了清晰的看到项目列表区域,我们给其定义了宽度、内外边距、背景颜色。为了把列表前面的项目符号去掉,使用list-style-type:none。
2)li列表项css部分,这个设置列表项的宽度,加边框,同时为了让各个列表项之间互相有一定的上下间距,设置下外边距10px,加背景色充分区分列表项。
3)列表项作为菜单栏使用,通常是带有链接的,所以a标签也需要定义其样式。为了让整个li变成块级元素,整个块可以点击,设置display:block属性;列表内容去下划线居中显示,同时给文字设置颜色,跟li的背景色区分开来。
4)hover鼠标放上去的效果,设置一个背景色即可,其他效果大家可以自己测试。

完整演示代码如下(如果有疑问,可以跟帖留言,小七将会逐一解答):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
ul{
        list-style-type:none;
        background-color:#FFFFCC;
        width:180px;
        margin:0px;
        padding:0px;
        }
li{
        width:156px;
        border:2px solid #00FF00;
        margin:10px;
        background-color:#FF0000;
        }
a{
        display:block;
        text-align:center;
        text-decoration:none;
        color:#FFFFFF;
        }
a:hover{
                background-color:#0000FF;
                }
</style>
</head>

<body>
        <ul>
           <li><a href="#">0513web DEMO</a></li>
           <li><a href="#">0513web DEMO</a></li>
           <li><a href="#">0513web DEMO</a></li>
           <li><a href="#">0513web DEMO</a></li>
           <li><a href="#">0513web DEMO</a></li>
        </ul>
</body>
</html>

上一篇:网站建设之CSS中使用项目列表ul创建一个典型的导航条
下一篇:没有资料