首页 > 下载 > 下载详文：Html中的ul列表标签使用

Html中的ul列表标签使用

源文件下载
2424KB

发布时间：2013年08月01日 10时13分37秒属性：程序Web开发 > Javascript/Html 访问次数：1369832

字体：大初始小简繁添加收藏

Html中的ul列表标签使用

在网页标签中ul、ol都是用来显示列表信息的，它们的性质基本相同，只是ul是用符号标记列表，ol是用数字来标记列表，默认都是纵向列表，它们的css样式基本相同。本文通过CSS展示ul的用法，通过ul来建立菜单，ol和ul相同在这里所以仅用ul来作示例演示，同样也可以用在ol标签上。

ul标签通常用的最多的是在菜单，或内容列表上呈现列表。在这里先在html中放入ul标签并且在ul中放入li元素，将ol和ul对比看看如下图，就是两个列表默认的呈现样式。

下面在页面<head>头标签中加入样式，ul让它的margin为0，ul#Main li也就是让ul中的li元素加入漂浮，list-style-type: none;也就取消ul列表的符号标记，字体设置为微软雅黑，li元素边框为1个像素，背景为白色，在ul标签加入id指定到Main上，这样样式属性就用到了ul标签上了，详细代码如下。

HTML 代码复制

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>html中的ul列表标签使用 - 遗昕|weisim3.com</title>
    <style type="text/css">...
        ul
        {...}{
            margin: 0;
        }
        
        ul#Main li
        {...}{
            float: left;
            margin: 1px;
            font-size: 16px;
            font-family: 微软雅黑;
            list-style-type: none;
            border: 1px solid red;
            padding: 3px 0px;
            width: 150px;
            background-color: White;
            text-align: center;
        }
    </style>
</head>
<body>
<div style="position: absolute; top: 30px; left: 0px;">
    <ul id="Main">
        <li><a href="#">Item1</a> </li>
        <li><a href="#">Item2</a> </li>
        <li><a href="#">Item3</a> </li>
        <li><a href="#">Item4</a> </li>
    </ul>
 </div>
</body>
</html>

效果如下：

通过上面的基本样式定义加入可以看到ul的列表已经变成水平显示了，这里进一步定义CSS，将ul li中的a标签文字属性进行设定，ul#Main li a取消a标签的下划线，color设定为#333；同时ul#Main li在加入一个:hover伪类ul#Main li:hover，让鼠标滑入背景为红色，字体为白色。下面是详细CSS样式定义。

HTML 代码复制

 <style type="text/css">...
        /**//*ul的基本定义*/
        ul
        {...}{
            margin: 0;
        }
        /**//*ul li的基本定义*/
        ul#Main li
        {...}{
            float: left;
            margin: 1px;
            font-size: 16px;
            font-family: 微软雅黑;
            list-style-type: none;
            border: 1px solid red;
            padding: 3px 0px;
            width: 150px;
            background-color: White;
            text-align: center;
        }
        
        /**//*将ul的li中的a标签加入属性*/
         ul#Main li a
        {...}{
            width: 150px;
            text-decoration: none;
            color: #333;
            padding: 3px;
        }
        
        /**//*li加入鼠标效果通过伪类:hover*/
        ul#Main li:hover
        {...}{
            background-color: Red;
            color: White;
        }
    </style>

效果如下：

下面加入二级菜单在item中加入div元素并且加入<p>标签即子级列表，详细参考下图。

加入之后在Item中已经可以看到子元素集合了，然后加入CSS样式，ul#Main li div p将p标签的margin设定为0，ul#Main li div p:hover将p标签加入鼠标滑入效果背景为白色，color为黑色； ul#Main li div默认div也就是子级菜单默认为隐藏，当滑入对应父即菜单时才显示，结合ul#Main li:hover div使用，最后详细代码。

HTML 代码复制

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>html中的ul列表标签使用 - 遗昕|weisim3.com</title>
    <style type="text/css">...
        /**//*ul的基本定义*/
        ul
        {...}{
            margin: 0;
        }
        /**//*ul li的基本定义*/
        ul#Main li
        {...}{
            float: left;
            margin: 1px;
            font-size: 16px;
            font-family: 微软雅黑;
            list-style-type: none;
            border: 1px solid red;
            padding: 3px 0px;
            width: 150px;
            background-color: White;
            text-align: center;
        }
        
        /**//*将ul的li中的a标签加入属性*/
        ul#Main li a
        {...}{
            width: 150px;
            text-decoration: none;
            color: #333;
            padding: 3px;
        }
        
        /**//*li加入鼠标效果通过伪类:hover*/
        ul#Main li:hover
        {...}{
            background-color: Red;
            color: White;
        }        
        
        /**//*加入子集合div的p标签margin设置为0*/
        ul#Main li div p
        {...}{
            margin: 0px;
        }
        /**//*子集合div的p标签加入伪类hover*/
        ul#Main li div p:hover
        {...}{
            background-color: White;
            color: Black;
        }
        
        /**//*默认子集合为隐藏*/
        ul#Main li div
        {...}{
            display: none;
            text-align: left;
            border-top: 1px solid #fff;
            margin-top: 3px;
        }
        /**//*默认子集合为隐藏 在鼠标滑入一级菜单后显示*/
        ul#Main li:hover div
        {...}{
            display: block;
            text-align: left;
        }
    </style>
</head>
<body>
    <div style="position: absolute; top: 30px; left: 0px;">
        <ul id="Main">
            <li><a href="#">Item1</a>
                <div>
                    <p>
                        <a href="#">Item1.1</a>
                    </p>
                    <p>
                        <a href="#">Item1.2</a>
                    </p>
                    <p>
                        <a href="#">Item1.3</a>
                    </p>
                    <p>
                        <a href="#">Item1.4</a>
                    </p>
                </div>
            </li>
            <li><a href="#">Item2</a>
                <div>
                    <p>
                        <a href="#">Item2.1</a>
                    </p>
                    <p>
                        <a href="#">Item2.2</a>
                    </p>
                    <p>
                        <a href="#">Item2.3</a>
                    </p>
                </div>
            </li>
            <li><a href="#">Item3</a>
                <div>
                    <p>
                        <a href="#">Item3.1</a>
                    </p>
                    <p>
                        <a href="#">Item3.2</a>
                    </p>
                    <p>
                        <a href="#">Item3.3</a>
                    </p>
                    <p>
                        <a href="#">Item3.4</a>
                    </p>
                </div>
            </li>
            <li><a href="#">Item4</a> </li>
        </ul>
    </div>
</body>
</html>

最终效果如下：

免费
Html中的ul列表标签使用（4）

本下载连接不支持第三下载工具打开，请直接点击下载即可

文章版权归属weisim3.com所有,未经书面版权许可同意，不得私自转载(或做修改转载)，源文件示例仅供学习使用，更不要出于商业用途或印刷出版发行！否则将追究其相关法律责任，版权联系QQ：729260499。

您可能感兴趣的软件资讯

最新世界软件资讯

遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .

 遺昕|Weisim3.com 下载许可条款协议

                        使用下载文件条款,您使用则接受本授权许可条款,如果不同意则不能使用.同意条本款协议意即签署了本协议.
                        下载源著作“文件内容”包括文字、图片、音频或视频、代码工程文件，软件程序源代码可能由遺昕|Weisim3.com 原著作和第三方DLL内容组成，遺昕|Weisim3.com 对本网站的原著作拥有版权和许可，并且实施授权许可条款下载。不构成您通过遺昕|Weisim3.com 网站可以获得Weisim3.com以外的第三方文件的权益。

                        1.授权许可,

                        (a)遺昕|Weisim3.com “下载资讯”的文章以及文章源码,授予您非独占拥有,免费授予,全球性不可撤销；下载文件您可以复制或备份,您不得分发上传服务器或发布公开在任何网站或博客空间下(包括一切图片、文字、音频视频所有素材).下载文件不授予您分销权(你不存在转让权利)，不得进行任何直接间接、商业非商业公开和发行销售。

                        (b)在所提供内容（提供源文件）所有资料可能随时更新或作修改，可能因系统或软件版本产生文件错误，Weisim3.com不做保证或义务进行纠错，但是weisim3.com会做到尽可能的减少下载文件错误。

                        (c)遺昕|Weisim3.com 如暂停或终止任何服务，停止提供信息获取任何情况或理由，恕不另行通知


                        2.条件限制
                        无商标许可，本许可不授予您商标使用权，商标标志不予您任何条件使用。

                        如果复制下载文件或任何部分，你必须保留所有版权。


                        以上许可协议您下载即签署了本协议,您必须遵守本协议的条款范围内使用,如果超越条款构成侵权,您将承担法律责任.承担对weisim3.com造成的一切损失.