当前位置: 首页 > news >正文

设计列表和超链接

在网页中,大部分信息都是列表结构,如菜单栏、图文列表、分类导航、新闻列表、栏目列表等。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.lryc.cn/news/123890.html

相关文章:

  • rust包跨平台编译,macbook ,linux
  • JAVA集合-List
  • Python|OpenCV-绘制图形和添加文字的方法(2)
  • 使用GO编译wasm文件并在nodejs中使用
  • BM22 比较版本号
  • 【Java】Maven配置文件帮助文档(settings.xml 和 pom.xml)
  • 人脸识别技术应用安全管理规定(试行)
  • FPGA应用学习-----FIFO双口ram解决时钟域+asic样机的时钟选通
  • zabbix案例--zabbix监控Tomcat
  • Electron 应用实现截图并编辑功能
  • 前端= 结构(HTML)+ 样式(CSS)+ 行为(JavaScript)
  • Flink-网络流控及反压剖析
  • redis 和 mongodb 比较
  • Linux 主函数参数介绍
  • 资料分析(三)—— 基期、现期、人口、增长量
  • Java 正则表达式【匹配与分组基本原理】
  • ThreadLocal源码解析
  • RocketMQ 5.1.0 源码详解 | Producer 发送流程
  • 电脑ip地址怎么改 ip地址怎么改到别的城市
  • Android Studio实现列表展示图片
  • 每天一道leetcode:300. 最长递增子序列(动态规划中等)
  • 【无监督】2、MAE | 自监督模型提取的图像特征也很能打!(CVPR2022 Oral)
  • pytorch单机多卡后台运行
  • linux配置上网 linux adsl拨号上网设置
  • XML学习基础知识归纳(一)
  • 2023.8.14论文阅读
  • FL Studio for Windows-21.1.0.3713中文直装版功能介绍及系统配置要求
  • 基于网格变形的二维图像变形算法:C++实现与应用
  • 【数据结构】八大排序详解
  • VSCode如何设置高亮