python大佬养成计划----HTML网页设计(序列)

序列化标签

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>

原文地址:https://www.cnblogs.com/baimeishaoxia/p/11832753.html

时间: 2024-10-08 03:00:50

python大佬养成计划----HTML网页设计(序列)的相关文章

python大佬养成计划----HTML网页设计(表格)

制作网页时,要合理规划网页布局.比如,在网页中添加一个表格,可分为上.中.下三部分,上部存放网页标题或LOGO图片,中间部分是整个网页的主体内容,底部就是相关制作信息.此外,单元格里还可再添加单元格,将内容分类别.分层次合理规划. 表格标签--table 是一个双标签.一个表格中包含<table>.<tr>.<td>三个基本元素.首标签<table>和尾标签</table>表示一个表格的开始和结束.'tr=table row'用于表示一行的开始和

python大佬养成计划----CSS样式类

CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 HTML 标签原本被设计为用于定义文档内容.通过使用 <h1>.<p>.<table> 这样的标签,HTML 的初衷是表达"这是标题"."

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

什么是DOM? DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口.HTML DOM 定义了访问和操作 HTML 文档的标准方法.DOM 以树结构表达 HTML 文档.HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法.换言之,HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准. 根据HTML DOM标准,HTML中所有内容都是节点. 整个文档是一个文档节点 每个 HTML 元素是元素

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

Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国日渐成熟才解放了一直以来姥姥不疼舅舅不爱的前端开发工程师们. 有没有发现从09年下半年到现在全中国的互联网公司都在招聘前端开发工程师?如果你注意到了,那么恭喜你,你已经拥有那么一点点预测互联网职场动向的能力. 可能令你感到遗憾的是你从没从事过前端开发工作,不过没关系,只要你肯努力,一切都是可以学会的

网页设计中的切图

一般的网站制作步骤大体上为:设计效果图–>切图+制作静态html模板–>嵌套至CMS,其中,切图虽然是很简单的一个步骤,但其中也有很多技巧,以下是我个人总结出来的几点. 总体上,把握一个原则,能用css写的,坚决不要用图片. 经验告诉我们,首页图片很多的网站打开会很慢,一是因为图片多,需要下载的文件体积就增大,二是每一个图片下载都会对服务器有一个请求,增大了浏览器与服 务端的交互次数,如果能把纯色的部分用css来写,而不因为省事直接切图,就会极大提高网站的运行效率,我最早开始学习制作网站时,就

网页设计中透明效果的使用技巧

在网页设计中使用透明效果是件既美观又冒险的事儿.透明效果的使用是把色块,文本或图像“变薄”或者降低饱和度,使颜色变浅透明,这样下个图层的内 容就能穿透显示出来.这种方法如果用好了,效果将会特别棒——能突出显示文本或者在图像的特定区域形成焦点.但设计者在运用透明效果时要特别小心,因为这 么做可能会影响页面的可读性.要是框和文本的透明度不对,更可能会影响到整体的设计. 下文是一些注意事项以及巧妙运用透明效果的成功案例. 用“透明效果”来制造对比 使 用透明效果最大的优点是可以形成对比.设计者可以在图

设计师必备的响应式网页设计工具

作为一名码农,在项目开发过程中经常会涉及到项目的需求变更,变更的理由也是多种多样,总结而来分为外部和内部,从外部讲,例如:为了顺应某行业新的工作操作规范,甲方要求现有项目在工作流程环节上进行局部功能的变更:从内部讲,通过对市场环境的不间断调研和数据分析,公司产品在同类产品竞争中处于不利地位,市场份额日渐缩小,那么我们的产品设计人员会积极行动起来对产品的整个定位和新业务展开新的思考以寻求更加稳健的创新突破口,这就会对项目产生一定的需求变更. 此图是从CSDN社区截取下的,我相信很多看到这个问题的筒

网页设计需要把握的原则

明确建立网站的目标和用户需求 Web站点的设计是展现企业形象.介绍产品和服务.体现企业发展战略的重要途径,因此我们必须明确设计站点的目的和用户需求,从而做出切实可行的设计计划.我们会根据消费者的需求.市场的状况.企业自身的情况等进行综合分析,以"消费者(customer)"为中心,而不是以"美术"为中心进行设计规划. 在设计规划时我们会考虑: 网站建设的目的是什么? 为谁提供服务和产品? 企业能提供什么样的产品和服务? 网站的目的消费者和受众的特点是什么? 企业产品

网页设计中 效果的使用技巧

运用好透明效果是提高网页设计水准的重要方法之一.如同使用其他方法一样,设计师们有很多种手段将透明效果运用到网页中,今天这篇文章就来好好和您分享一下关于“透明”的实用小技巧哟:) 在 网页设计中使用透明效果是件既美观又冒险的事儿.透明效果的使用是把色块,文本或图像“变薄”或者降低饱和度,使颜色变浅透明,这样下个图层的内容就能穿 透显示出来.这种方法如果用好了,效果将会特别棒——能突出显示文本或者在图像的特定区域形成焦点.但设计者在运用透明效果时要特别小心,因为这么做可能 会影响页面的可读性.要是框