012 - 被安排的明明白白

不二如是 · 发表于 2018-8-29 09:51:28

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-6-4 17:41 编辑

上一集：011 - 格式化大比拼

在线视频：

课程思维导图

猛戳

登录/注册后可看大图

超清

1、无序列表（Unordered List）

作为程序员，不会列表怎么可以呢？！

无序列表顾名思义：没有排序的列表。

很简单：

<ul>
<li>零基础入门学习Web开发（HTML5+CSS3）</li>
<li>零基础入门学习Web开发（JavaScript）</li>
<li>零基础入门学习Web开发（Jquery）</li>
</ul>

复制代码

小黑点就是无序列表的象征，外层ul元素包裹内部的li标签元素。

2、有序列表（Ordered List）

无序是没有次序，那么有序列表就是有排列顺序的列表。

上代码：

<ol>
<li>零基础入门学习Web开发（HTML5+CSS3）</li>
<li>零基础入门学习Web开发（JavaScript）</li>
<li>零基础入门学习Web开发（Jquery）</li>
<li>零基础入门学习Web开发（BootStarp）</li>
<li>零基础入门学习Web开发（Vue）</li>
<li>零基础入门学习Web开发（PHP）</li>
</ol>

复制代码

通过使用ol元素可以自动对其内部的li元素进行排序。

ol有三个属性（传送门）：

reversed用来设置倒序。

start代表列表开始的数字，默认从1开始。

type代表列表前面标记的类型，默认是数组，我们可以设置为其他两种：

a，小写英文；A，大写；I，大写罗马；i，小写罗马

举个例子：

<ol start="11" reversed type="I">
<li>零基础入门学习Web开发（HTML5+CSS3）</li>
<li>零基础入门学习Web开发（JavaScript）</li>
<li>零基础入门学习Web开发（Jquery）</li>
<li>零基础入门学习Web开发（BootStarp）</li>
<li>零基础入门学习Web开发（Vue）</li>
<li>零基础入门学习Web开发（PHP）</li>
</ol>

复制代码

从11开始，倒序采用罗马标记进行呈现。

3、两个常用的CSS

虽然目前还没有涉及到CSS的教学，我们先来体验下。

list-style-type常用来修改无序列表前面的标记。

无序列表默认是小黑原点，从宝典（传送门）我们知道还有将近20种样式可以选。

使用css很简单，先设置body：

<ul class="disc">
<li>零基础入门学习Web开发（HTML5 & CSS3）</li>
<li>零基础入门学习Web开发(JavaScript)</li>
<li>零基础入门学习Web开发(JQuery)</li>
</ul>
<h1>circle：</h1>
<ul class="circle">
<li>零基础入门学习Web开发（HTML5 & CSS3）</li>
<li>零基础入门学习Web开发(JavaScript)</li>
<li>零基础入门学习Web开发(JQuery)</li>
</ul>
<h1>square：</h1>
<ul class="square">
<li>零基础入门学习Web开发（HTML5 & CSS3）</li>
<li>零基础入门学习Web开发(JavaScript)</li>
<li>零基础入门学习Web开发(JQuery)</li>
</ul>

复制代码

然后添加css：

<style>
h1{font-size:16px;font-family:Arial;}
.disc{list-style-type:disc;}
.circle{list-style-type:circle;}
.square{list-style-type:square;}
</style>

复制代码

我们使用了类选择器来进行样式设置，不理解没关系后面我们会讲到。

list-style-image，可以自己添加的图片来修改列表前面的标记。

素材：

turtle.zip (2.79 KB, 下载次数: 54)

手动拷到项目目录，然后加载：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12</title>
<style>
ul
{
list-style-image:url("turtle.png");
}
</style>
</head>
<body>
<ul>
<li>零基础入门学习Web开发（HTML5+CSS3）</li>
<li>零基础入门学习Web开发（JavaScript）</li>
<li>零基础入门学习Web开发（Jquery）</li>
</ul>
</body>
</html>

复制代码

注意哈，这个属性只能用在ul元素上。

4、列表嵌套

在日常开发中列表间还可以相互嵌套，变成多级列表。

有序中可以嵌套无序，无序中也可以嵌套有序，二者相辅相成。

举个例子：

<ul>
<li>
<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<ul>
<li>视频</li>
<li>教材</li>
<li>作业</li>
</ul>
</ol>
</li>
<li>
<ul>
<li>PHP</li>
<li>Vue</li>
<li>Ember</li>
</ul>
</li>
<li>鱼C</li>
</ul>

复制代码

嵌套了两级，按照我们的开发需要进行嵌套即可。

5、定义列表（Define List）

dl，dt，dd三个组合起来用来定义一些术语，略显鸡肋，鱼油了解一下即可：

<dl>
<dt>fishc.com.cn</dt>
<dd>一个神奇的论坛</dd>
</dl>

复制代码

最外层dl，然后dt表示术语的名称，dd表示解释。

6、炫酷但很简单的课后作业

有认真学习的鱼油一定做了课后作业，往往很复杂的东西都是由最简单的东西组合而成。

就像最炫酷的页面：

底层就是由：

游客，如果您要查看本帖隐藏内容请回复

当然需要配合CSS和JavaScript才能有那么酷炫的效果，毕竟万事开头难，掌握了基础才能更好的进步～

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：013 - 数据就应该整整齐齐（上）

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅专辑☞（传送门）（不喜欢更要订阅

）

登录/注册后可看大图

邓文龙0513 · 发表于 2018-9-15 00:57:36

啦啦啦

cjj735243954 · 发表于 2018-9-16 17:01:09

w877713458 · 发表于 2018-11-5 09:18:51

JustinZhu · 发表于 2018-11-30 10:06:29

kkkk

GodChan · 发表于 2018-12-19 23:36:34

MisterLiu · 发表于 2019-1-19 10:33:52

日常 DD = =!

chenzhiqing · 发表于 2019-2-10 09:55:20

李小控 · 发表于 2019-2-16 16:26:31

每天都看一遍笔记

Nevermorewin · 发表于 2019-2-20 10:09:01

飞奔的上校 · 发表于 2019-3-25 11:39:42

学习者小白 · 发表于 2019-4-9 16:25:42

紫殇 · 发表于 2019-4-16 15:04:59

666666666666666

讨债仔 · 发表于 2019-5-23 11:03:00

Hyoga · 发表于 2019-8-4 11:30:29

贼牛逼

郭先森 · 发表于 2019-8-6 20:49:07

韩某人 · 发表于 2019-8-17 18:05:21

药水哥 · 发表于 2019-8-30 00:24:21

666666666666666666666666666666666666666

frihibe · 发表于 2019-9-20 08:47:41

查看底层

苏苏请认真学习 · 发表于 2019-9-29 17:22:13

好的好的，学到了

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 012 - 被安排的明明白白

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: