我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子

最新推荐文章于 2024-07-02 14:01:47 发布
最新推荐文章于 2024-07-02 14:01:47 发布
阅读量4.2k 收藏 2
点赞数
分类专栏： Html总结 文章标签： Html
       无序列表用的最多，下图是淘宝导航栏的截图，用的就是无序列表，后面我会把这个当做例子讲解。


                       

       下图是自定义列表，也是淘宝的，不是我给淘宝做广告，而是淘宝太有名了，我拿来给大家研究一下。


       吃水不忘挖井人，w3school.com.cn给我们初学者提供了太多的免费资料，在此，免费为她宣传一下，下面这个有序列表的截图正式从该网站例子中得来，本文章的例子也将采用该网站的例子。

 
       一、下面开讲，从无序列表开始。

       无序列表的英文全称叫unorder list，不能粗浅的理解为没有顺序的列表，它其实还是有顺序的，把哪个选项写在前面，它就会在前面显示。


       这里的“无序”指的是没用数字或字母等来标记，不是像1,2,3或a,b,c这样的显示，而是前面增加一个圆点来表示。


       不过，大家一般也讨厌这些圆点，加上这些圆点会很丑，因此，大家会通过设置样式把它去掉。


       下面先看一个简单的例子：

先看图
 


代码如下：
 
<span style="font-family:Microsoft YaHei;font-size:14px;"><html>


<body>


<h4>程序员喜欢的习惯：</h4>


<ul >


 <li>讲代码</li>


 <li>写博客</li>


 <li>看女神</li>


 <li>嗑瓜子</li>


</ul>


</body>


</html>
</span>

知识讲解：
1，
无序列表使用一对闭合的标签表示，<ul></ul>。内部的一项使用 <li>内容</li>来表示。

2，
可以看到各项之前加了一个圆点，可以通过ul标签的type属性来修改这个修饰符。


(1)    <ul type="disc"> 显示为一个圆点，是默认值。


(2)    <ul type="circle">显示为一个空心圆圈。如图：


(3)    <ul type="square">显示为一个实体正方形。如图：

3，
最常见的就是使用样式直接把修饰符干掉。修改方式如下：


<ul style="list-style-type:none;" >


效果图如下：


       上面的例子，把无序列表的基本知识点讲完了。下面看淘宝导航栏的例子。


效果图如下：



源代码如下：
 
<span style="font-family:Microsoft YaHei;font-size:14px;"><html>


<head>


<style type="text/css">


.nav{


       height:34px;


       border-bottom:2px solid #f40;


       overflow:hidden;


       *zoom:1


}


 


.nav li{


       display:inline;


       float:left;


       font-weight:700


}


 


.nav .nav-bd,.nav .nav-hd{


       margin-top:4px;


       height:33px


}


 


.nav .nav-bd li,.nav .nav-hd li{


       position:relative


}


 


.nav .nav-bd a,.nav .nav-hd a{


       height:28px;


       line-height:28px;


       overflow:hidden;


       *zoom:1;


       display:inline;


       float:left


}


 


.nav .nav-bd a:hover,.nav .nav-hd a:hover{


       background:#f4f4f4


}


 


.nav .nav-bd .nav-ad,.nav .nav-hd .nav-ad{


       position:absolute;


       top:0;


       left:0;


       padding:0;


       height:33px


}


 


.nav .nav-bd .nav-ad:hover,.nav .nav-hd .nav-ad:hover{


       background:0 0


}


 


.nav .nav-bd .nav-ad img,.nav .nav-hd .nav-ad img{


       height:33px


}


 


.nav .nav-hd{


       display:inline;


       float:left


}


 


.nav .nav-hd li{


       margin:0 10px;


       text-align:center;


       font-size:16px


}


 


.nav .nav-hd li a{


       padding:0 3px;


       width:52px;


       color:#f40


}


 


</style>


 


</head>


<body>


<div class="nav">


<ul class="nav-hd"> 


<li>


       <a href="http://www.tmall.com/?spm=1.7281509.a214dau.1">天猫</a>


</li>


 


<li>


       <a href="http://ju.taobao.com/?spm=1.7281509.a214dau.2">聚划算</a>


</li>        


 


<li>


       <a href="http://chaoshi.tmall.com/?spm=1.7281509.a214dau.3">超市</a>


</li> 


  


</ul>


 


</div>


</body>


</html>
</span>


说明：
1，
淘宝的导航栏是由多个无序列表ul组成，这里摘出来第一个无序列表来分析。
2，
在标签<style type="text/css"></style>内部的代码都是我从淘宝“偷”出来的样式源代码，这个等以后给你讲css的时候再说，不用看这部分代码，它的作用就是给无序列表整整容。
3，
可以看到标签<div class="nav">，div标签通常用来布局，增加一个class(类名称)也是方便使用样式来修饰。
4，
无序列表<ul class="nav-hd">，同样增加了class，就是方便使用样式，不用管，等讲样式的时候在说。
5，
这个无序列表<li>内部是超链接标签a，实际上，很多菜单栏都是通过这种方式来做的，二级菜单还会嵌套一个ul无序标签，li的内部放一个a标签，当用户单击某个选项，就可以进入href指定的网页，这就实现了菜单的功能。

       二、自定义列表

       先看例子效果图：


源代码如下：
 
<span style="font-family:Microsoft YaHei;font-size:14px;"><html>


<body>


<h2>一个定义列表：</h2>


<dl>


   <dt>计算机</dt>


              <dd>用来计算的仪器 ... ...</dd>


   <dt>显示器</dt>


              <dd>以视觉方式显示信息的装置 ... ...</dd>


</dl>


</body>


</html>

 </span>

知识讲解：
1，
<dl> 标签全称是definition list，代表“自定义列表”。
2，
<dt> 标签全称是definition term，代表 “自定义项”。一个自定义列表dl内部可以包括多个自定义项dt。
3，
<dd> 标签的全称是definition description，代表“自定义描述”。一个自定义项dt后面跟一个自定义描述dd。
4，
自定义列表，只需要记住3个标签就Ok了，都是d开头，definition就是自定义的意思。

<dl>后面的l代表list，列表的意思。

<dt>后面的t代表term，“项目”的意思。

<dd>后面的d代表description，“描述”的意思。

下面来看淘宝自定义列表的例子。

效果图如下：


 

源代码如下：
 
<span style="font-family:Microsoft YaHei;font-size:14px;"><html>


<head>


<style type="text/css">


 


 


.side .discover{


       padding:20px 14px;


      


       border:1px solid #e8e8e8


}


 


.side .discover dt{


       margin-bottom:10px


}


 


.side .discover dt s{


       text-indent:-3000px;


       width:120px;


       height:18px;


       *display:block


}


 


.side .content-wrapper{


       height:1068px;


       background-color:#fff


}


 


.side .change-wrapper{


       padding:8px 0;


       background-color:#fff;


       cursor:pointer;


       color:#737373;


       border:1px solid #e8e8e8;


       border-top:0


}


 


.side .change-wrapper:hover{


       color:#f40


}


 


.side .change-wrapper .s-change-gray{


       margin-left:86px;


       width:15px;


       height:17px;


       margin-right:7px


}


 


 


 


.service-side{


       width:190px


}


 


.tb-service{


       width:190px;


       box-shadow:2px 2px 0 #eeeef0;


       background-color:#fff;


       position:relative


}


 


.tb-service h2{


       background:#f40;


       height:35px


}


 


.tb-service h2 s{


       margin:10px 14px;


       height:16px;


       width:100px;


       text-indent:-2000px;


       *display:block;


       *overflow:hidden


}


 


.tb-service .service-bd{


       height:454px;


       overflow-y:hidden;


       border:1px solid #ff4401;


       border-top:0;


       padding:0 9px


}


 


.tb-service .service-bd dt{


       padding-top:10px;


       font-size:14px;


       font-weight:700;


       line-height:19px;


       padding-bottom:1px


}


 


.tb-service .service-bd dt s{


       width:25px;


       height:21px;


       margin-right:7px;


       margin-top:-3px;


       *text-indent:0


}


 


.tb-service .service-bd dd{


       border-bottom:1px solid #e6e7eb;


       padding-bottom:10px;


       padding-left:5px;


       line-height:22px;


       *padding-top:8px


}


 


.tb-service .service-bd dd a{


       width:64px;


       display:-moz-inline-stack;


       display:inline-block;


       vertical-align:middle;


       *vertical-align:auto;


       zoom:1;


       *display:inline;


       position:relative


}


 


.tb-service .service-bd dd .c-2{


       width:54px


}


 


.tb-service .service-bd dd .c-3{


       width:38px


}


 


.tb-service .service-bd dd .c-4{


       width:29px


}


 


.tb-service .service-bd .last-dd{


       border:0;


       margin-top:10px \9


}


 


.tb-service .more{


       position:relative;


       position:absolute;


       top:45px;


       right:9px;


       margin-right:0;


       padding:0 10px 0 5px;


       border:1px solid #e8e8e8;


       background:#fff;


       margin-top:-3px \9;


       padding-top:3px \9


}


 


.tb-service .more em,.tb-service .more span{


       position:absolute;


       top:0;


       left:0;


       width:0;


       height:0;


       border-color:rgba(255,255,255,0);


       border-color:transparent\0;


       *border-color:transparent;


       _border-color:tomato;


       _filter:chroma(color=tomato);


       border-style:solid;


       overflow:hidden;


       *zoom:1;


       border-width:3px 0 3px 3px


}


 


.tb-service .more em{


       left:2px;


       border-left-color:#dadada


}


 


.tb-service .more span{


       border-left-color:#fff


}


 


.tb-service .more i{


       position:absolute;


       top:6px;


       left:30px


}


 


.tb-service .more i em,.tb-service .more i span{


       overflow:visible


}


 


.tb-service .more:hover{


       color:#fff;


       border-color:#f40;


       background:#f40


}


 


.tb-service .more:hover em{


       border-left-color:#fff


}


 


.tb-service .more:hover span{


       border-left-color:#f40


}


 


 


</style>


 


</head>


<body>


 


<div class="side service-side">


<div class="tb-service">


 


<dl class="service-bd">


<dt>


       <s class="fpicon s-service-theme"></s>主题市场


</dt>


<dd data-spm="1997517385">


       <a href="http://nvren.taobao.com/?spm=1.7275165.a214d7z.1" data-spm="d2" class="">淘宝女人   </a>


<a href="http://www.taobao.com/market/sport/citiao/yundongpai.php?spm=1.7275165.a214d7z.2" data-spm="d12" class=" c-2 ">运动派   </a>           


<a href="http://qinglv.taobao.com/?spm=1.7275165.a214d7z.3" data-spm="d3" class=" c-3 ">情侣   </a>           


<a href="http://nanren.taobao.com/?spm=1.7275165.a214d7z.4" data-spm="d1" class="">淘宝男人   </a>           


<a href="http://www.taobao.com/market/baobao/2014/index.php?spm=1.7275165.a214d7z.5" data-spm="d5" class=" c-2 ">孕婴童   </a>           


<a href="http://www.taobao.com/market/home/2014/index.php?spm=1.7275165.a214d7z.6" data-spm="d18" class=" c-3 ">家居   </a>           


<a href="http://www.taobao.com/market/mei/index.php?spm=1.7275165.a214d7z.7" data-spm="d10" class="">美容护肤   </a>           


<a href="http://zln.taobao.com/?spm=1.7275165.a214d7z.8" data-spm="d6" class=" c-2 ">中老年   </a>            


<a href="http://www.taobao.com/market/foodindex.php?spm=1.7275165.a214d7z.9" data-spm="d14" class=" c-3 ">美食   </a>           


<a href="http://jiehun.taobao.com/?spm=1.7275165.a214d7z.10" data-spm="d4" class="">美嫁新娘   </a>           


<a href="http://www.taobao.com/market/car/index.php?spm=1.7275165.a214d7z.11" data-spm="d17" class=" c-2 ">有车族   </a>           


<a href="http://www.taobao.com/market/jia/2014index.php?spm=1.7275165.a214d7z.12" data-spm="d19" class=" c-3 ">装修   </a>            


<a href="http://www.taobao.com/market/3c/home.php?spm=1.7275165.a214d7z.13" data-spm="d8" class="">手机数码   </a>           


<a href="http://shenghuo.taobao.com/?spm=1.7275165.a214d7z.14" data-spm="d20" class=" c-2 ">生活家   </a>           


<a href="http://game.taobao.com/?spm=1.7275165.a214d7z.15" data-spm="d13" class=" c-3 ">游戏   </a>           


                  


</dd>           


</dl>


 


</div>


</div>


</body>


</html>

 
</span>

说明：
1，
样式没有“偷”完整，正常的应该是3个a标签为一行的。感兴趣的童鞋，可以自己偷偷看。
2，
这里的<dt>内部先是一个删除线标签<s>(就是在文字中间加一条线)，后面是文字“主题市场”。
3，
< dd>标签内部就是一些超链接标签a组成。


三、有序列表

例子效果图如下：


 


源代码如下：

 
<span style="font-family:Microsoft YaHei;font-size:14px;"><!DOCTYPE html>


<html>


<body>


<ol>


  <li>咖啡</li>


  <li>牛奶</li>


  <li>茶</li>


</ol>


 


<ol start="50">


  <li>咖啡</li>


  <li>牛奶</li>


  <li>茶</li>


</ol>


</body>


</html></span>

知识讲解：

1，
<ol>的英文为order list，意思是“有序列表”，默认在每项前面显示1,2,3…


<ol type="A">：在每项前面显示A，B，C…


<ol type="a">：在每项前面显示a，b，c…


<ol type="I">：在每项前面显示I，II，III…


不过这些都不多用。


2，
第二个有序列表ol增加了一个属性，<ol start="50">，这样就指定了起始值从50开始。

3，
每项使用<li></li>标签来表示。内部是显示内容。
LisenYang
关注
专栏目录
Html结构解析
weixin_30527143的博客
07-10 2749
一、html文档树状图结构 　　1）html树状图 2）html代码解释树形图 <!DOCTYPE html> <!--声明--> <html lang="en"> <!--html开始--> <head> <!--头部开始--> &lt...
Python学习笔记-基础篇
cy2lyf的博客
09-07 2870
python学习笔记-基础篇
生日祝福,送女友(html5+css，jq，移动端)
11-19
生日祝福,送女友(html5+css，jq，移动端)
我教女朋友学编程html系列(5) html中table的用法和例子
weixin_30399797的博客
07-23 108
　　 　　女朋友不是学计算机的，但是现在从事计算机行业，做技术支持，她想学习编程，因此我打算每天教她一点点，日积月累，带她学习编程，如果其他初学者感兴趣，可以跟着学。 　　为了将table介绍的简单、生动，具有实战性，我花了3个半小时，写了5个列子，把table的一些重点知识讲了一下，直接看代码吧，一边看一边跟着敲，多动手练习。 1，边框不重叠的3行3列表格 <html...
HTML 自定义列表
最新发布
odfs3123的博客
07-02 585
标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。<dl>
HFun.快速开发平台（二）=》自定义列表实例
weixin_34260991的博客
02-26 138
　　应用系统中数据列表的展现是开发内容之一，实现的方式基本是通过编号具体的访问列表页实现，通过检索条件进行数据源的获取，列字段的描述，还可能会有检索条件的实现，列表数据的导出等功能。 　　为了将重复工作进行简化，同时为了实现多个开发人员编写同样风格的程序，降低应用系统的后期运维成本，HFun.开发平台中将列表的实现进行抽象，实现统一的列表对象，通过统一的访问页面，传递相应的参数，系统进行数据源的...
html无序站点,html有序无序定义列表详解（案例介绍）
weixin_42133899的博客
05-31 317
在前面小编已经把html中有序列表、无序列表及定义列表通过单独案例的方式进行讲解，而今天我们来绘制一个将有序无序和自定义结合在一起的案例，方便大家以后在实习过程能运用自如html列表。先来看看效果展示：1、无序列表无序列表是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于 标签。每个列表项始于 。2、有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列...
无序列表
初学者
10-11 631
type=circle时无序列表: 香蕉 苹果 大鸭梨 type=disc时的无序列表: 榴莲 石榴 葡萄皮 type=square时的无序列表: 李佳乐 最美 哈哈哈
Python基础（学习笔记）
qq_51399325的博客
03-08 2002
Python标识符的命名规则（标识符包括变量，在Python中你自己可以定义的函数、类名、变量、对象（凡事你可以定义的）都统称为标识符），标识必须以下划线或者字母开头，不能以数字开头，标识符可以由下划线、字母和数字构成但是开头只能是下划线或者字母，标识符不能和关键字重名(python中只有33个关键字，而且这些关键字非常的好记，例如if,for,else,as 等等，想知道具体的请去找度娘！），另外，Python支持unicode编码格式，可以支持多国语言，用中文也可以做标识符，例如：身高=1.7
黑马程序员Python学习笔记，代码使用Pycharm编写。_黑马编程python笔记
2401_84141337的博客
05-02 947
定义元组使用小括号，且使用逗号隔开各个数据，数据可以是不同的数据类型。元组不可修改内容（可以修改内部list的内部元素)元组的下标：从前向后，下标从0开始从后向前，下标从-1开始#方式一变量名称 = （）#方式二变量名称 = tuple（）# 定义单个元素的元组，后面必须加一个逗号，不然它的类型不是tuple而是其他# 元组的嵌套t1 = ((1,'多',True),(2,'la',False))print(t1)# 下表索引取出内容内容连续、有序，可使用下标索引的一类数据容器。
web学习笔记
热门推荐
刘群智的博客
07-27 1万+
常用属性............................................................................................ 1 Html基础........................................................................................... 3 ...
第二章 有序列表
猿来如此Demo
04-05 1471
第二章 有序列表 以把大象装进冰箱为例子 2.1 创建有序列表 快捷键-----Ctrl+Shift+[ Markdown语法： 1. 空格 实例 打开冰箱----- 1.空格 （会发现整行后退了一格） 一定要有空格 把大象放进冰箱----在有序号的那行回车 则下一行自动添加序号 关闭冰箱 -----------------如果从第三行回车依然会产生序号。 注意 在有序列表停止自动添加序号后另起一行所创建的有序列表和上一个列表是两个不同的列表（两个列表间距离增大） 2.2 停止自动添加序号
浅析html中的自定义列表
辛星，前进的路上.
05-05 1114
定义列表的一般使用格式如下:             DL是这个列表的一个容器，从语义上来讲，DT是名称，是标题，而DD是解释，是内容。DT与DD都是盒子，DD只对应解释他上面的一个DT，不能越级或是向下解释。当DT不存在的时候那么DD也就没有存在的意义，而DT是否一定需要DD跟随其后.
前端第二章：7.HTML列表（无序列表、有序列表、自定义列表）
要思考，要努力
04-25 778
一、无序列表 1.无序列表：ul标签 2.写在 body元素 内 3.使用 li标签 代表列表项 4.实际使用： 5.标签 在网页中的样式： 二、有序列表 1.ol标签 2.ol标签 在网页中的样式： 三、自定义列表 1.dl标签 2.dl标签 在网页中的样式： 四、列表嵌套 1.嵌套的列表： 2.在浏览器中的效果： ...
HTML入门笔记19-HTML中Order List标签
Anthony_tester的博客
07-27 4010
本篇来学习下HTML中Order List标签，什么是Order List呢，字面意思是顺序列表。 直接来看看例子。 HTML mail 链接 Ordered List举例 张三 李四 王
零基础学习WEB前端开发(十)：列表标签（无序列表、自定义列表、有序列表）
陶小桃Blog
10-28 3145
列表主要是用来布局的。 列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由方便。 列表的分类： 无序列表 有序列表 自定义列表 一、无序列表 <ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，列表项使用<li>标签定义。 1.1 基本语法 <ul> <li>列表项1</li> <li>列表项1</li> <li>列表项1</..
教你如何创建自定义列表
m0_69234258的博客
11-09 1573
自定义列表以标签开始。每个自定义列表头以开始。每个自定义列表项的定义以开始。
Web html第二次课
Yutouxn0的博客
03-29 356
案例1 文字移动 ​​​​​​​ 案例2 无序列表
css案例16——ul无序列表（无li时无样式，有li后出现样式）
努力、拼搏、奋进
06-24 804
列表、灰色背景、li遍历循环
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值