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)的步骤如下: ...
随机推荐
- Linux常用音乐播放器
1.Rhythmbox是一个音乐播放和管理应用,GNOME桌面环境自带,它可以播放各种音频格式的音乐管理收藏的音乐.同时还具有音乐回放.音乐导入.刻录音频CD.显示专辑封面.显示歌词.DAAP共享等功 ...
- appid、appkey、appsecret、accesstoken,消息模板
app_id, app_key, app_secret , 对于平台来说, 需要给你的 你的开发者账号分配对应的权限:1. app_id 是用来标记你的开发者账号的, 是你的用户id, 这个id 在数 ...
- CSUOJ 1603 Scheduling the final examination
1603: Scheduling the final examination Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 49 Solved: 1 ...
- Expression表达式树(C#)
Lambda表达式: 1.下面举例通过Lambda表达式创建了一个用于验证Name的Func委托. //通过Lambda表达式创建一个对象的Name属性验证委托 Func<SearchInfo, ...
- MySQL事务(event scheduler)的学习【事务创建之后,没有运行的问题】
[本篇文章主要解决的是,MySQL事务创建之后,没有运行的问题] 首先从这里开始:http://www.w3schools.in/mysql/event-schedule/,创建了基本的MySQL事务 ...
- PHP实现事件机制实例分析
PHP实现事件机制实例分析 内置了事件机制的语言不多,php也没有提供这种功能.事件(Event)说简单了就是一个Observer模式.实现起来非常easy.可是有所不同的是,事件的监听者谁都能够加, ...
- Java的线程机制
一.Java中实现多线程的两种方式1) 继承Thread类 Thread类包括了包括和创建线程所需的一切东西. Thread 最重要的方法是 run().编写线程程序时须要覆盖 run() 方法,ru ...
- js---06函数传参数
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- OpenCV —— 图像变换
将一副图像转变成另一种表现形式 ,比如,傅里叶变换将图像转换成频谱分量 卷积 —— 变换的基础 cvFilter2D 源图像 src 和目标图像 dst 大小应该相同 注意:卷积核的系数应该是浮点类 ...
- Socket实例之客户端向服务端数据库上传文件UI版
http://blog.csdn.net/su20145104009/article/details/52843735 首先实现分析: 1用户注册 客户单选择‘用户注册’,提示要输入用户名,密码,确认 ...