HTML基础第十讲---排版卷标
转自:https://i.cnblogs.com/posts?categoryid=1121494
网页的排版部份也是很重要的一环,有些现成的卷标就可以让您轻易的完成缩排或是一些特殊格式的编排喔!
【文字置左、置中、置右】
1. 使用方法:老实说,刚刚我们学过的分段卷标<p>再加上一些简单的属性设定,就可以让其整个文字段落置左、置中或置右了,就如下表所示:
| 原始码 | 呈现结果 |
| <p align=left>文字靠左</p> |
文字靠左 |
| <p align=center>文字置中</p> |
文字置中 |
| <p align=right>文字靠右</p> |
文字靠右 |
2. 卷标解说:嗯!秘诀就在于「align=对齐位置」而已啦!align是分段卷标<p>的属性之一,这个属性将来会常常在不同卷标中看到,它的功能是专门在设定「水平对齐位置」,其常见的设定值有三个,也就是置左(align=left)、置中(align=center)、置右(align=right)。
【置中卷标】
1. 使用方法:<center>这是置中</center>
2. 卷标解说:这个卷标是最常用到的卷标了,除了文字,对于图片、表格,任何可以显现在网页上的东西都可以置中喔!
3. 使用范例:
| 原始码 | 呈现结果 |
| <center>这是最中间</center> | 这是最中间 |
【向右缩排卷标】
1. 使用方法:<blockquote>要缩排的文字</blockquote>
2. 卷标解说:利用<blockquote></blockquote>这个卷标可以将其包起来的文字,全部往右缩排。而且加一组卷标,往右缩排一单位,加两组卷标,往右缩排两单位,依此类推。
3. 使用范例:
| 原始码 | 呈现结果 |
| <blockquote>缩排1单位</blockquote> |
|
| <blockquote><blockquote>缩排2单位</blockquote></blockquote> |
缩排2单位 |
【保存原始格式卷标】
1. 使用方法:<pre>文字内容</pre>
2. 卷标解说:利用<pre></pre>这个卷标可以将其包起来的文字排版、格式,原封不动的呈现出来。算是相当好用的卷标之一。
3. 使用范例:
| 原始码 | 呈现结果 |
| <pre> 文 字 格 式 </pre> |
文 字 格 式 |
HTML基础第十讲---排版卷标的更多相关文章
- HTML基础第八讲---序列卷标
转自:https://i.cnblogs.com/posts?categoryid=1121494 什么叫做序列卷标?其实,这是一个大家都蛮熟悉的东西,只是在网页中换个名称来称呼罢了,序列卷标的功能在 ...
- Bootstrap <基础三十二>模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Bootstrap <基础三十>Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...
- Bootstrap <基础二十九>面板(Panels)
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
- Bootstrap <基础二十五>警告(Alerts)
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
- Bootstrap<基础二十四> 缩略图
Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...
- Bootstrap <基础二十二>超大屏幕(Jumbotron)
Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...
随机推荐
- 线程框架Executor的用法举例
java5线程框架Executor的用法举例 Executor 是 java5 下的一个多任务并发执行框架(Doug Lea),可以建立一个类似数据库连接池的线程池来执行任务.这个框架主要由三个接口和 ...
- Bundles软件
Bundle 称为:软件集 或 打包捆绑软件(软件束) Bundle就是一组包含了文件集,软件包或许可程序产品的软件,它们组合在一起为了实现一个特定的功能 快速来列出系统bundle软件 sm ...
- 学习TF:《TensorFlow实战》中文版PDF+源代码
深度学习乃至人工智能正逐渐在FinTech领域发挥巨大的作用,其应用包括自动报告生成.金融智能搜索.量化交易和智能投顾.而TensorFlow为金融业方便地使用深度学习提供了可能.<Tensor ...
- 学习推荐《从Excel到Python数据分析进阶指南》高清中文版PDF
Excel是数据分析中最常用的工具,本书通过Python与Excel的功能对比介绍如何使用Python通过函数式编程完成Excel中的数据处理及分析工作.在Python中pandas库用于数据处理,我 ...
- SWFupload多图片上传入门教程
本文为转载内容,但所讲内容亲身试验证明可用,转载过来希望能帮助到有需要的人. 转载地址:http://blog.csdn.net/kongjiea/article/details/24290373#c ...
- 洛谷 P1913 L国的战斗之伞兵
P1913 L国的战斗之伞兵 题目背景 L国即将与I国发动战争!! 题目描述 为了在敌国渗透作战,指挥官决定:派出伞兵前往敌国!然而敌国的风十分强烈,能让伞兵在同一高度不停转悠,直到被刮到一个无风区… ...
- Android基础新手教程——1.2.1 使用Eclipse + ADT + SDK开发Android APP
Android基础新手教程--1.2.1 使用Eclipse + ADT + SDK开发Android APP 标签(空格分隔): Android基础新手教程 1.前言 这里我们有两条路能够选,直接使 ...
- android 动画xml属性具体解释
/** * 作者:crazyandcoder * 联系: * QQ : 275137657 * email: lijiwork@sina.com * 转载请注明出处! */ android 动画属性具 ...
- Web跨域问题基础
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只 ...
- pipPython运维日记
一 Python 工作环境管理 1.1 使用 pyenv 管理不同的Python 版本 克隆项目安装 git clone https://github.com/yyuu/pyenv.git ~/.py ...