数据库

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

时间:2010-12-5 17:23:32  作者:域名   来源:应用开发  查看:  评论:0
内容摘要:今天的挑战关于无序数组。背景知识HTML当中有一个特殊的元素,它可以用来创建一个无序数组(unordered lists),或者叫做弹孔风格的序列。比如下图红框当中展示的,就是这样一个list。想要递

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

背景知识

HTML当中有一个特殊的前端签创元素,它可以用来创建一个无序数组(unordered lists),入门或者叫做弹孔风格的笔记l标序列。

比如下图红框当中展示的建无,就是小白序这样一个list。

想要递减这样的前端签创一个序列,通过

作为opening tag,入门接着紧跟我们想要摆放的笔记l标每一个元素。对于每一个元素,亿华云建无我们都用

标签进行包裹,小白序最后在序列的前端签创末尾我们加上一个

作为closing tag。

我们来看一个真实代码的入门例子:

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

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

题意

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

要求

创建一个ul标签 你需要在ul标签当中创建三个li元素 你的ul标签需要有一个closing tag 你的li标签每一个都需要有closing tag 你的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公众号。服务器租用

copyright © 2025 powered by 益强资讯全景  滇ICP备2023006006号-31sitemap