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)的步骤如下: ...
随机推荐
- Ubuntu 16.04 实现有线 无线同时用
因为工作的原因,经常会用有线网卡连接服务器进行配置,无线网卡上外网. 一.查看当前网关信息 pipci@ubuntu:~$ ip route showdefault via 192.168.2.1 d ...
- Node测试文章收藏
1.Nodejs实战—测试Node程序 讲解了TDD与BDD,TDD的基本原则,单元测试常用框架及使用,例如assert断言库, chai断言库, should.js断言库,断言库搭配测试框架(m ...
- 使用js实现简单放大镜的效果
实现原理:使用2个div,里面分别放大图片和小图片,在小图片上应该还有一个遮罩层,通过定位遮罩层的位置来定位大图片的相对位置,而且,遮罩层的移动应该和大图片的移动方向相反 关键: 大图片和小图片大小比 ...
- Hexo High一下以及压缩排版问题
背景介绍 集成Hight一下以及Gulp-html压缩之后出现的问题: High一下功能多次点击,会创建多个Audio对象,导致同时播放多次音乐,重音.解决办法:判断是否添加Audio对象,如果存在则 ...
- 重装python 和 yum
https://blog.csdn.net/ghostyusheng/article/details/https://segmentfault.com/q/1010000009194060/a-102 ...
- react-native-swiper苹果正常显示,Android不显示
在使用react-native-swiper时,最好不要放到(FlatList , SectionList,ListView,ScrollView 等)组件中,否则Android 可能不会正常显示图片 ...
- Mybatis使用注解进行增删改查
// 增public interface StudentMapper{ @Insert("insert into student (stud_id, name, email, addr_id ...
- 文件/文件夹权限设置命令chmod的具体使用方法
chmod是文件/文件夹权限设置的命令,在Linux中常常遇到.本博文下面总结chmod的具体使用方法. Linux/Unix的档案调用权限分为三级,即档案拥有者user.群组group.其它othe ...
- win7中下mysql-5.6.22免安装配置
windows下mysql免安装配置 1. 下载mysql免安装压缩包 下载mysql-5.6.22-winx64.zip 解压到本地D:\mysql-5.6.22-winx64 2. 修改配置文件 ...
- jQuery源码06-jQuery = function(){};给JQ对象,添加一些方法和属性,extend : JQ的继承方法,jQuery.extend()
/*! * Includes Sizzle.js 选择器,独立的库 * http://sizzlejs.com/ */ (function( window, undefined ) { //" ...