济南哪家做网站,入境游旅游网站建设,做期货应关注什么网站,苏州建设职业培训中心注意#xff1a;手机#xff08;APP#xff09;打开#xff0c;内容显示更佳#xff0c;不会的私聊博主即可 想要拿代码或加入学习计划#xff08;** 博主会监督你并且教你写文章 **#xff09;的拉到最下面#xff08;PC端Web打开#xff09;加博主即可#xff0c;目…注意手机APP打开内容显示更佳不会的私聊博主即可 想要拿代码或加入学习计划** 博主会监督你并且教你写文章 **的拉到最下面PC端Web打开加博主即可目录也在最下面。 参加1_bit博主前端学习计划发文时在头部记得加上本专栏链接示例如下 我已加入 1_bit 博主的免费前端 站起来 学习计划专栏链接https://blog.csdn.net/a757291228/category_11609526.html
一、列表的使用
1.1 无序列表
1_bit还记得之前出现的列表吗
小媛就是一列一列的有不同分享的 ul 元素
1_bit对的之前并没有详细说明这个 ul 元素本节开始将会较为详细的对 li 元素进行说明。
小媛好勒。
1_bit之前咱们已经学过了列表的基本使用一个列表的基本形式如下。
ulli第1项/lili第2项/lili第3项/li
/ul1_bit其中 ul 表示这个是一个无序列表其中 li 是其中的每一个项每一个项有一个 li 的开始标签与结束标签并且由于这个列表是无序列表所以在显示时并没有在每一项内容中添加对应项的序号而是用原点代替。 小媛这个明白不过我想要问的是这个原点可以去掉吗感觉不是很好看。
1.2 列项符号
1_bit当然可以咱们可以在 ul 中添加对应的 type 属性type 属性可以控制 ul 标签中每一项的符号你可以选择 disc实心圆形、circle空心圆形、square实心正方形例如如下代码将会给出对应的示例。
ul typedisclidisc 实心圆形第1项/lilidisc 实心圆形第2项/lilidisc 实心圆形第3项/li
/ul
ul typecirclelicircle 空心圆形第1项/lilicircle 空心圆形第2项/lilicircle 空心圆形第3项/li
/ul
ul typesquarelisquare 实心正方形第1项/lilisquare 实心正方形第2项/lilisquare 实心正方形第3项/li
/ul1_bit对应的显示内容如下。 小媛正方形挺好看的不过我问的是是否可以去掉你走神了。
1_bit你想去掉直接给予 type 属性 为 none 就可以了例如如下示例。
ul typenonelinone 无项符号第1项/lilinone 无项符号第2项/lilinone 无项符号第3项/li
/ul1_bit成功了刚刚拿这个去尝试了问题不大。
1_bit当然你也可以为不同的 li 定义不同的项符号例如如下代码。
ul typenoneli typecirclecircle 空心圆形第1项/lilinone 无项符号第2项/lili typesquaresquare 实心正方形/li
/ul小媛哇原来可以这样明白了。
1.3 有序列表
1_bit那接下来咱们学习一下有序列表吧。刚刚学习的是 ul 无须列表咱们现在开始学习有序列表有序列表使用 ol 标签例如如下示例。
olli有序列表第1项/lili有序列表第2项/lili有序列表第3项/li
/ol1_bit此时在页面中将会使用默认需序号在每一列前进行显示。 小媛哇竟然还标序了。
1_bit对的这个标序的符号咱们可以使用不同的方式进行标序例如数字、大小写字母。
ol typeilitype 使用i开头 第1项/lilitype 使用i开头 第2项/lilitype 使用i开头 第3项/lilitype 使用i开头 第4项/lilitype 使用i开头 第5项/li
/ol
ol typeIlitype 使用I开头 第1项/lilitype 使用I开头 第2项/lilitype 使用I开头 第3项/lilitype 使用I开头 第4项/lilitype 使用I开头 第5项/li
/ol
ol typealitype 使用a开头 第1项/lilitype 使用a开头 第2项/lilitype 使用a开头 第3项/li
/ol
ol typeAlitype 使用A开头 第1项/lilitype 使用A开头 第2项/lilitype 使用A开头 第3项/li
/ol
ol type1litype 使用1开头 第1项/lilitype 使用1开头 第2项/lilitype 使用1开头 第3项/li
/ol小媛哇竟然可以这样明白了。
1_bit咱们还可以给予这个有序列表项的起始值例如我想从4 开始只需要给一个值给 start 属性即可例如如下所示。
ol typei start4li4 开始 type 使用i开头 第1项/lili4 开始 type 使用i开头 第2项/lili4 开始 type 使用i开头 第3项/lili4 开始 type 使用i开头 第4项/lili4 开始 type 使用i开头 第5项/li
/ol
ol typeI start7li7 开始 type 使用I开头 第1项/lili7 开始 type 使用I开头 第2项/lili7 开始 type 使用I开头 第3项/lili7 开始 type 使用I开头 第4项/lili7 开始 type 使用I开头 第5项/li
/ol
ol typea start3li3 开始 type 使用a开头 第1项/lili3 开始 type 使用a开头 第2项/lili3 开始 type 使用a开头 第3项/li
/ol小媛哇我第一次知道这些需要是长这样的明白了。
二、定义列表
1_bit接下来咱们学一个定义列表这个标签用于对某些名词进行定义也就是对某些名称解说说明。
小媛明白了。
1_bit咱们可以看看这个定义列表的使用方法。
dldt这是一个名词1/dtdd这是这个名词1的解释/dddt这是一个名词2/dtdd这是这个名词2的解释/dd
/dl1_bit在浏览器中演示如下。 小媛唔这个很简单直接使用就好了例如这样。
dldt个人计算机/dtdd个人计算机是指一种大小、价格和性能适用于个人使用的多用途计算机。台式机、笔记本电脑到小型笔记本电脑和平板电脑以及超级本等都属于个人计算机。/dddt二进制/dtdd二进制binary发现者莱布尼茨是在数学和数字电路中以2为基数的记数系统是以2为基数代表系统的二进位制/dd
/dl对的你也可以使用多个 dt或者多个 dd 都可以例如这样。
dldt个人计算机/dtdt计算机/dtdd个人计算机是指一种大小、价格和性能适用于个人使用的多用途计算机。台式机、笔记本电脑到小型笔记本电脑和平板电脑以及超级本等都属于个人计算机。/dddd就是计算机/dddt二进制/dtdt2进制/dtdd二进制binary发现者莱布尼茨是在数学和数字电路中以2为基数的记数系统是以2为基数代表系统的二进位制/dd
/dl1_bit显示如下。 小媛明白了。
三、菜单列表
1_bit在 html 中菜单也是属于列表并且这些列表都可以使用 css 转换为菜单的样子当然 css 后面才会学到在此并不需要了解此处只是做个菜单列表介绍。
小媛那菜单列表用什么标签呢
1_bit当然是 menu 标签了例如如下示例。
menuli菜单1/lili菜单2/lili菜单3/li
/menu小媛明白了。
四、列表嵌套使用
1_bit在 html 中大多数标签是可以互相嵌套使用的例如你想在列表中嵌入列表或者其他元素改变其显示这都是可以的。
小媛哇列表也可以嵌入
1_bit是这样的咱们现在把之前的所学的内容都杂乱嵌入一下你可以看看效果。
menuli菜单1/lili菜单2/lili菜单3/li/menudldt个人计算机/dtdtspan stylecolor: blue;计算机/span/dtdd个人计算机是指一种大小、价格和性能适用于个人使用的多用途计算机。台式机、笔记本电脑到小型笔记本电脑和平板电脑以及超级本等都属于个人计算机。/dddd就是计算机ol typei start4li4 开始 type 使用i开头 第1项/lili4 开始 type 使用i开头 第2项/lili4 开始 type 使用i开头 第3项/lili4 开始 type 使用i开头 第4项/lili4 开始 type 使用i开头 第5项/li/ol/dddt二进制/dtdt2进制/dtdd二进制binary发现者莱布尼茨是在数学和数字电路中以2为基数的记数系统是以2为基数代表系统的二进位制/dd/dlol typeI start7li7 开始 type 使用I开头 第1项/lili7 开始 type 使用I开头 第2项/liol typea start3li3 开始 type 使用a开头 第1项/lili3 开始 type 使用a开头 第2项/lili3 开始 type 使用a开头 第3项/li/olli7 开始 type 使用I开头 第3项/lili7 开始 type 使用I开头 第4项/lili7 开始 type 使用I开头 第5项/li/olol typeAlitype 使用A开头 第1项/lilitype 使用A开头 第2项ol type1litype 使用1开头 第1项/lilitype 使用1开头 第2项/lilitype 使用1开头 第3项ul typenoneli typecirclecircle 空心圆形第1项/lilinone 无项符号第2项/lili typesquaresquare 实心正方形ul typecirclelicircle 空心圆形第1项/lilicircle 空心圆形第2项/lilicircle 空心圆形第3项/li/ul/li/ul/li/ol/lilitype 使用A开头 第3项/li/olul typesquarelisquare 实心正方形第1项/lilisquare 实心正方形第2项/lilisquare 实心正方形第3项/li/ul小媛哇可以这样。
目录
【前端就业课 第一阶段】HTML5 零基础到实战十JavaScript基础一篇入门 【前端就业课 第一阶段】HTML5 零基础到实战九列表 【前端就业课 第一阶段】HTML5 零基础到实战八表单详解 【前端就业课 第一阶段】HTML5 零基础到实战七文字及图片样式 【前端就业课 第一阶段】HTML5 零基础到实战六表格详解 【前端就业课 第一阶段】HTML5 零基础到实战五基础元素 【前端就业课 第一阶段】HTML5 零基础到实战四伪类与伪元素 【前端就业课 第一阶段】HTML5 零基础到实战三一篇文CSS基础入门 【前端就业课 第一阶段】HTML5 零基础到实战二超链接 【前端就业课 第一阶段】HTML5 零基础到实战一基础代码结构详解
