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

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

背景知识

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

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

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

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

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

作为closing tag。

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

 
 
 
 

  
  
  
  
 
  
  
  
  
  
milk
 
  
  
  
  
  
cheese
 
  
  
  
  
 
 
 
 
 

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

题意

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

要求

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

编辑器

 
 
 
 

  
  
  
  
CatPhotoApp
 
  
  
  
  
 
  
  
  
  
  
Click here to view more cat photos.
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
 
  
  
  
  
  
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
 
  
  
  
  
  
Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
 
  
  
  
  
 
 
 
 
 

解法

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

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

 
 
 
 

  
  
  
  
CatPhotoApp
 
  
  
  
  
 
  
  
  
  
  
Click here to view more cat photos.
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
 
  
  
  
  
  
 
  
  
  
  
    
milk
 
  
  
  
  
    
cheese
 
  
  
  
  
    
rat
 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

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

网站标题：小白前端入门笔记之Ul标签创建无序List
文章起源：http://www.csdahua.cn/qtweb/news49/353449.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网