html里的ul和Li的区别是什么_随笔

1、定义不同

ul 是 Unordered List（无序列表）的缩写。<li>标签定义列表项目（li是lists的缩写）。

2、用法不同

<ul>标签定义无序列表。使用 <li>标签定义的列表可以是个无序列表也可以是有序列表。

3、支持的HTML全局属性不同

<li>标签支持所有的HTML 全局属性。<ul>标签支持 HTML 中的全局属性：accesskey、class、dir、id、lang、style、tabindex、title。

4、属性不同

<ul>标签中的属性：compact、type。<ul>标签：id, class, title, style, dir, lang, xml:lang。

5、元素级别不同

ul 是块级元素可以定义宽和高，li表示行排列不能单独使用，需要在ul和ol里面，配合使用。

直接上个实例吧：

第一步，打开软件Adobe Dreamweave CS6，创建一个新的HTML。

第二步，在工作区域（body）用标签 ul 和 li 输入导航的内容。

第三，编辑样式CSS。在标签<head></head>之间写入样式表。，

第四，紧接上一步。由于无线序列具有默认样式，前面的圆点（），所以先写去除默认样式的样式。样式为：ul,li { list-style:nonelist-style-type:nonepadding:0margin:0} /*清除ul,li的默认样式*/

第五，由于默认的无序列表是竖排的，所以需要为其添加浮动，同时编辑宽度和距离等样式。添加样式为： ul li { float:leftwidth:80pxheight:30pxbackground:#900line-height:30pxtext-align:centermargin-right:2pxcolor:#fff} 效果，

第六，如果需要为导航添加链接（），同时获得鼠标滑过效果，即需要对 "a"为标签编写样式。样式为： ul li a { display:blockheight:30pxtext-decoration:nonecolor:#fff} ul li a:hover { background:#999}

最终预览效果。

完整代码：

<title>无标题文档</title>

ul li { float:leftwidth:100px height:30px background:#900 line-height:30px text-align:center margin-right:2px }

ul li a { display:block height:30px text-decoration:none color:#fff} ul li a:hover { background:#999}

</style></head>

这个只是一个图标字体，一般要结合js点击或者经过触发事件。

代码：

<head>

<title>HTML调试</title>

body,

div,

ul,

li {

margin: 0

padding: 0

}

body {

font-family: "微软雅黑", Arial, Helvetica, sans-serif

color: #333333

line-height: 25px

font-size: 14px

}

a:link,

a:visited {

text-decoration: none

color: #333333

}

a:hover {

text-decoration: underline

color: #08A5E0

text-decoration: none

}

ul,

ul li {

list-style-type: none

}

.cl {

zoom: 1

}

.navbg {

height: 40px

width: 100%

background: #08A5E0

box-shadow: 1px 1px 7px #999

position: absolute

z-index: 99

left: 0

}

#navul li {

float: left

margin-right: 1px

width: 100px

height: 40px

position: relative

text-align: center

line-height: 40px

}

#navul li.navhome {

text-align: left

padding: 0 0px 0 40px

width: 100px

}

#navul li a:link,

#navul li a:visited {

color: #FFFFFF

}

#navul li ul {

display: none

position: absolute

z-index: 10000

top: 38px

left: -1px

background: #006D96

border: #004E6C 1px solid

border-bottom: none

}

#navul li ul li {

display: block

width: 98px

float: none

margin-right: 0px

height: 28px

position: relative

line-height: 28px

border-bottom: #004E6C 1px solid

font-size: 12px

}

#navul li.navmoon {

background: #006D96

border: #004E6C 1px solid

width: 98px

height: 38px

line-height: 38px

}

#navul li.navmoon a {

color: #FFFFFF

}

#navul li.navhome a:hover {

color: #FCFF00

}

#navul li.navmoon ul {

display: block

}

#navul li.navmoon ul a {

display: block

width: 98px

height: 28px

line-height: 28px

}

#navul li.navmoon ul a:hover {

background: #000000

}

</style>

</head>

<body>

</li>

<li>

<ul>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

<a href="" title="CSS入门">CSS入门</a>

</li>

<li>

<a href="" title="CSS工具">CSS工具</a>

</li>

<li>

<a href="" title="CSS技巧">CSS技巧</a>

</li>

<li>

<a href="" title="CSS实例">CSS实例</a>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

</li>

<li>

</li>

<li>

<a href="" title="flash">flash</a>

</li>

</ul>

</li>

<li>

<ul>

<li>

<a href="" title="帝国cms">帝国cms</a>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<a href="" title="Javascript">Javascript</a>

<ul>

<li>

<a href="" title="Jquery">Jquery</a>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

<a href="" title="SEO杂谈">SEO杂谈</a>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

</ul>

</div>

$(window).load(function() {

$(".navbg").capacityFixed()

})

$(function() {

$("#navul > li").not(".navhome").hover(function() {

$(this).addClass("navmoon")

}, function() {

$(this).removeClass("navmoon")

})

var maxwidth = 580

$(".news_text img").each(function() {

if($(this).width() > maxwidth) {

$(this).width(maxwidth)

}

})

function $tomato(id) {

return document.getElementById(id)

}

function runCode(obj) {

var winname = window.open('', "_blank", '')

winname.document.open('text/html', 'replace')

winname.document.writeln(obj.value)

winname.document.close()

}

(function($) {

$.fn.capacityFixed = function(options) {

var opts = $.extend({}, $.fn.capacityFixed.deflunt, options)

var FixedFun = function(element) {

var top = opts.top

element.css({

"top": top

})

$(window).scroll(function() {

var scrolls = $(this).scrollTop()

if(scrolls > top) {

if(window.XMLHttpRequest) {

element.css({

position: "fixed",

top: 0

})

} else {

element.css({

top: scrolls

})

}

} else {

element.css({

position: "absolute",

top: top

})

}

})

element.find(".close-ico").click(function(event) {

element.remove()

event.preventDefault()

})

}

return $(this).each(function() {

FixedFun($(this))

})

}

$.fn.capacityFixed.deflunt = {

right: 0,

top: 25

}

})(jQuery)

</script>

</body>

结果：

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/7400487.html

html里的ul和Li的区别是什么

发表评论

评论列表（0条）