ydzf.net
当前位置:首页 >> 网页设计ul和li >>

网页设计ul和li

在HTML中,了解各个标签的默认样式,有助于理解代码的表现,也有利于精简代码! ul 和li 属于无序列表元素 . HTML的列表元素是一个由列表标签封闭的结构,包含的列表项由组成.,无序列表就是列表结构中的列表项没有先后顺序的列表形式.大部分网页应用中的列表均采用无序列表,其列表标签采用,编写方法如下:列表项一列表项二列表项三列表项四列表项五

ul是无序列表,在没有附加特别样式时列表项前的是一个点,也可以定义为一个图片,或者其它符号 ol是有序列表 在没有特别样式是每项列表前依次1. 2. 3.来标记..也可以定义为大写,罗马等 li是列表里的一项

<ul> <li>工程系<ul><li>电脑工程</li><li>建筑工程</li></ul></li> <li>科学系</li> </ul>

表示定义一个按照元素层级关系限定的CSS样式.即:要求元素的层级关系,首先是最外层元素要包含.top样式,其次再去寻找下面ul元素,再找到ul下面的li,再找到li下面的a标签元素.上面这个样式的意思是当鼠标移动到li元素上时,它下面的a标签将会按照这个样式进行渲染.<div class="top"> <ul> <li> <a href="#">链接</a> </li> </ul></div> 样式的这种定义方式只对满足上述结构的元素生效,像如下结构的代码,将不会拥有上述定义的样式:<div class="top"> <a href="#">链接</a> <ul> <li> </li> </ul></div>

你可以直接写代码;形如:内容1内容2内容3

将ul里面的li标签都设置为右浮动即可.如:<ul style="overflow:hidden; display:block"> <li class="float:right; padding:10px;>项目1</li> <li class="float:right; padding:10px;>项目1</li> <li class="float:right; padding:10px;>项目1</li> <li class="float:right; padding:10px;>项目1</li></ul>

ol表示里面的列表是有序列表,就是每个项目前面带数字序号 li是每一个列表项,即列表中的每一个项目 另外,在实际网页设计中,常采用ul做列表,ol用的不多

我建议你去学一下div+css,然后就明白了,div是网页布局常用的标签,在网页中他就相当一个容器,所有的内容都可以放到里面,然后通过css样式控制他在你网页上出现的位置,这样的话网页上就会有很多的div你又怎么能准确的控制某一个

在样式表里面加上这段代码看一下ul{margin:0px; padding:0;}

li{float:left;width:400px;}设置li左浮动,然后控制下宽度就好了.

prpk.net | nwlf.net | wlbx.net | pznk.net | wlbk.net | 网站首页 | 网站地图
All rights reserved Powered by www.ydzf.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com