版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
本节教程主要讲述与排版相关的全局css
标记文本
<mark/>标签用于标记文本。
删除文本
<del/>标签用于删除文本。
无用文本
<s/>标签用于表示无用文本。
插入文本
<ins/>标签用于表示插入文本。
下划线文本
<u/>标签用于表示下划线文本。
小号文本
<small/>标签用于表示小号文本。
着重文本
<strong/>标签用于表示着重文本。
斜体文本
<em/>标签用于表示斜体强调文本。
对其方式
常见的对齐方式有：左对齐、右对齐、居中对齐、超出容器自动换行、超出容器不换行等。
大小写转换
常见的大小写转换有：大写转小写、小写转大写、首字母大写等。
缩略语
<abbr/>标签用于表示缩略语。
地址
<address/>标签用于表示地址。
引用
<blockquote/>标签用于表示引用。
无序列表
<ul/>标签用于表示无序列表。
有序列表
<ol/>标签用于表示有序列表。
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap入门程序</title>
<!--移动设备优先，即获得更好的响应式支持-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入Bootstrap的css文件-->
<link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
</head>
<body>
<!--标记文本-->
<p>单例模式的<mark>核心</mark>在于通过该类只能创建一个对象</p>
<!--删除文本-->
<p>公司规定不允许上班时候<del>打游戏</del>，请切记</p>
<!--无用文本-->
<p>请注意这是一个<s>无用文本</s>，望悉知</p>
<!--插入文本-->
<p>十载寒冰，难凉热血；
<ins>多年过去，历经变迁，物是人非。</ins>
然而，对于技术的探索和追求从未停歇
</p>
<!--下划线文本-->
<p>十载寒冰，难凉热血；
<u>多年过去，历经变迁，物是人非。</u>
然而，对于技术的探索和追求从未停歇
</p>
<!--小号文本-->
<p>这里是版权声明<small>违者必究</small></p>
<!--着重文本-->
<p>曾于2016年、2020年两度荣获<strong>CSDN年度十大博客之星</strong>谢谢</p>
<!--斜体文本-->
<p>曾于2016年、2020年两度荣获<em>CSDN年度十大博客之星</em>谢谢</p>
<!--左对齐-->
<p class="text-left">大家好，我是谷哥的小弟</p>
<!--右对齐-->
<p class="text-right">大家好，我是谷哥的小弟</p>
<!--居中对齐-->
<p class="text-center">大家好，我是谷哥的小弟</p>
<!--超出容器自动换行-->
<p class="text-justify">大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。</p>
<!--超出容器不换行-->
<p class="text-nowrap">大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。大家好，我是谷哥的小弟。</p>
<!--小写转大写-->
<p class="text-uppercase">hello Bootstrap</p>
<!--大写转小写-->
<p class="text-lowercase">HELLO BYE</p>
<!--首字母大写-->
<p class="text-capitalize">hello Bootstrap</p>
<!--缩略语-->
<p>
<abbr title="今年8岁">我</abbr>是一个好孩子
</p>
<!--地址样式-->
<address>
<strong>房东的猫</strong>
<p>上海市浦东区清风街9527好</p>
<a href="http://www.baidu.com">[email protected]</a>
</address>
<!--引用-->
<blockquote>
<p>public static synchronized SingletonInstance getInstance(){}</p>
</blockquote>
<blockquote style="border-left: 4px solid #ef0809; background: #f2eeec;">
<p>public static synchronized SingletonInstance getInstance(){}</p>
</blockquote>
<!--有序列表-->
<ul>
<li>小米</li>
<li>华为</li>
<li>三星</li>
<li>苹果</li>
</ul>
<!--无序列表-->
<ol>
<li>小米</li>
<li>华为</li>
<li>三星</li>
<li>苹果</li>
</ol>
<!--无样式列表-->
<ol class="list-unstyled">
<li>小米</li>
<li>华为</li>
<li>三星</li>
<li>苹果</li>
</ol>
<!--行内列表-->
<ol class="list-inline">
<li>小米</li>
<li>华为</li>
<li>三星</li>
<li>苹果</li>
</ol>
</body>
</html>
