无序号条例式清单

悲酥清风 Dreamweaver1 3,299,222阅读模式

排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另一种列表。对于概括因特网上的内容,列表是非常方便的。

接下来主要讲一些关于<ul>和<li>的一些应用,以及修改方式。<ul>与<li>主要应用与导航条、栏目文章列表、js滚动等一些特效中。

我们来看一下,关于不做任何样式修改的<ul>与<li>,例:

  1. <body>
  2.         <ul>
  3.             <li>文章一</li>
  4.             <li>文章二</li>
  5.             <li>文章三</li>
  6.             <li>文章四</li>
  7.             <li>文章五</li>
  8.         <ul>
  9.     </body>

浏览器预览效果:无序号条例式清单

在代码中,系统开发默认样式是<li>前面有一个圆点,在以后的页面制作中,由于工作需要,这些圆点我们需要去掉,重新定义它的样式,那么如何去掉这些圆点呢重新定义样式呢?请继续往下看:

去掉这些圆点我们只需要在ul样式中去通过css样式去实现

  1. <title>排列清单控制标记:无序号条例式清单</title>
  2.             <style>
  3.         ul {
  4.         list-style-type:none;//去除圆点
  5.         }
  6.         </style>
  7.         </head>
  8.         <body>
  9.         <ul>
  10.                     <li>文章一</li>
  11.                     <li>文章二</li>
  12.                     <li>文章三</li>
  13.                     <li>文章四</li>
  14.                     <li>文章五</li>
  15.             <ul>
  16.         </body>

如图:无序号条例式清单

圆点去掉之后那么我想在这列列表中,给每一行加上下划线怎么办?

  1. <title>排列清单控制标记:无序号条例式清单</title>
  2.     <style>
  3.         ul {
  4.         list-style-type:none;//去除圆点
  5.         }
  6.         li {
  7.         border-bottom:dashed;//下边线为虚线  实线只需要将dashed替换为solid即可
  8.         }
  9.     </style>
  10.     </head>
  11.     <body>
  12.     <ul>
  13.         <li>文章一</li>
  14.             <li>文章二</li>
  15.             <li>文章三</li>
  16.             <li>文章四</li>
  17.             <li>文章五</li>
  18.         <ul>
  19.     </body>

如图:无序号条例式清单
由于系统默认下划线是加粗状态,这时我们为了增加它的美观度,需要把下划线变得细一些,可以在这段样式代码中加入他的下边线定义即可:

  1. li {
  2.    border-bottom:dashed;
  3.        border-bottom:dashed 1px;//下边线为虚线,粗为1像素
  4.    }

同时我们也可以调整行高及li的宽度

  1. li {
  2.       border-bottom:dashed 1px;
  3.      width:50px;//li宽度为50px
  4.     line-height:30px;//行高为30px
  5.     }

无序号条例式清单
有时根据项目需要我们需要把li做成横排的,那么怎么实现这个功能呢?只需将li向左浮动即可。

  1. li {
  2.         border-bottom:dashed 1px;// 下边线为虚线,下划线粗1px
  3.         width:50px;//li宽度为50px
  4.         line-height:30px;//行高为30px
  5.         float:left;//左浮动
  6.     }

如图:无序号条例式清单

如何在li前面加上一些特殊符号或者图标呢?

接下来留给大家一个思考问题。

如图:无序号条例式清单

本节整体代码如下:

  1. <title>排列清单控制标记:无序号条例式清单</title>
  2.         <style>
  3.             ul {
  4.             list-style-type:none;
  5.             }
  6.         li {
  7.         line-height:30px;
  8.         border-bottom:dashed 1px;
  9.         width:50px;
  10.         float:left;
  11.         }
  12.         </style>
  13.     </head>
  14.     <body>
  15.     <ul>
  16.             <li>文章一</li>
  17.             <li>文章二</li>
  18.             <li>文章三</li>
  19.             <li>文章四</li>
  20.             <li>文章五</li>
  21.         <ul>
  22.     </body>

悲酥清风
  • 本文由 发表于 2015年4月22日 17:17:24
评论  1  访客  0  引用  1

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定