小白前端入门笔记之Ul标签创建无序List

[[379238]]

今天的挑战关于无序数组。

背景知识

HTML当中有一个特殊的元素，它可以用来创建一个无序数组(unordered lists)，或者叫做弹孔风格的序列。

比如下图红框当中展示的，就是这样一个list。

想要递减这样的一个序列，通过

作为opening tag，接着紧跟我们想要摆放的每一个元素。对于每一个元素，我们都用

标签进行包裹，最后在序列的末尾我们加上一个

作为closing tag。

我们来看一个真实代码的例子：

 
 
 
 

  
  
  
  
<ul> 
  
  
  
  
  <li>milk</li> 
  
  
  
  
  <li>cheese</li> 
  
  
  
  
</ul> 
 
 
 
 

这段代码创建的就是上图当中展示的例子。

题意

去除掉HTML代码当中最后两个p标签，并且创建一个无序数组，包含猫咪最喜欢的三样东西。

要求

1. 创建一个ul标签
2. 你需要在ul标签当中创建三个li元素
3. 你的ul标签需要有一个closing tag
4. 你的li标签每一个都需要有closing tag
5. 你的li标签不能仅包含空格或为空

编辑器

 
 
 
 

  
  
  
  
<h2>CatPhotoApp</h2> 
  
  
  
  
<main> 
  
  
  
  
  <p>Click here to view more <a href="#">cat photos</a>.</p> 
  
  
  
  
 
  
  
  
  
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> 
  
  
  
  
 
  
  
  
  
  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> 
  
  
  
  
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p> 
  
  
  
  
</main> 
 
 
 
 

解法

这次的挑战主要是教我们学会使用ul标签，ul标签在网页当中非常常用，结合CSS我们可以使用出各种炫酷的效果。包括网页的各种导航栏或者是其他形式的序列都可以用它来实现。

我们只需要依照题目的要求去除掉最后两个段落，然后加上ul标签，并且在其中随意写上一项即可。

 
 
 
 

  
  
  
  
<h2>CatPhotoApp</h2> 
  
  
  
  
<main> 
  
  
  
  
  <p>Click here to view more <a href="#">cat photos</a>.</p> 
  
  
  
  
 
  
  
  
  
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> 
  
  
  
  
 
  
  
  
  
  <ul> 
  
  
  
  
    <li>milk</li> 
  
  
  
  
    <li>cheese</li> 
  
  
  
  
    <li>rat</li> 
  
  
  
  
  </ul> 
  
  
  
  
</main> 
 
 
 
 

本文转载自微信公众号「TechFlow」，可以通过以下二维码关注。转载本文请联系TechFlow公众号。