转自: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>

缩排1单位

<blockquote><blockquote>缩排2单位</blockquote></blockquote>
缩排2单位

【保存原始格式卷标】

1. 使用方法:<pre>文字内容</pre>

2. 卷标解说:利用<pre></pre>这个卷标可以将其包起来的文字排版、格式,原封不动的呈现出来。算是相当好用的卷标之一。

3. 使用范例:

原始码 呈现结果
<pre>
文 字
 格 式
</pre>
文 字
 格 式

HTML基础第十讲---排版卷标的更多相关文章

  1. HTML基础第八讲---序列卷标

    转自:https://i.cnblogs.com/posts?categoryid=1121494 什么叫做序列卷标?其实,这是一个大家都蛮熟悉的东西,只是在网页中换个名称来称呼罢了,序列卷标的功能在 ...

  2. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  3. Bootstrap <基础三十>Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  4. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  5. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  6. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  7. Bootstrap <基础二十五>警告(Alerts)

    警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...

  8. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

  9. Bootstrap <基础二十二>超大屏幕(Jumbotron)

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

随机推荐

  1. toggleClass slideToggle

    $("#wrapper").toggleClass("toggled"); $("p").slideToggle(1000); demo: ...

  2. XML获取节点信息值

    XmlDocument doc = new XmlDocument(); doc.LoadXml(sreturn); XmlNode xNode = doc.SelectSingleNode(&quo ...

  3. centos中mysql 安装以及配置,建库

    1.检测系统内部有没有安装其他的mysql数据库 rpm -qa | grep mysql 然后如果有的话删除这些mysql yum remove 查出来的所有名字 2.彻底删除系统中mysql的目录 ...

  4. centos 5的yum源无法使用的解决方法( 转载)

    由于centos 5 已经停更.于是导致yum源也不能用了. 例如安装screen的时候提示 Determining fastest mirrors* base: denver.gaminghost. ...

  5. rpm2cpio---如何不安装但是获取rpm包中的文件

    如何不安装但是获取rpm包中的文件 使用工具rpm2cpio和cpio rpm2cpio xxx.rpm | cpio -idmv 参数i表示提取文件.v表示指示执行进程,d和make-directo ...

  6. PHP设置30秒内对页面的访问次数

    <?php //Calculate 60 days in the future //seconds * minutes * hours * days + current time $intime ...

  7. Add Webhooks to Your API the Right Way

    Add Webhooks to Your API the Right Way Adam DuVander / December 15, 2016 In the last 10 years, APIs ...

  8. nagios插件之登陆防火墙实现session监控

    ssh_firewall_session.sh -- 登陆防火墙并运行dis session statistics firewall_check_sessions.c -- 调用上面脚本.过滤出ses ...

  9. swift 创建第一个UIAlertView 和UIActionSheet

    //创建 UIActionSheet //一定要指明类型.不编译不通过 func ActionSheet(sender:UITapGestureRecognizer)     {         le ...

  10. 迷茫了好一阵决定做WEB前端

    前两个学期事实上总是每一个学期给自己做一个计划.可是计划都付诸流水,不是自己不坚持,仅仅由于目标太不明白,总是不见成效.前一段时间最终感觉计划还得做,可是不能超过一个月,要把计划做到仔细到每一周每一天 ...