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
啦啦啦 66 123 kkkk 1 {:10_256:}日常 DD = =! {:10_277:} 每天都看一遍笔记 6 回复 1 666666666666666 {:10_277:} 贼牛逼 回复 好 666666666666666666666666666666666666666 查看底层 好的好的,学到了