昨天写的那篇文章《我教女朋友学编程Html系列(6)—Html常用表单控件》,基本上有1000人左右看了,那边文章是我站在前人的肩膀上修改来的,添加了截图和说明,合并了例子,使之更容易被初学者接受。

今天我要讲html的有序列表和无序列表及常用例子,网上搜索了一番,没有发现太好的文章,决定自己动手,丰衣足食。

在我搜文章或知识点的时候,有一点启发,总是想先看效果图,看看效果是什么样子,然后在决定是否要继续看下去,就像去相亲,先看看双方是否对上眼了,先有外貌的吸引,才有继续交往下去的必要,当然,如果你遇到了一个女神,然后对她穷追猛打,只要方式得当,追到手的希望还是蛮大的。

大家的时间都是宝贵的,因此,我决定,先展示效果图,然后再讲知识点,有兴趣的看看,没兴趣的闪过。

本来,我以为无序列表用的最多,有序列表次之,自定义列表很少用。搜了几个网站发现,有序列表也很少用。先看截图吧。

无序列表用的最多,下图是淘宝导航栏的截图,用的就是无序列表,后面我会把这个当做例子讲解。

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

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

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

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

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

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

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

先看图

代码如下:

<html>

<body>

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

<ul >

 <li>讲代码</li>

 <li>写博客</li>

 <li>看女神</li>

 <li>嗑瓜子</li>

</ul>

</body>

</html>

知识讲解:

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;" >

效果图如下:

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

效果图如下:

源代码如下:

<html>

<head>

<style type="text/css">

.nav{

       height:34px;

       border-bottom:2px solid #f40;

       overflow:hidden;

       *zoom:

}

.nav li{

       display:inline;

       float:left;

       font-weight:

}

.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:;

       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:;

       left:;

       padding:;

       height:33px

}

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

       background: 

}

.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: 10px;

       text-align:center;

       font-size:16px

}

.nav .nav-hd li a{

       padding: 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>

说明:

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指定的网页,这就实现了菜单的功能。

二、自定义列表

先看例子效果图:

源代码如下:

<html>

<body>

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

<dl>

   <dt>计算机</dt>

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

   <dt>显示器</dt>

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

</dl>

</body>

</html>

知识讲解:

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,“描述”的意思。

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

效果图如下:

源代码如下:

<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 ;

       background-color:#fff;

       cursor:pointer;

       color:#;

       border:1px solid #e8e8e8;

       border-top:

}

.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  #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:;

       padding: 9px

}

.tb-service .service-bd dt{

       padding-top:10px;

       font-size:14px;

       font-weight:;

       line-height:19px;

       padding-bottom:1px

}

.tb-service .service-bd dt s{

       width:25px;

       height:21px;

       margin-right:7px;

       margin-top:-3px;

       *text-indent:

}

.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:;

       *display:inline;

       position:relative

}

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

       width:54px

}

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

       width:38px

}

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

       width:29px

}

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

       border:;

       margin-top:10px \

}

.tb-service .more{

       position:relative;

       position:absolute;

       top:45px;

       right:9px;

       margin-right:;

       padding: 10px  5px;

       border:1px solid #e8e8e8;

       background:#fff;

       margin-top:-3px \;

       padding-top:3px \

}

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

       position:absolute;

       top:;

       left:;

       width:;

       height:;

       border-color:rgba(,,,);

       border-color:transparent\;

       *border-color:transparent;

       _border-color:tomato;

       _filter:chroma(color=tomato);

       border-style:solid;

       overflow:hidden;

       *zoom:;

       border-width:3px  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="">

       <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>

说明:

1,

样式没有“偷”完整,正常的应该是3个a标签为一行的。感兴趣的童鞋,可以自己偷偷看。

2,

这里的<dt>内部先是一个删除线标签<s>(就是在文字中间加一条线),后面是文字“主题市场”。

3,

< dd>标签内部就是一些超链接标签a组成。

三、有序列表

例子效果图如下:

源代码如下:

<!DOCTYPE html>

<html>

<body>

<ol>

  <li>咖啡</li>

  <li>牛奶</li>

  <li>茶</li>

</ol>

<ol start="">

  <li>咖啡</li>

  <li>牛奶</li>

  <li>茶</li>

</ol>

</body>

</html>

知识讲解:

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>标签来表示。内部是显示内容。

写到这里,文章终于写完了,总共用了4个多小时,现在是凌晨1点40。本来今天是很累的,因为昨晚一夜没怎么睡着,不过这并不影响我的工作,上班的时间依旧精神抖擞,而且代码质量也比往常高一些,主要就是心态变化了吧。

明明知道,熬夜等于慢性自杀,但是,我们仍然在熬夜,送给所有奋斗中的程序员,注意早点休息。

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

  1. 我教女朋友学编程html系列(5) html中table的用法和例子

    女朋友不是学计算机的,但是现在从事计算机行业,做技术支持,她想学习编程,因此我打算每天教她一点点,日积月累,带她学习编程,如果其他初学者感兴趣,可以跟着学. 为了将table介绍的简单.生动,具有实战 ...

  2. 我教女朋友学编程Html系列(6)—Html常用表单控件

    做过网页的人都知道,html表单控件十分重要.基本上我们注册会员.登录用户,都需要填写用户名.密码,那些框框都是表单控件. 本来今天就想写一些常用的html表单控件,于是开始搜资料,找到了一个网页,作 ...

  3. 教女朋友学Python运行环境搭建

    下班比较早,吃了饭没什么事,就和女朋友一起研究了Python. 编程语言有很多,为什么选择它呢?因为它火吧,没什么好解释的,下面开始第一步,环境搭建.网上的教程实在太多,各种系统的各种版本,本地链接下 ...

  4. [Python] 文科生零基础学编程系列二——数据类型、变量、常量的基础概念

    上一篇:[Python] 文科生零基础学编程系列--对象.集合.属性.方法的基本定义 下一篇: (仍先以最简单的Excel的VBA为例,语法与Python不同,但概念和逻辑需要理解透彻) p.p1 { ...

  5. [Python] 文科生零基础学编程系列三——数据运算符的基本类别

    上一篇:[Python] 文科生零基础学编程系列二--数据类型.变量.常量的基础概念 下一篇: ※ 程序的执行过程,就是对数据进行运算的过程. 不同的数据类型,可以进行不同的运算, 按照数据运算类型的 ...

  6. 学废了系列 - WebGIS vs WebGL图形编程

    目前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积 ...

  7. Asky极简教程:零基础1小时学编程,已更新前8节

    Asky极简架构 开源Asky极简架构.超轻量级.高并发.水平扩展.微服务架构 <Asky极简教程:零基础1小时学编程>开源教程 零基础入门,从零开始全程演示,如何开发一个大型互联网系统, ...

  8. 少儿编程|Scratch编程教程系列合集,总有一款适合你

    如果觉得资源不错,友情转发,贵在分享!!! 少儿编程Scratch: 少儿编程Scratch第一讲:Scratch完美的初体验少儿编程Scratch第二讲:奇妙的接球小游戏少儿编程Scratch第三讲 ...

  9. 【Windows编程】系列第六篇:创建Toolbar与Statusbar

    上一篇我们学习了解了如何使用Windows GDI画图,该应用程序都是光光的静态窗口,我们使用Windows应用程序,但凡稍微复杂一点的程序都会有工具栏和状态栏,工具栏主要用于一些快捷功能按钮.比如典 ...

随机推荐

  1. Win 2003下IIS6+Mysql+php5.2  isapi搭建 升级php5.2到5.3测试 借助fastcgi实现

    Win 2003下IIS6+Mysql+php5.2  原环境isapi搭建 升级php5.2到5.3测试 借助fastcgi实现 操作如下 实验前准备:php-5.3.5-Win32-VC6-x86 ...

  2. 2014年第五届蓝桥杯试题C/C++程序设计B组——李白打酒

    题目描述: 标题:李白打酒 话说大诗人李白,一生好饮.幸好他从不开车. 一天,他提着酒壶,从家里出来,酒壶中有酒2斗.他边走边唱: 无事街上走,提壶去打酒. 逢店加一倍,遇花喝一斗. 这一路上,他一共 ...

  3. [leetcode]_Best Time to Buy and Sell Stock I && II

    一个系列三道题,我都不会做,google之答案.过了两道,第三道看不懂,放置,稍后继续. 一.Best Time to Buy and Sell Stock I 题目:一个数组表示一支股票的价格变换. ...

  4. android学习视频分享

    最近整理了大量的安卓开发学习资料,有书籍有视频有代码,老罗的第一季有点老了, 这里就给大家分享下老罗的第二季的视频教程吧,还有源码,初级到高级程序猿都有用. 下载地址:http://51pansou. ...

  5. php excel (转)

    首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和 PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把clas ...

  6. 通过JAVA代码获取手机的一些基本信息(本机号码,SDK版本,系统版本,手机型号)

    代码如下: package com.zzw.getPhoneInfos; import android.app.Activity; import android.content.Context; im ...

  7. MySql中把一个表的数据插入到另一个表中的实现代码

    web开发中,我们经常需要将一个表的数据插入到另外一个表,有时还需要指定导入字段,设置只需要导入目标表中不存在的记录,虽然这些都可以在程序中拆分成简单sql来实现,但是用一个sql的话,会节省大量代码 ...

  8. DevExpress 表中数据导出

    gridView1.ExportToXlsx("SampleStock.xlsx"); if (true) { DevExpress.XtraEditors.XtraMessage ...

  9. c++ 类与函数中static变量初始化问题(转)

    首先static变量只有一次初始化,不管在类中还是在函数中..有这样一个函数: void Foo() { ; // initialize std::cout << a; a++; } 里的 ...

  10. 十天学会单片机Day4串行口通信

    并行与串行基本通信方式 1.并行通信方式 通常是将数据字节的各位用多条数据线同时进行传送. 并行通信控制简单.传输速度快:由于传输线较多,长距离传送时成本高且接收方的各位同时接收存在困难. 2.串行通 ...