012 - 被安排的明明白白,Web开发,技术交流,鱼C论坛

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

012 - 被安排的明明白白

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

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

在线视频：

https://www.bilibili.com/video/BV1QW411N762?p=13

课程思维导图

猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清

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，可以自己添加的图片来修改列表前面的标记。

素材：

手动拷到项目目录，然后加载：
<!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、炫酷但很简单的课后作业

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

就像最炫酷的页面：

底层就是由：
**** Hidden Message *****

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

课后作业，完成了吗？

传送门

http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

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

如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

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

http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif

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

啦啦啦

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

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

123

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

kkkk

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

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

{:10_256:}日常 DD = =!

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

{:10_277:}

李小控 发表于 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

{:10_277:}

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

好的好的，学到了

页: [1] 2 3

鱼C论坛's Archiver

012 - 被安排的明明白白