ul li html无序列表标签组学习

2019-09-07 郑州网站建设  

<ul> <li>属于无序列表组合标签-是html列表标签组合。

html网页代码经常使用ul li列表机关标签。

ul li


ul li

一、不能撮合

ul下只能放li标签,li标签内可以纵脱何标签,虽然也大要在li内再放ul li组合列表标签。

1、语法:

<ul> <li>列表内容一</li> <li>列表内容二</li> <li>列表内容三</li> </ul>

ul内可以或许放有数个li标签模式

成效:

ul li简单使用


ul li容易使用

2、使用注明

li不克不及离开ul零丁使用,只管ul也不能离开li独自使用,通常需要ul li共同,结构上li作为ul子级。

3、li再用ul li

li放ul内,只管li内概略再使用任何html标签元素,也可能再嵌套使用ul li

<ul> <li>列表形式一 <ul> <li>二级li模式</li> <li>二级li</li> <li>二级li</li> </ul> </li> <li>列表模式二</li> <li>列表形式三</li> </ul>

也就是匹面看到本文第一张图功效。


4、为何叫ul li为无序列表?
默认CSS情况下,每个li模式在阅读器中是圆点、圆圈等而不有序号1、2、3,一、二、三。

二、实践机关若何使用

普通新闻假定有列表目录,大概使用ul li结构或ol li组织(有序列表),通常环境下因为阅读器版本多、浏览器品牌多,以是默认状况下涉猎器对ul li默许CSS格式是差别的,如许通常咱们是首选去掉肃除ul li默认css格式,再从头配置新CSS样式。

以下为新闻题目列表排版,前面带点造诣。

1、首选筹备一个“点”图片
dot.gif ,放images文件夹内

小点图片素材


替代默认小圆点图片素材

2、对应关头CSS代码

ol, ul ,li{list-style: none;margin:0;padding:0;} /* list-style: none去掉ol ul li三个标签名堂,去掉外间距与外部白间距 */

ul.news{ border:1px solid #00F; padding:10px; width:300px;} /* 设置装备摆设ul的边框、宽度、内间距 */ ul.news li{ background:url(dot.gif) no-repeat 0 15px; height:30px; padding-left:10px; line-height:30px; text-align:left;} /* 设置装备摆设圆点图片为li后台,高、行高、形式靠左对齐 */

3、HTML代码

<ul class="news"> <li><a href="#">列表形式一</a></li> <li><a href="#">列表形式二</a></li> <li><a href="#">css问题意图上CSS5</a></li> <li><a href="#">学css上CSS5</a></li> </ul>

4、涉猎器成效

li ul实际应用


li ul实践使用

手法,将图片素材(点)作为li后援图片出现出圆点造诣,同时使用padding-left设置圆点布景图片与翰墨间距,多么圆点也好其余图片素材均兴许变革,同时兴许CSS无效控制间距距离,不怕涉猎器之间显示不匹敌。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1084.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • 标签
  • 学习
  • 列表
  • 无序
  • 属于