html认识数字游戏大全,认识HTML列表元素

在网页设计中，经常会遇到有序列表和无序列表。有序列表的列表项以数字为序号，列表项按顺序排列；无序列表的列表项以加粗的黑点开始。列表项无序排列。

有序列表

有序列表属于“块元素”，每个列表项单独占一行，也可以使用浮动属性将有序列表变为“行元素”。有序列表使用标签ol来表示，每个列表项使用li标签。例如下面的HTML文档展示了有序列表的使用。

下图是浏览器显示效果，从浏览器显示效果可以看出，喜欢看的三部电影以列表方式按顺序展示，序号为数字1、2、3。ol起始标签是有序列表的开始，ol结束标签是有序列表的结束，在ol起始标签和结束标签内放置多个li标签，li标签表示每个列表项，在li起始标签和结束标签内放置列表项的内容。

ol有序标签默认展示方式是“块元素”，如果希望ol有序列表以“行元素”方式展示，可以在li标签内添加浮动属性。例如下面的HTML文档让有序列表以“行元素”方式展示。

下图是浏览器显示效果，从浏览器显示效果可以看出，有序列表以“行元素”方式展示内容，列表项在一行显示，如果一行显示不下，会自动将显示不下的列表项放置到下一行显示。li标签添加了左浮动和宽度属性，设置宽度属性是为了让每个列表项有一个固定宽度，以便能够满足列表项内容要求的宽度。若不设置宽度属性，列表项的内容会挤在一起。

无序列表

无序列表与有序列表用法基本相同。不同的是无序列表的列表项没有顺序，每个列表项前面的符号也不是数字，而是加粗的黑点，利用CSS属性可以改变列表项前面的符号。无序列表使用标签ul来表示，每个列表项也使用li标签。例如下面的HTML文档展示了无序列表的使用。

无序列表的HTML文档代码和前面有序列表的HTML文档代码基本相同，仅是把ol标签换成了ul标签。浏览器显示效果如下图所示。

使用无序列表实现流式布局

流式布局是将多个div容器元素顺序水平排放，当一行放置不下时，会自动把div容器元素放置到下一行。组合使用无序列表和div元素可以实现网页的流式布局。例如下面的HTML文档展示了使用无序列表和div元素实现网页的流式布局。

浏览器显示效果如下图所示。在无序列表li标签内放置了容器div元素，在div元素内部可以放置其它HTML元素，每个列表项都遵循div元素的样式要求。所有列表项都按行顺序排版，一行放满后自动放置到下一行。li标签内的margin-left和margin-top属性用于设置每个列表项顶部与左侧的间隔距离，list-style-type属性可以设置列表项前面的项符号是否显示，设置为none不显示列表项前面的项符号。

举报/反馈

html认识数字游戏大全,认识HTML列表元素相关推荐

猜java数字游戏大全_Java 猜数字游戏
最近学习了Java的基础知识,利用闲暇写了个猜数字游戏.由于对Java还不太熟悉,写的有些简单,尤其抛异常还不太会使用,请大家提意见.下面贴一下代码,也供以后自己修改. 1.Main类,主要是提供一个 ...
python简单数字游戏大全_python数字游戏，让你欲罢不能！
今天的开胃菜,让我们来模拟一个酒桌上的数字游戏--拍七:从1到100轮流报数,每逢含有7和7的倍数的人要拍一下手. 实现起来相当简单,会打字的人都会写. for i in range(1,101): ...
java编写数字游戏大全_Java编写猜数字小游戏
本文实例讲述了java实现的简单猜数字游戏代码.分享给大家供大家参考. 以下是java语言写的一个猜数字小游戏引用片段: import java.text.simpledateformat; impo ...
python数字大小排列_python按照列表元素中的数字大小排序
[Human Sorting] 常见的python排序只需要一个sort或者sorted函数即可.但是默认采用的是字典序,这会带来一个问题,如果列表中的元素是字符串+数字组合,往往无法得到我们想要的排 ...
html认识数字游戏大全,认识数字小游戏，就是这么简单！为孩子收藏
认识数字小游戏,就是这么简单!为孩子收藏宝宝进入幼儿园后,就会接触到数字.很多家长为了让孩子学到更多的知识,而强迫孩子认数.写字.其实,强迫学习,不仅起不到积极的作用,还会使孩子厌恶学习.因此,家长 ...
幼儿园python_[Python]猜数字游戏AI版的实现（幼儿园智商AI）
代码写得很烂,有兴趣的人可以跑一跑: # /usr/bin/env python # -*- encoding=utf-8 -*- import random from itertools impor ...
python猜数字游戏简单-python猜数字游戏快速求解解决方案
python猜数字游戏快速求解解决方案.使用方法: 1. 保存代码为guessall.py 2. 执行python guessall.py > result.txt 3. 打开result.tx ...
python猜数字代码_Python版的文曲星猜数字游戏代码
# -*- coding: utf-8 -*- import random #数字类 class NumberItem: #数字个数 _GUESS_NUMBER_COUNT_ = 4 def __in ...
python随机猜数字游戏_Python小游戏——猜数字教程（random库教程）
今天来开发一个简单的数字逻辑游戏,猜数字(数字炸弹) 首先开发游戏第一件事,了解需求. 猜数字游戏规则: 计算机随机生成一个指定范围的数字,由玩家来猜测, 之后计算机会根据玩家提供数字来与自己生成的数 ...
python数字组合算法_python猜数字游戏快速求解解决方案
python猜数字游戏快速求解解决方案.使用方法: 1. 保存代码为guessall.py 2. 执行python guessall.py > result.txt 3. 打开result.tx ...

html认识数字游戏大全,认识HTML列表元素

html认识数字游戏大全,认识HTML列表元素相关推荐

最新文章

热门文章