Html之【ul和li】综合技巧大全(持续更新中..)

最新推荐文章于 2022-10-11 17:53:19 发布

敦厚的曹操

最新推荐文章于 2022-10-11 17:53:19 发布

阅读量7.4k

点赞数 1

分类专栏： 4.【html】 5.【css】文章标签： css

本文链接：https://blog.csdn.net/dxnn520/article/details/8037512

版权

5.【css】同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

4.【html】

83 篇文章 1 订阅

订阅专栏

一、修改【ul】和【li】的行间距或间距的方法！

首先，用下面的方法，但发现太小了字体也显示一半了。

缩小行li的间距应改变行高line-height

li{line-height:20px;}

其次，用下面的方法还是比较管用！

ul,li{margin:0;padding;0}放在css的第一行。

二、去掉【ul】和【li】前面的点！

#center_b_left ul li {list-style:none;}

三、去掉【li】横着排列

.menu li { float: right;}

四、li中的内容超出不换行

white-space:nowrap;     //强制不换行

overflow:hidden;           //自动隐藏文字

text-overflow: ellipsis;    //文字隐藏后添加省略号

-o-text-overflow:ellipsis; //适用于opera浏览器

五、用ul和li画表格

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>用ul和li画表格</title>
  <style type="text/css">
    ul li {
      display: block;
      width: 33%;
      float: left;
      text-indent: 2em;
      border: 1px solid #f1f1ee;
    }

    .top {
      background: #f8f8e7;
      font-weight: bold;
      border-top: 1px;
      list-style: none;
      width: 600px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #f0f0e9;
      font-size: 16px;
      margin: 0px;
      padding: 0px
    }

    .row {
      list-style: none;
      width: 600px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #f1f1ee;
      font-size: 16px;
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body>

  <ul class="top">
    <li>序号</li>
    <li>姓名</li>
    <li>排行榜</li>
  </ul>
  <ul class="row">
    <li>1</li>
    <li>刘备</li>
    <li>老大</li>
  </ul>
  <ul class="row">
    <li>2</li>
    <li>关羽</li>
    <li>老二</li>
  </ul>
  <ul class="row">
    <li>3</li>
    <li>张飞</li>
    <li>老三</li>
  </ul>
</body>

</html>

五、列表综合示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title></title>
 </head>
 <body>
     <b>HTML列表:</b><br />
     <hr size="5" color="#FF0000;" />
     <br />
     <!--第一，无序列表（ul:unordered list)-->
     <font size="+1" color="#00FF00" face="华文楷体">I.无序列表(Unordered List):</font><br />
     1.默认：<br />
     <ul>
         <li>香蕉</li>
         <li>苹果</li>
         <li>橘子</li>
     </ul>
     2.用type属性:<br />
     <!--ul type属性的取值：
       disc:实心圆、circle:空心圆、square:实心方块-->
     <!--ol type属性的取值：
         <ul type="I"/"a"/"A"/"1">
         -->
     <ul type="circle">
         <li>香蕉</li>
         <li>苹果</li>
         <li>橘子</li>
     </ul>
     <ul type="square">
         <li>香蕉</li>
         <li>苹果</li>
         <li>橘子</li>
     </ul>
     3.属性值的混合使用，起强调作用：<br />
     <ul type="circle">
         <li>香蕉</li>
         <li type="disc">苹果</li>
         <li>橘子</li>
     </ul>
     <!--第二，有序列表(ol,ordered list)-->
     <font size="+1" color="#00FF00" face="华文楷体">II.有序列表(Ordered List)：</font><br />
     1.默认：<br />
     <ol>
         <li>篮球</li>
         <li>排球</li>
         <li>足球</li>
     </ol>
     2.使用type属性：<br />
     <ol type="i">
         <li>篮球</li>
         <li>排球</li>
         <li>足球</li>
     </ol>
     <ol type="A">
         <li>篮球</li>
         <li>排球</li>
         <li>足球</li>
     </ol>
     3.改变有序列表项的前导编号：<br />
     <blockquote>
         a.<font color="#FF00FF">start</font>属性单独使用：<br />
         <ol start="3">
             <li>篮球</li>
             <li>排球</li>
             <li>足球</li>
         </ol>
         b.<font color="#FF00FF">vlaue</font>属性单独使用:<br />
         <ol>
             <li>篮球</li>
             <li value="5">排球</li>
             <li>足球</li>
         </ol>
         c.<font color="#FF00FF">start、value</font>属性的共同使用：<br />
         <ol start="8">
             <li>篮球</li>
             <li value="15">排球</li>
             <li>足球</li>
         </ol>
     </blockquote>
     <font size="+1" color="#00FF00" face="花纹楷体">III.嵌套列表(Nested Lists)：</font><br />
     1.无序列表中嵌套无序列表:<br />
     <ul>
         <li>饮料</li>
         <li>水果
             <ul>
                 <li>香蕉</li>
                 <li>苹果</li>
                 <li>橘子</li>
             </ul>
         </li>
         <li>蔬菜</li>
         <li>茶叶</li>
     </ul>
     2.无序列表中嵌套有序列表:<br />
     <ul>
         <li>饮料</li>
         <li>水果
             <ol>
                 <li>香蕉</li>
                 <li>苹果</li>
                 <li>橘子</li>
             </ol>
         </li>
         <li>蔬菜</li>
         <li>茶叶</li>
     </ul>
     3.有序列表中嵌套有序列表：<br />
     <ol>
         <li>饮料</li>
         <li>水果
             <ol>
                 <li>香蕉</li>
                 <li>苹果</li>
                 <li>橘子</li>
             </ol>
         </li>
         <li>蔬菜</li>
         <li>茶叶</li>
     </ol>
     4..有序列表中嵌套无序列表：<br />
     <ol>
         <li>饮料</li>
         <li>水果
             <ul>
                 <li>香蕉</li>
                 <li>苹果</li>
                 <li>橘子</li>
             </ul>
         </li>
         <li>蔬菜</li>
         <li>茶叶</li>
     </ol>
     5.列表的多级嵌套：<br />
     <ol>
         <li>饮料</li>
         <li>水果
             <ul>
                 <li>香蕉</li>
                 <li>苹果
                     <ul>
                         <li>产自巴西</li>
                         <li>产自中国</li>
                     </ul>
                 </li>
                 <li>橘子</li>
             </ul>
         </li>
         <li>蔬菜</li>
         <li>茶叶</li>
     </ol>
     <!--第三，定义列表（dl,definition list)-->
     <font size="+1" color="#00FF00">IV.定义列表：</font><br />
     1.定义列表：<br />
     <!--
         <dl>
           <dt>第一个标题项</dt> 
           <dd>对第一个标题项的解释性文字</dd>
           <dt>第二个标题项</dt>
           <dd>对第二个标题项的解释性文字</dd>
         </dl>
         其中：<dl>用来标识定义列表的开始；
               <dt>用来标识定义列表的列表项；
               <dd>用来标识定义列表中列表项的解释性文字。
         -->
     <dl>
         <!--dt:definition term(定义术语)定义“北京”这个标题项-->
         <dt>北京</dt>
         <!--dd:definition definition(定义对术语的解释定义)对“北京”这个标题项的解释-->
         <dd>
             中国的政治中心</dd>
         <dt>上海</dt>
         <dd>
             中国的经济中心</dd>
         <dt>深圳</dt>
         <dd>
             中国改革开放的前沿城市</dd>
     </dl>
 </body>
 </html>

敦厚的曹操

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html之【ul和li】综合技巧大全(持续更新中..)

一、修改【ul】和【li】的行间距或间距的方法！首先，用下面的方法，但发现太小了字体也显示一半了。缩小行li的间距应改变行高line-heightli{line-height:20px;}其次，用下面的方法还是比较管用！ul,li{margin:0;padding;0}放在css的第一行。二、去掉【ul】和【li】前面的点！#center_b_left ul l
复制链接

扫一扫