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)的步骤如下: ...
随机推荐
- POJ 1671 第二类斯特林数
思路: 递推出来斯特林数 求个和 if(i==j)f[i][j]=1; else f[i][j]=f[i-1][j-1]+f[i-1][j]*j; //By SiriusRen #include &l ...
- 暑假集训-WHUST 2015 Summer Contest #0.2
ID Origin Title 10 / 55 Problem A Gym 100625A Administrative Difficulties 4 / 6 Problem B Gym 1006 ...
- IIS 优化
http://www.cnblogs.com/wangjingblogs/archive/2013/02/27/2934706.html 通过对IIS7的配置进行优化,调整IIS7应用池的队列长度,请 ...
- css3 边框阴影效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- C/C++(C++返回对象与应用区别,类成员的存储)
返回对象与应用区别: 拷贝构造器发生的时机: 1.构造新对象 A a, A b = a; 2.传参或返回对象 对于普通变量来说,传引用效果不是很明显,对于类对象而言,传对象效果很高. 传引用等价于扩大 ...
- Perl初学笔记
标量数据 标量:数字和字符串. 数字:Perl不存在整形,全部是double类型.整形常量会被自动转换为浮点型. Perl数字字面量(直接量):+-和小数点是非必须的,e代表10的多少次方.例如:-1 ...
- U-BOOT启动流程分析--start.s(二)
一.概述 u-boot的启动流程: 从文件层面上看主要流程是在两个文件中:cpu/arm920t/start.s,lib_arm/board.c, 先来分析start.s 在flash中执行的引 ...
- zip---解压缩文件
zip命令可以用来解压缩文件,或者对文件进行打包操作.zip是个使用广泛的压缩程序,文件经它压缩后会另外产生具有“.zip”扩展名的压缩文件. 语法 zip(选项)(参数) 选项 -A:调整可执行的自 ...
- Python学习第一篇
好久没有来博客园了,今天开始写自己学习Python和Hadoop的学习笔记吧.今天写第一篇,Python学习,其他的环境部署都不说了,可以参考其他的博客. 今天根据MachineLearning里面的 ...
- 小米开源文件管理器MiCodeFileExplorer-源码研究(3)-使用最多的工具类Util
Util.java,使用最广泛~代码中很多地方,都写了注释说明~基本不需要怎么解释了~ package net.micode.fileexplorer.util; import java.io.Fil ...