精华内容
下载资源
问答
  • 对无序列表使用
    千次阅读
    2021-06-11 17:31:53

    第一步:建立一个无序列表

    我们先建立一个无序列表,来建立菜单的结构。代码是:

    第二步:隐藏li的默认样式

    因为看起来不是很好看,菜单通常都不需要li默认的圆点,我们给UL定义一个样式来消除这些圆点。

    当然,为了更好的控制整个菜单,我们把菜单放在一个div里。页面代码变成:

    CSS定义为:

    .test ul{list-style:none;}

    说明:“.test ul”表示我要定义的样式将作用在test的层里的ul标签上。

    现在的效果是没有圆点了:

    第三步:关键的浮动

    这里是菜单变成横向的关键,我们给li元素加上一个“float:left;”属性,让每个li浮动在前面一个li的左面。

    CSS定义为:

    .test li{float:left;}

    菜单变横向了。就这么简单!下面需要做的就是优化细节了。

    第四步:调整宽度

    菜单都挤在一起不好看怎么办?我们来调节li的宽度。

    在CSS中添加定义width:100px指定一个li的宽度是100px,当然你可以根据你的需要调整数值:

    .test li{float:left;width:100px;}

    效果是:

    如果我们同时定义外面div的宽度,li就会根据div的宽度自动换行,例如定义了div宽350px,6个li的总宽度是600px,一行排不下就自动变成两行:

    .test{width:350px;}

    第五步:设置基本链接效果

    接下来,我们通过CSS来设置链接的样式,分别定义:link、:visited、:hover的状态

    .test a:link{color:#666;background:#CCC;text-decoration:none;}

    .test a:visited{color:#666;text-decoration:underline;}

    .test a:hover{color:#FFF; font-weight:bold;text-decoration:underline;background:#F00;}

    第六步:将链接以块级元素显示

    有朋友问,菜单链接的背景色为什么没有填满整个li的宽度?恩,解决的方法很简单,在a的样式定义中增加display:block,使链接以块级元素显示。

    同时我们微调了如下细节:

    用text-align:center将菜单文字居中;

    用height:30px增加背景的高度;

    用margin-left:3px使每个菜单之间空3px距离;

    用line-height:30px;定义行高,使链接文字纵向居中;

    CSS定义象这样:

    .test a{display:block;text-align:center;height:30px;}

    .test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}

    这样就漂亮多了吧。

    第七步:定义背景图片

    我们通常都会在每个链接前加一个小图标,这样导航更清楚。CSS是采用定义li的背景图片来实现的:

    .test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}

    .test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}

    说明:“background:url(arrow_off.gif) #CCC no-repeat 5px 12px;”这句代码是一个CSS缩写,表示背景图片是arrow_off.gif;背景颜色

    更多相关内容
  • 本节学习HTML中的列表元素,列表形式在网站设计中占有比较大的比重,显示信息非常整齐直观,便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。 用于组织数据的列表 ...顾名思义,无序列表
  • 主要介绍了html无序列表标签和有序列表标签使用示例,需要的朋友可以参考下
  • 利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数其进行排序后再次输出。其中使用到的jQuery函数有ready()、get()、text()、each()、append()和JavaScript...
  • 利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数其进行排序后再次输出。其中使用到的jQuery函数有ready()、get()、text()、each()、append()和JavaScript...
  • 本篇介绍服务器端ASP.NET批量操作基于原生html标签的无序列表的三种方法。 方法一,将li元素做成html控件,加上id,用FindControl方法。 aspx代码: 代码如下: <form id=”form1″ runat=”server”> <ul> ”...
  • 本文实例讲述了CSS无序列表创建的标准菜单效果代码。分享给大家供大家参考。具体如下: 这是一款用LI无序列表创建的标准CSS菜单,这是国外一个网站的CSS制作教程,这里重新整理了一下,去除了广告代码,兼容性不错,...
  • 用于组织数据的列表 ...在后面的CSS样式学习中将大量使用到列表元素的高级作用。  4.4.1 列表的结构组成 ...大部分网页应用中的列表均采用无序列表,其列表标签采用<ul></ul>,编写方法如下:  <li
  • 下面小编就为大家带来一篇浅谈html有序列表、无序列表与定义列表。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 大家看到了其本形式与无序列表的一样,只是在外围标签上名称不同。无序是UL,有序就变成OL了。所不同的是有序列表将会有比无序更多的标签属性。  在网站制作的案例中,大部分讲到了CSS无序列表的应用,而jb51.net更...
  • 三行的纯CSS网站导航栏菜单,改改风格,让大家感到新鲜一点,其它主要还是使用了Li列表,整体布局简洁,美观大方,适合大部分网站使用,颜色和菜单空隙可随意调节,希望大家喜欢。
  • HTML教程:无序列表

    2020-12-12 05:10:51
    当然了段落不能当作万用膏药一样倒处使用,不过相信大家也都知道现在“DIV”这个标签的作用已经被扩大化了(POPO曾有一篇文章《不是万能膏药》),更已经被一些人拿来与CSS一并说事。这里呢还是要重新强调一次:DIV...
  • html基本框架和无序列表有序列表练习、a标签和href练习实验报告
  • 无序列表进行布局,然后用块级元素div进行结合使用 ul { list-style: none } * { margin: 0; padding: 0; } div { width: 1150px; height: 400px; margin: 50px auto; border: 1px solid red; overfl
  • 有这样的一个需求,内容为一个无序列表,想让列表的项目符号必须采用缩略图,本文使用CSS方法进行布局实现,大家可以参考下
  • 无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点。在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有(/*内容注释部分*/)list-style-...
  • HTML标签的基本使用无序列表、有序列表、定义列表

    无序列表、有序列表、定义列表

    列表是由一组标签组成

    一、无序列表

    没有顺序的列表结构

    ul和li标签组成

    ul:unordered list(无序列表)

    li:list item(列表项)

        <h2>四大名著</h2>
        <ul>
            <li>水浒传</li>
            <li>西游记</li>
            <li>红楼梦</li>
            <li>三国演义</li>
        </ul>
    

    HHQ0iR.png

    ul内部只能嵌套li,li内部可以嵌套任何标签(包括ul)

       <h2>四大名著</h2>
        <ul>
            <li>
                <h1>水浒传</h1>
                <ul>
                    <li>宋江</li>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                    </ul>
                    <li>卢俊义</li>
                    <li>李逵</li>
                </ul>
    
            </li>
    
           
    
            <li>
                <h1>西游记</h1>
    
            <ul>
                <li>孙悟空</li>
                <li>猪八戒</li>
            </ul>
            </li>
    
            <li>红楼梦</li>
            <li>三国演义</li>
        </ul>
    

    HHlu6K.png

    二、有序列表

    有序的列表结构

    ol和li组成

    ol:ordered list

    li:list item

    ol内部只能嵌套li,li内部可以嵌套任何标签(包括ol)

        <h2>三年级1班</h2>
        <ol>
            <li>Tom</li>
            <li>Ben</li>
            <li>Jimmy</li>
        </ol>
    

    HHlXnO.png

    实际使用

    HH1M3q.png

    HH1DKK.png

    三、定义列表

    定义一个标题和内容自定义的列表

    dl、dt、dd

    dl:definition list 创建自定义列表结构

    dt:definition term 定义主题,表示一个列表的主题

    dd:definition description 定义解释项,对于主题的解释

    dl内部只能放dt和dd,dt和dd同级

    每个dt主题后可以跟多个dd,dd解释的是上一个最近的dt

        <dl>
            <dt>周杰伦</dt>
            <dd></dd>
            <dd>歌手 </dd>
            <dd>作品:稻香、告白气球等</dd>
        </dl>
    

    HHYsNF.png

    实际应用中会用到多个dl

    	<dl>
            <dt>周杰伦</dt>
            <dd>
                <p>作品:稻香、一路向北等</p>
                <p>性别:男</p>
                <p>职业:歌手</p>
            </dd>
        </dl>
        <dl>
            <dt>薛之谦</dt>
            <dd>
                <p>作品:丑八怪等</p>
                <p>性别:男</p>
                <p>职业:歌手</p>
            </dd>
    
     	</dl>
    

    HHY8AS.png

    注释

    <!--  -->
    
    <!-- <h2>三年级1班</h2> -->
    

    快捷键 ctrl + /

    展开全文
  • 如何使用 CSS 自定义无序列表样式

    千次阅读 2022-05-20 09:36:53
    前段时间实现了个自定义无序列表样式,踩了一些坑,和大家说说。设计师说我们这个,列表项样式要优化一下,太丑了,这个原点要大一点。默认的无序列表样式是这样的。<style>   ul {  &...

    大家好,我是前端西瓜哥。

    前段时间实现了个自定义无序列表样式,踩了一些坑,和大家说说。

    设计师说我们这个,列表项样式要优化一下,太丑了,这个原点要大一点

    默认的无序列表样式是这样的。

    <style>
      ul {
        width: 200px;
        border: 1px solid #555;
        font-size: 13px;
        line-height: 20px;
        color: #2362d6;
      }
    </style>
    
    <ul>
      <li>我是第一行。</li>
      <li>你是第二行你是第二行你是第二行你是第二行你是第二行</li>
      <li>三</li>
    </ul>
    
    

    图片

    虽然觉得有点花里胡哨,但我还是去研究了,看看怎么给圆点变大一点。

    ::before

    我们先将 li 原有的圆点去掉,通过给 li 加上 list-style: none; 的方式。

    然后用 ::before 给 li 前面创建一个伪元素,加上圆点字符。

    ul {
      /* ... */
      /* 稍微调整一下 ul 的左边距 */
      padding-inline-start: 20px;
    }
    li {
      list-style: none;
    }
    li::before {
      /* 这里加两个空白符作为边距 */
      /* 你也可以用 margin-right */
      content: "\2022  ";
      font-size: 22px;
    }
    
    

    这里我给 content 的值末尾加了两个空格符,来实现右边距效果。你也可以用 margin-right 来做,更正规一些。

    注意点:这里 content 的值最好用转义字符,不要用原字符,因为我发现在某些浏览器会乱码

    图片

    圆点没和文字水平居中对齐,我们用 transform 微调一下位置。

    需要注意的一点是,transform 对行内元素(display: inline)无效。而 ::before 伪元素默认为行内元素,需要手动改为 inline-block。

    完整写法为:

    ul {
      width: 200px;
      border: 1px solid #555;
      font-size: 13px;
      line-height: 20px;
      color: #2362d6;
      padding-inline-start: 20px;
    }
    li {
      list-style: none;
    }
    li::before {
      content: "\2022  ";
      display: inline-block;
      font-size: 22px;
      transform: translateY(3px);
    }
    
    

    图片

    设计师很满意地离开了。

    但过了几天,他发现有些不对劲,又跑过来和我说:不对,这个换行的文字起始位置不应该在圆点下边,而是应该和第一行文字左侧对齐,也就是应该像下面这样。

    图片

    ::before + 绝对定位

    问题不大,马上改。

    将 ::before 伪元素设置为绝对定位,让圆点脱离正常文档流。这次我们用 left 来调整位置。

    完整的写法为:

    ul {
      width: 200px;
      border: 1px solid #555;
      font-size: 13px;
      line-height: 20px;
      color: #2362d6;
      padding-inline-start: 40px;
    }
    li {
      position: relative;
      list-style: none;
    }
    li::before {
      content: "\2022  ";
      position: absolute;
      left: -11px;
      display: inline-block;
      font-size: 22px;
    }
    
    

    效果很完美,设计师很满意地离开了。

    图片

    list-style-type 和 ::marker

    如果你不需要修改圆点大小,而是想替换为其他符号,还用一种写法是使用 list-style-type 或 ::marker。

    list-style-type 用在 ul 元素上。

    ul {
      width: 200px;
      border: 1px solid #555;
      font-size: 13px;
      line-height: 20px;
      color: #2362d6;
      padding-inline-start: 20px;
      list-style-type: "\2708"; /* 飞机符号 */
    }
    
    

    然后我们看到原点变成了飞机字符:

    图片

    ::marker 则是用在 li 元素上,可以让不同的 li 使用不用样式。

    li::marker {
      content: "\2708";
    }
    
    

    更具体的写法这里就不展开讲了,读者可以自行阅读官方文档。

    但这种方案在修改圆点大小后,无法使用 transform 进行位置的调整,所以我没有用这个。

    结尾

    小小的无序列表自定义样式也挺多门道的,希望对你有所帮助。

    我是前端西瓜哥,分享前端知识,欢迎关注我。

    展开全文
  • 主要给大家介绍了任意Json如何转成无序列表,文中给出了详细的示例代码,相信大家的理解和学习具有一定的参考借鉴价值,有需要的朋友们下面跟着小编来一起学习学习吧。
  • 无序列表的介绍

    2022-06-08 19:15:39
    另一种是无序列表。前者使用编号来记录项目的顺序,而后者使用项目符号来标记无序的项目。   所谓有序列表,是指按照数字或字母顺序排列列表项目,如图1.1所示:   所谓无序列表,是指以全●、○、▽、▲等开头...

    一.无序列表标签

    1.无序列表介绍

      列表分为两种类型:一种是有序列表;另一种是无序列表。前者使用编号来记录项目的顺序,而后者使用项目符号来标记无序的项目。
      所谓有序列表,是指按照数字或字母顺序排列列表项目,如图1.1所示:
    在这里插入图片描述
      所谓无序列表,是指以全●、○、▽、▲等开头的,没有顺序的列表项目,如图1.2所示:
    在这里插入图片描述

    2.无序列表标签的使用

      列表主要标签如下:
    列表标签展示图5.2

    标签描述
    <ul>无序列表
    <ol>有序列表
    <dir>目标列表
    <dl>定义列表
    <menu>菜单列表
    <dt> 、<dd>定义列表的标签
    <li>列表项目的标签

    二.无序列表

      在有序列表中,各个列表项之间没有顺序级别之分,它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<dir>、<dt> 、<menu>、<li>几个标签和type属性。

    2.无序列表的标签

      无序列表的特征在于提供一种不编号的列表方式,而在每个项目文字之间以符号作为分项标识。
      具体语法如下:

    <ul>
    	<li>第一项</li>
    	<li>第二项</li>
    	......
    </ul>
    

      在该语法中,使用<ul></ul>标签来表示这个无序列表的开始和结束,而

    • 标签则表示这是一个列表项的开始。在一个无序列表中可以包含多个列表项。
        下面使用无序列表定义词典的模式分类,新建一个H5文件,文件的具体代码如下:
    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>无序列表</title>
      </head>
      <body>
          <font size="+3" color="#0066ff">编程字典的模式分类</font>
          <br>
          <br>
          <ul>
              <li>入门模式</li>
              <li>初级模式</li>
              <li>中级模式</li>
              <li>高级模式</li>
          </ul>
      </body>
      </html>
      

      保存并运行这段代码,可以看到窗口中建立了一个无序列表,该列表中共包含四个列表项,如图2.3所示:
      在这里插入图片描述

      3.无序列表的属性

        在默认情况下,无序列表的项目符号是是●,而通过type参数可以调整无序列表的项目符号,避免项目符号的单调。
        具体语法如下:

      <ul type="符号类型">
      	<li>第一项</li>
      	<li>第二项</li>
      	......
      </ul>
      

        在该语法中,无序列表的其他属性不变,type属性则决定了列表项开始的符号。它可以设置的值有三个,如图3.1所示。其中,disc是默认的类型值。

      类型值列表项目的符号
      disc
      circle
      square

        新建一个h5文件,在文件的<body>标签中输入代码,具体代码如下:

      <!doctype html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>无序列表属性</title>
          <style>
              *{margin:0;padding:0}
              body{font-family:"微软雅黑";font-size:16px;}
              .box{width:100%;max-width:1150px;background:#f5f5f5;margin:50px auto}
              #ml0{margin-left:0px;}
              .box .item{width:220px;height:320px;background:#fff;float:left;margin-left:10px;position:relative;overflow:hidden;}
              .box .item p{text-align:center;padding:5px;}
              .box .item p a{color:#333;text-decoration:none;}
              .box .item .eval{background:#FF6700;padding:10px 30px;position:absolute;bottom:-68px;left:0px}
              .box .item:hover .eval{bottom:0px;transition: bottom 0.3s ease; color:#fff;}
              img{width:220px;height:200px;}
          </style>
      </head>
      <body>
      <div class="box">
          <ul class="item">
              <li><a href="#"><img src='images/荣耀1.jpg'/></a></li>
              <li><p><a href="#">华为官网手机</a></p></li>
              <li class="eval">超好用,比我用过的耳机都好,声音简直是从脑子里发出的</li>
          </ul>
          <ul class="item">
              <li><a href="#"><img src='images/荣耀2.jpg'/></a></li>
              <li><p><a href="#">华为官网手机</a></p></li>
              <li class="eval">超好用,比我用过的耳机都好,声音简直是从脑子里发出的</li>
          </ul>
          <ul class="item">
              <li><a href="#"><img src='images/荣耀3.jpg'/></a></li>
              <li><p><a href="#">华为官网手机</a></p></li>
              <li class="eval">超好用,比我用过的耳机都好,声音简直是从脑子里发出的</li>
          </ul>
          <ul class="item">
              <li><a href="#"><img src='images/荣耀4.jpg'/></a></li>
              <li><p><a href="#">华为官网手机</a></p></li>
              <li class="eval">超好用,比我用过的耳机都好,声音简直是从脑子里发出的</li>
          </ul>
          <ul class="item">
              <li><a href="#"><img src='images/荣耀5.jpg'/></a></li>
              <li><p><a href="#">华为官网手机</a></p></li>
              <li class="eval">超好用,比我用过的耳机都好,声音简直是从脑子里发出的</li>
          </ul>
          <div class=""></div>
      </div>
      </body>
      </html>
      

      代码如图所示:运行这段代码,可以看到项目符号属性可以设置为none,此时项目符号就不显示出来了。
      在这里插入图片描述
      当然,无序列表的类型定义也可以直接在<li>标签中,其语法是<li type=“项目符号”>,用于对单个项目进行定义,其代码如下所示:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>无序列表</title>
      </head>
      <body>
          <font size="+3" color="#0066ff">编程字典的模式分类</font>
          <br>
          <br>
          <ul>
              <li type="circle">入门模式</li>
              <li type="disc">初级模式</li>
              <li type="square">中级模式</li>
              <li>高级模式</li>
          </ul>
      </body>
      </html>
      

        由代码我们可以看到,在li标签中,我们当选择默认时,我们可直接省略disc的类型描述。如果在实际开发过程中,我们不需要无序列表的项目符号,则只需要将无序列表的列表项目的序号类型直接设为none即可,也可以在无序列表中的list-style属性设置为none。
      在这里插入图片描述

    展开全文
  • 在HTML中有三种不同的列表的使用,分别是有序列表、无序列表和自定义列表,那么它们是怎么使用的呢?
  • 使用CSS将无序列表的li元素居中

    千次阅读 2021-08-05 01:29:27
    } 答案 4 :(得分:0) 如果您其他选项没有运气,可以使用: li { display:block; width: 200px; margin: 0 auto; } 这将确保它们始终位于可用空间的中间。 答案 5 :(得分:0) 您也可能想要删除 .thumb li { float:...
  • markdown-sort-list软件包 按字母顺序一棵markdown无序列表树进行排序。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 224,026
精华内容 89,610
热门标签
关键字:

对无序列表使用