马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2021-6-4 17:41 编辑
在线视频：
课程思维导图
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才能有那么酷炫的效果，毕竟万事开头难，掌握了基础才能更好的进步～
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-8-29 09:51:28
置顶卡
千斤顶
显身卡
发表于 2018-9-15 00:57:36
发表于 2019-1-19 10:33:52
日常 DD = =!