列表字体和间距

当创建样式列表时,需要调整样式,使其保持与周围元素相同的垂直间距和相互间的水平间距。
 
示例代码

/* 基准样式 */
html { font-family: Helvetica, Arial, sans-serif; font-size: 10px; }
/*设置网页字体基准大小*/
h2 { font-size: 2rem; }
ul,ol,dl,p { font-size: 1.5rem; }
li, p { line-height: 1.5; }
/*为列表、段落 设置相对字体大小,和行间距,有利于保持垂直间距一致*/ /* 描述列表样式 */
dd, dt { line-height: 1.5; }
dt { font-weight: bold; }
dd { margin-bottom: 1.5rem; }
/*描述列表样式与基准样式一致*/
  • 规则集2和3为标题、不同的列表类型和段落以及设置了相对字体大小(这些列表的子元素将会继承该规则集),这就意味着每个段落和列表都将拥有相同的字体大小和上下间距,有助于保持垂直间距一致。
  • 规则集4在段落和列表项目上设置相同的 line-height ,因此段落和每个单独的列表项目将具有相同的行间距, 这也将有助于保持垂直间距一致。
  • 规则集5-7适用于描述列表,我们在描述列表的术语和其描述上设置与段落和列表项相同的行高,以及 margin-bottom 为1.5 rem(与段落(p)和列表项目(li))相同。 再次强调一遍,这里很好地实现了一致性! 我们还使描述术语具有粗体字体,因此它们在视觉上脱颖而出。
 
描述列表解释: dl dt dd 是一套组合标签,且使用了dt和dd,则外层必须用dl包裹。
使用方法如下,
<dl>
  <dt>标题1</dt>
  <dd>列表项1</dd>
  <dd>列表项2</dd>
  <dt>标题2</dt>
  <dd>列表项1</dd>
  <dd>列表项2</dd>
</dl>
 

列表样式

可以在<ul>或<ol>元素上用三个基本属性设置样式:
  • list-style-type 设置列表项目符号类型
    • 无序列表:方形、实心圆、空心圆
    • 有序列表:数字、字母、罗马数字、大小写
    • 其他样式
  • list-style-position 设置项目符号位置在表项内还是外
    • inside
    • outside
    • 0 0 表示每个列表项的左上侧
  • list-style-image 为项目符号自定义图片
    • url(……)
 

列表计数管理

start
制定列表从第几项开始计数
 
reversed
设置列表倒计数
<ol start="4" reversed> <li>……
 
value
为列表项指定数值
<li value="2"> ……
 
 
 
 
 

CSS基础-列表的更多相关文章

  1. CSS基础 列表相关的属性的使用

    1.无序列表:就是不需要排列顺序的情况,用无序列表 语法结构:<ul> <li></li> <li></li> </ul> 特点 ...

  2. css基础-盒子模型+背景和列表

    border-style的值: none 无 dotted 点状 dashed 虚线 solid 实线 double 双实线 margin: 垂直方向两个相邻元素都设置了外边距,那么外边距会发生合并 ...

  3. HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用

    文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...

  4. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  5. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  6. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  8. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

  9. CSS 基础总结

    CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...

随机推荐

  1. 3. Spark常见数据源

    *以下内容由<Spark快速大数据分析>整理所得. 读书笔记的第三部分是讲的是Spark有哪些常见数据源?怎么读取它们的数据并保存. Spark有三类常见的数据源: 文件格式与文件系统:它 ...

  2. [读书笔记] Python语言及其应用

    记录下秋招期间看的一本Python工具书<Python语言与其应用>,查漏补缺,部分内容整理如下: 易混淆概念 1.1 删除 - del,remove()和pop() 1.2 复制 - 浅 ...

  3. 类和对象在JVM中是如何存储的,竟然有一半人回答不上来!

    前言 这篇博客主要来说说类与对象在JVM中是如何存储的,由于JVM是个非常庞大的课题,所以我会把他分成很多章节来细细阐述,具体的数量还没有决定,当然这不重要,重点在于是否可以在文章中学到东西,是否对J ...

  4. 找回了当年一篇V4L2 linux 摄像头驱动的博客

    从csdn找回 , 无缘无故被封了..当时损失不少啊!!!!!!!!! linux 摄像头驱动 :核心数据结构:    /**     * struct fimc_dev - abstraction ...

  5. linux云服务搭建七日杀服务器

    目录 准备工作 1.设置swap 2.安装screen 3.安装SteamCmd运行所需环境 4.创建一个用户 steamCMD与七日杀服务器端 1.下载并安装SteamCMD 2.登录steam账号 ...

  6. Mysql binlog备份数据及恢复数据,学会这个,我在也不怕删库跑路啦~

    导读 我一直都主张,技多不压身(没有学不会的技术,只有不学习的人),多学一项技能,未来就少求人一次.网上经常听到xxx删库跑路,万一真的遇到了,相信通过今天的学习,也能将数据再恢复回来~~~ 当然啦, ...

  7. Android 滑动删除控件推荐

    implementation 'com.github.mcxtzhang:SwipeDelMenuLayout:V1.3.0' <?xml version="1.0" enc ...

  8. C语言中的const用法

    Const是什么? const是一个C语言的关键字,它限定一个变量不允许被改变.使用const在一定程度上可以提高程序的健壮性,另外,在观看别人代码的时候,清晰理解const所起的作用,对理解对方的程 ...

  9. 一遍记住Java常用的八种排序算法

    1.直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已经排好的数据列中. 将第一个数和第二个数排序,然后构成一个有序序列 将第三个数插入进去,构成一个新的有序序列. 对第四个数.第五个数--直 ...

  10. vue项目中echarts属性总结

    <div id="echarts" style="width: 600px;height: 400px;margin-top: 100px;margin-left: ...