排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另一种列表。对于概括因特网上的内容,列表是非常方便的。
接下来主要讲一些关于<ul>和<li>的一些应用,以及修改方式。<ul>与<li>主要应用与导航条、栏目文章列表、js滚动等一些特效中。
我们来看一下,关于不做任何样式修改的<ul>与<li>,例:
- <body>
- <ul>
- <li>文章一</li>
- <li>文章二</li>
- <li>文章三</li>
- <li>文章四</li>
- <li>文章五</li>
- <ul>
- </body>
在代码中,系统开发默认样式是<li>前面有一个圆点,在以后的页面制作中,由于工作需要,这些圆点我们需要去掉,重新定义它的样式,那么如何去掉这些圆点呢重新定义样式呢?请继续往下看:
去掉这些圆点我们只需要在ul样式中去通过css样式去实现
- <title>排列清单控制标记:无序号条例式清单</title>
- <style>
- ul {
- list-style-type:none;//去除圆点
- }
- </style>
- </head>
- <body>
- <ul>
- <li>文章一</li>
- <li>文章二</li>
- <li>文章三</li>
- <li>文章四</li>
- <li>文章五</li>
- <ul>
- </body>
圆点去掉之后那么我想在这列列表中,给每一行加上下划线怎么办?
- <title>排列清单控制标记:无序号条例式清单</title>
- <style>
- ul {
- list-style-type:none;//去除圆点
- }
- li {
- border-bottom:dashed;//下边线为虚线 实线只需要将dashed替换为solid即可
- }
- </style>
- </head>
- <body>
- <ul>
- <li>文章一</li>
- <li>文章二</li>
- <li>文章三</li>
- <li>文章四</li>
- <li>文章五</li>
- <ul>
- </body>
如图:
由于系统默认下划线是加粗状态,这时我们为了增加它的美观度,需要把下划线变得细一些,可以在这段样式代码中加入他的下边线定义即可:
- li {
- border-bottom:dashed;
- border-bottom:dashed 1px;//下边线为虚线,粗为1像素
- }
同时我们也可以调整行高及li的宽度
- li {
- border-bottom:dashed 1px;
- width:50px;//li宽度为50px
- line-height:30px;//行高为30px
- }
有时根据项目需要我们需要把li做成横排的,那么怎么实现这个功能呢?只需将li向左浮动即可。
- li {
- border-bottom:dashed 1px;// 下边线为虚线,下划线粗1px
- width:50px;//li宽度为50px
- line-height:30px;//行高为30px
- float:left;//左浮动
- }
如何在li前面加上一些特殊符号或者图标呢?
接下来留给大家一个思考问题。
本节整体代码如下:
- <title>排列清单控制标记:无序号条例式清单</title>
- <style>
- ul {
- list-style-type:none;
- }
- li {
- line-height:30px;
- border-bottom:dashed 1px;
- width:50px;
- float:left;
- }
- </style>
- </head>
- <body>
- <ul>
- <li>文章一</li>
- <li>文章二</li>
- <li>文章三</li>
- <li>文章四</li>
- <li>文章五</li>
- <ul>
- </body>
来自外部的引用