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

Html中的ul列表标签使用

发布时间:2013年08月01日 10时13分37秒   属性:程序Web开发 > Javascript/Html    访问次数:11767
字体: 初始 添加收藏 分享给好友

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列表标签使用 (3)
本下载连接不支持第三下载工具打开,请直接点击下载即可
您可能感兴趣的软件资讯
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .

×
帐号登入 - 遺昕 | Weisim3.com
用 户 名:
用户密码:
注册用户   忘记密码  帮助

登录 Weisim3.com

享受 网络 无纸化 学习

伴随着您成长 伴随着您进步