序列化标签

1.有序标签--ol和li

有序列表标签是<ol>，是一个双标签。在每一个列表项目前要使用<li>标签。<ol>标签的形式是带有前后顺序之分的编号。如果添加或者删除一个列表项，编号会自动调整。

<ol>

<li>第一项</li>

<li>第一项</li>

<li>第一项</li>

...

</ol>

有序标签的属性--start

start属性是用来设置编号开始的数字，默认从1开始，该属性可省略。如果从其他数字，如2开始，设置‘start=2’，可以从负数开始。

有序标签的属性--type

type属性用于设置编号为数字或者字母等的类型，如'type=a',则编号用英文字母表示。

type=1-->表示用数字编号1,2,3...

type=a-->表示用小写字母编号a,b,c...

type=A-->表示用大写字母A,B,C...

type=I-->表示用大写罗马数字标号I,II,III...

type=i-->表示用小写罗马数字标号i,ii,iii

如果不想要序号显示，可设置ol的style属性'text-decoration: none'

无序标签--ul和li

无序列表标签是<ul>，是一个双标签。在每一个列表项目前要使用<li>标签。列表前的序号类型变成了符号。

<ul>

<li>第一项</li>

<li>第一项</li>

<li>第一项</li>

...

</ul>

可通过设置type属性，改变符号类型，默认是实心圆

type=disc-->实心圆

type=circle-->空心圆

type=square-->小方块

如果不想要序号显示，可设置ul的style属性'list-style-type: none'

嵌套标签--dl、dt和dd

定义列表默认为两层，第一层标签<dt>，第二层标签<dd>。通常是成对出现。

<dl>

<dt>名词1</dt>

<dd>名词1的解释1</dd>

<dd>名词1的解释2</dd>

<dt>名词2</dt>

<dd>名词2的解释1</dd>

<dd>名词2的解释2</dd>

</dl>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>小白</title>

</head>

<body>

水平显示菜单

<ul style="list-style-type: none">

    <!--list-style-type: none 去掉圆点-->

    <!--display: inline-block 变为行内元素， 并且可以设置高度和宽度-->

    <li style="display:inline-block;width:20%;background: darkseagreen">水煮肉片</li>

    <li style="display:inline-block;width:20%;background: darkseagreen">蚂蚁上树</li>

    <li style="display:inline-block;width:20%;background: darkseagreen">宫保鸡丁</li>

    <li style="display:inline-block;width:20%;background: darkseagreen">豆腐圆子汤</li>

</ul>

<br>

<hr/>

有以下书籍可供选择：

<ol type="A">

    <!--去掉原有装饰：text-decoration: none-->

    <li><a href="https://baike.so.com/doc/801785-848140.html" style="text-decoration: none;color: #f10180">额尔古纳河右岸</a></li>

    <li><a href="#">月亮与六便士</a></li>

    <li><a href="#">面纱</a></li>

    <li><a href="#">平凡的世界</a></li>

</ol>

<br>

<hr/>

<br>

<h3 align="center">python</h3>

<dl>

    <dt style="color: darkblue">数值类型</dt>

    <dd>数值、bool</dd>

    <dd>字符串</dd>

    <dd>列表</dd>

    <dd>元祖</dd>

    <dd>字典</dd>

    <dt style="color: darkblue;">循环</dt>

    <dd>while循环</dd>

    <dd>for循环</dd>

</dl>

</body>

</html>

python大佬养成计划----HTML网页设计（序列）的更多相关文章

  1. python大佬养成计划----HTML网页设计（表格）

    制作网页时,要合理规划网页布局.比如,在网页中添加一个表格,可分为上.中.下三部分,上部存放网页标题或LOGO图片,中间部分是整个网页的主体内容,底部就是相关制作信息.此外,单元格里还可再添加单元格, ...

  2. python大佬养成计划----flask_bootstrap装饰网页

    flask_bootstrap Bootstrap 是 Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web 浏览器. Boo ...

  3. python大佬养成计划----基于flask_sqlalchemy的网页显示数据库信息

    网页显示数据库信息 使用我们刚学习的flask_sqlalchemy,在网页中显示数据库表中的数据.在开始运行程序前,确保数据库中执行过创建表和创建用户的操作,详见链接描述. # 模板文件templa ...

  4. python大佬养成计划----HTML DOM

    什么是DOM? DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口.HTML DOM 定义了访问和操作 HTML 文档的标准方法.DOM ...

  5. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  6. 2019.12.12网页设计大赛&2019.12.13程序设计大赛观后感

    有幸参加了一次网页设计大赛和程序设计大赛,其实在大一的时候就参加过一次程序设计大赛,那时候也没怎么听,现在又有了一次机会来听,这次就认真的听了这两次的比赛,也有很多的感悟. 1.要学习完成一个任务的多 ...

  7. BZOJ 4212: 神牛的养成计划

    4212: 神牛的养成计划 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 142  Solved: 30[Submit][Status][Discus ...

  8. 【BZOJ-4212】神牛的养成计划 Trie树 + 可持久化Trie树

    4212: 神牛的养成计划 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 136  Solved: 27[Submit][Status][Discus ...

  9. [BZOJ4212]神牛的养成计划

    [BZOJ4212]神牛的养成计划 试题描述 Hzwer 成功培育出神牛细胞,可最终培育出的生物体却让他大失所望...... 后来,他从某同校女神 牛处知道,原来他培育的细胞发生了基因突变,原先决定神 ...

随机推荐

  1. php中的几种四舍五入取整、向上取整、向下取整、小数截取方法

    echo intval(4.5);echo "<br />";//直接取整,舍弃小数保留整数echo round(4.5);echo "<br /> ...

  2. [原]调试实战——使用windbg调试excel启动时死锁

    原调试debugwindbg死锁deadlock 前言 这是几年前在项目中遇到的一个死锁问题,在博客园发布过.我对之前的笔记进行了整理重新发布于此. 本文假设小伙伴们知道一些基本概念,比如什么是.du ...

  3. CentOS7部署yum环境及虚拟机快照克隆

    CentOS部署IP地址 第一种:nmtui        方向键.tab.空格.回车第二种:修改网卡配置文件         /etc/sysconfig/network-sripts/ifcfg- ...

  4. 火车进出栈 java

    题目描述 一列火车n节车厢,依次编号为1,2,3,…,n.每节车厢有两种运动方式,进栈与出栈,问n节车厢出栈的可能排列方式有多少种. 输入 一个数,n(n<=60000) 输出 一个数s表示n节 ...

  5. “pip install tensorflow ”出现错误

    在控制台命令窗口输入:pip install tensorflow之后出现一长串bug怎么解决 网上百度了一些方法: 安装Python3.5 安装Python3.6 总结原因:Python3.7没有合 ...

  6. iOS 中UIWebView的cookie

    有关cookie是什么,大家可以自行百度,本文我获得cookie的目的是得到一个userID. 下面的是代码. - (void)getUserIDFromCookie { NSHTTPCookieSt ...

  7. 实现JS脏话筛选替换的几种途径

    一.逐个替换用replace 缺点:筛选的脏话集太少 var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').va ...

  8. as和强制类型转换的区别

    之前一直以为as就是强制类型转换,只是as是AS3中新的语法,之前用在有继承关系的对象之间的转换也无甚区别,但是今天却让我领悟到了它俩之间的区别. 原起:今天要给ColorPicker控件动态赋值,它 ...

  9. python后端面试第一部分：python基础--长期维护

    1. 为什么学习Python? 2. 通过什么途径学习的Python? 3. Python和Java.PHP.C.C#.C++等其他语言的对比? 4. 简述解释型和编译型编程语言?   https:/ ...

  10. SpringMVC源码剖析2——处理器映射器

    1.处理器映射器 HandlerMapping 一句话概括作用: 为 我 们 建 立 起 @RequestMapping 注 解 和 控 制 器 方 法 的 对 应 关 系 . 怎么去查看 第一步: ...