08_Bootstrap 全局 css 样式_排版3|学习笔记

简介: 快速学习08_Bootstrap 全局 css 样式_排版3

开发者学堂课程【前端开发框架 Bootstrap 使用教程08_Bootstrap 全局 css 样式_排版3】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/360/detail/4227


08_Bootstrap 全局 css 样式_排版3


目录

一、引用

二、列表


一、引用

引用:

在文档中引用其他来源的内容。

默认样式的引用:

将任何 HTML 元素包裹在<blockquote>中即可表现为引用样式。对于直接引用,建议用<p>标签。

举例:<blockquote>  

<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Integer posuere erat a ante.</p>

</blockquote>

多种引用样式:

对于标准样式的<blockquote>,可以通过几个简单的变体就能改变风格和内容。

命名来源:添加<footer>用于标明引用来源。来源的名称可以包裹进<cite>标签中。

举例:

<blockquote>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

<footer>Someone famous in <cite title="Source Title">Source Title</citex</footer>

</blockquote>

另一种展示风格:

通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

实例:

<blockquote class="blockquote-reverse >

……

</blockquote>


二、列表

无序列表:

排列顺序无关紧要的一列元素

标签:<u1>

<1i>…</1i>

</u1>

有序列表:

顺序至关重要的一组元素

标签:<o1>

<1i>…</1i>

</o1>

无样式列表:

移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,需要对所有嵌套的列表都添加这个类才能具有同样的样式。

标签:<u1 class=”list-unstyled”>

<1i>…</1i>

</u1>

内联列表:

通过设置display:inline-block;并添加少量的内补(padding),将所有元素放置于一行。

标签:

<u1 class=”list-inline”>

<1i>…</1i>

</u1>

描述:

带有描述的短语列表

标签:

<d1>

<dt>…</dt>

<dd>…</dd>

</d1>

相关文章
|
6天前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
7天前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
31 1
|
21天前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。
|
15天前
|
前端开发
css <样式一>
css <样式一>
14 1
|
23天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
9天前
|
前端开发
Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式
本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
12 0