设计列表和超链接

news2024/11/26 18:54:26

在网页中,大部分信息都是列表结构,如菜单栏、图文列表、分类导航、新闻列表、栏目列表等。HTML5定义了一套列表标签,通过列表结构实现对网页信息的合理排版。另外,网页中还包含大量超链接,通过它实现网页、位置的跳转,超链接能够把整个网站、互联网联系在一起。列表结构与超链接关系紧密,经常需要配合使用。

1、定义列表

1.1、无序列表

无序列表是一种不分排序的列表结构,使用<ul>标签定义,在<ul>标签中可以包含多个<li>标签定义的列表项目。
【示例1】使用无序列表定义一元二次方程的求解方法,预览效果如下图所示。

    <h1>解一元二次方程</h1>
    <p>一元二次方程求解有四种方法:</p>
    <ul>
        <li>直接开平方法 </li>
        <li>配方法 </li>
        <li>公式法 </li>
        <li>分解因式法</li>
    </ul>

在这里插入图片描述

无序列表可以分为一级无序列表和多级无序列表。一级无序列表在浏览器中解析后,会在每个列表项目的前面添加一个小黑点的修饰符,而多级无序列表则会根据级数调整列表项目的修饰符。

【示例2】在页面中设计三层嵌套的多级列表结构,浏览器默认解析的显示效果如下图所示。

    <ul>
        <li>一级列表项目1
            <ul>
                <li>二级列表项目1</li>
                <li>二级列表项目2
                    <ul>
                        <li>三级列表项目1</li>
                        <li>三级列表项目2</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>一级列表项目2</li>
    </ul>

在这里插入图片描述
无序列表在嵌套结构中随着其所包含的列表级数的增加而逐渐缩进,并且随着列表级数的增加而改变不同的修饰符。合理使用列表结构能让页面的结构更加清晰。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/877772.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【计算机视觉|生成对抗】带条件的对抗网络进行图像到图像的转换

本系列博文为深度学习/计算机视觉论文笔记&#xff0c;转载请注明出处 标题&#xff1a;Image-to-Image Translation with Conditional Adversarial Networks 链接&#xff1a;Image-to-Image Translation with Conditional Adversarial Networks | IEEE Conference Publicati…

四、Dubbo扩展点加载机制

四、Dubbo扩展点加载机制 4.1 加载机制概述 Dubbo良好的扩展性与框架中针对不同场景使用合适设计模式、加载机制密不可分 Dubbo几乎所有功能组件都是基于扩展机制&#xff08;SPI&#xff09;实现的 Dubbo SPI 没有直接使用 Java SPI&#xff0c;在它思想上进行改进&#xff…

六轴机械臂码垛货物堆叠仿真

六轴机械臂码垛货物堆叠仿真 1、建立模型与仿真 clear,clc,close all addpath(genpath(.)) %建立模型参数如下&#xff1a; L(1) Link( d, 0.122, a , 0 , alpha, pi/2,offset,0); L(2) Link( d, 0.019 , a ,0.408 , alpha, 0,offset,pi/2); L(3) Link( d, …

C++的stack和queue+优先队列

文章目录 什么是容器适配器底层逻辑为什么选择deque作为stack和queue的底层默认容器优先队列优先队列的模拟实现stack和queue的模拟实现 什么是容器适配器 适配器是一种设计模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总 结)&#xff0c;…

【内联函数】

这里写目录标题 内联函数一、指定内联函数的方法很简单&#xff0c;只需要在函数定义处增加 inline 关键字一般是将非常短小的函数声明为内联函数内联函数与宏定义例题 内联函数 内联函数也称内嵌函数&#xff0c;它主要是解决程序的运行效率。 函数调用需要建立栈内存环境&am…

小白带你学习linux的MongoDB(三十四)

目录 一、概述 1、相关概念 2、特性 二、应用场景 三、安装 四、目录结构 五、默认数据库 1、admin&#xff1a; 2、local: 3、config: 六、数据库操作 1、库操作 2、文档操作 七、MongoDB数据库备份 1、备份命令 2、回数据库删除…

数据库内日期类型数据大于小于条件查找注意事项

只传date格式的日期取查datetime的字段的话默认是 00:00:00 日期类型字符串需要使用 ’ ’ 单引号括住 使用大于小于条件查询某一天的日期数据 前后判断条件不能是同一天 一个例子 数据库内数据&#xff1a; 查询2023-08-14之后的数据&#xff1a; select * from tetst…

Linux 内核第一版 (v0.01) 开源代码解读

探索Linux v0.01的内部结构&#xff0c;Linux内核经常被认为是一个庞大的开源软件。在撰写本文时&#xff0c;最新版本是v6.5-rc5&#xff0c;包含36M行代码。不用说&#xff0c;Linux是几十年来许多贡献者辛勤工作的成果。 Linux 内核首个开源版本 (v0.01) 的体积非常小&…

HBuilderX

HX 简介下载安装 简介 HBuilderX 是一款由 DCloud 开发的集成开发环境 (IDE)&#xff0c;主要用于前端开发和移动应用开发。它基于 Visual Studio Code 平台&#xff0c;针对 Web 开发、小程序开发、移动端开发等提供了丰富的功能和插件。 DCloud官网: https://www.dcloud.io …

剑指offer57-II.和为s的连续正数序列

看完题脑子里闪过了暴力法&#xff0c;就是从1开始往后累加&#xff0c;直到累加和等于或大于target&#xff0c;如果等于就放进数组&#xff0c;如果大于就从2开始加&#xff0c;但是这种想法只是闪过一下&#xff0c;因为我觉得加上填充数组需要3层循环肯定会超时&#xff0c…

java毕业设计-智慧食堂管理系统-内容快览

首页 智慧食堂管理系统是一种可以提高食堂运营效率的管理系统。它将前端代码使用Vue实现&#xff0c;后端使用Spring Boot实现。这个系统的目的是简化食堂管理&#xff0c;提高食堂服务质量。在现代快节奏的生活中&#xff0c;人们对餐饮服务提出了更高的要求&#xff0c;食堂管…

Spring Boot实现第一次启动时自动初始化数据库流程详解

随着互联网的发展项目中的业务功能越来越复杂&#xff0c;有一些基础服务我们不可避免的会去调用一些第三方的接口或者公司内其他项目中提供的服务&#xff0c;但是远程服务的健壮性和网络稳定性都是不可控因素。 在测试阶段可能没有什么异常情况&#xff0c;但上线后可能会出…

一文详解Apipost数据模型功能

在Apipost数据模型中用户可以预先创建多个数据模型&#xff0c;并在API设计过程中重复利用这些模型来构建API 创建数据模型 在左侧导航点击「数据模型」-「新建数据模型」在右侧工作台配置数据模型参数 引入数据模型 在API设计预定义响应期望下点击引用数据模型&#xff0c;…

实录分享 | 使用Prometheus和Grafana监控Alluxio运行状况

欢迎来到【微直播间】&#xff0c;2min纵览大咖观点 本次分享主要包括三个方面&#xff1a; Prometheus&Grafana简介环境搭建手动调优 一、 Prometheus&Grafana简介关于Prometheus&#xff1a; Prometheus 是一个开源的完整监控解决方案&#xff0c;其对传统监控系…

[SpringBoot3]访问数据库

四、访问数据库 SpringBoot框架为SQL数据库提供了广泛的支持&#xff0c;既有用JdbcTemplate直接访问JDBC同时支持“object relational mapping”技术&#xff08;如MyBtais、Hibernate&#xff09;。SpringData独立的项目提供对多种关系型和非关系型数据库的访问支持&#xf…

【Vue-Router】命名视图

命名视图 同时 (同级) 展示多个视图&#xff0c;而不是嵌套展示&#xff0c;例如创建一个布局&#xff0c;有 sidebar (侧导航) 和 main (主内容) 两个视图&#xff0c;这个时候命名视图就派上用场了。 可以在界面中拥有多个单独命名的视图&#xff0c;而不是只有一个单独的出…

【Maven】SpringBoot项目使用maven-assembly-plugin插件多环境打包

SpringBoot项目使用maven-assembly-plugin插件多环境打包 1.创建SpringBoot项目并在pom.xml文件中添加maven-assembly-plugin配置 <!-- 多环境配置 --><profiles><!-- 开发环境 --><profile><id>dev</id><properties><prof…

Leaflet入门,Leaflet加载xyz地图,以vue-leaflet插件加载高德地图为例

前言 本章介绍Leaflet使用vue2-leaflet或者vue-leaflet插件方式便捷加载xyz高德地图。 # 效果演示 vue如何使用Leaflet vue2如何使用:《Leaflet入门,如何使用vue2-leaflet实现vue2双向绑定式的使用Leaflet地图,以及初始化后拿到leaflet对象,方便调用leaflet的api》 vue3…

代码随想录算法训练营之JAVA|第二十九天|1005. K 次取反后最大化的数组和

今天是第29天刷leetcode&#xff0c;立个flag&#xff0c;打卡60天。 算法挑战链接 1005. K 次取反后最大化的数组和https://leetcode.cn/problems/maximize-sum-of-array-after-k-negations/ 第一想法 题目理解&#xff1a;数组在进行K次取反后&#xff0c;求累加的最大值。…

Rust 复数运算,重载加减乘除运算

复数 基本概念 复数定义 由实数部分和虚数部分所组成的数&#xff0c;形如a&#xff0b;bi 。 其中a、b为实数&#xff0c;i 为“虚数单位”&#xff0c;i 的平方等于&#xff0d;1。 a、b分别叫做复数a&#xff0b;bi的实部和虚部。 当b&#xff1d;0时&#xff0c;a&am…