广告合作
  • 今日头条

    今日头条

  • 百度一下

    百度一下,你就知道

  • 新浪网

    新浪网 - 提供新闻线索,重大新闻爆料

  • 搜狐

    搜狐

  • 豆瓣

    豆瓣

  • 百度贴吧

    百度贴吧——全球领先的中文社区

  • 首页 尚未审核订阅工具 订阅

    text-indent属性的使用语法

    来源:网络收集  点击:  时间:2024-02-23
    【导读】:
    我们在下网页的时候,比如小说,或者是文章,简介等类型的内容是,都会分段落,而段落的首行都是具有缩进的效果,那这里就给大家说一下html文本首行缩进的实现方法工具/原料more电脑Dreamweaver方法/步骤1/9分步阅读

    我们在下网页的时候,比如小说,或者是文章,简介等类型的内容是,都会分段落,而段落的首行都是具有缩进的效果,那这里就给大家说一下html文本首行缩进的实现方法

    2/9

    首先我现在html中我先给一个div盒子模型,让它容纳少量文字就自动换行,来显示效果,添加的代码如下:

    style

    .ai{

    height:300px;

    width:200px;

    background:#CCC;}

    /style

    /head

    body

    div class=ai

    p id=sa思念是一种病p

    /div

    /body

    3/9

    绕后我给一个p段落,里边装的是段落文本:

    p id=sa才导致了所有的天气现象。你看到的云、风、飓风、龙卷风、下雨、下雪、下冰雹、彩虹、日晕,哎不想写全了,反正就是这些所有的东西,都是因为这三个原因产生的。p

    4/9

    这个时候在浏览器显示的效果是这样子的,撑满了盒子会自动换行,但是,显然在这里首行没有缩进,这个时候就可以使用text-indent来完成文本缩进

    5/9

    text-indent代码实现方法如下:

    p{

    text-indent:20px;}

    这里缩进的是20像素来看一下效果

    6/9

    现在在浏览器查看一下效果,这时文本首行就已经被缩进了

    7/9

    上边缩进使用的是像素,那这就很难保证我们所缩进的文本是两个字,那我们现在就把单位px改成em,也就是缩进几个字的意思,

    代码如下所示:

    p{

    text-indent:2em;}

    8/9

    这里的2是缩进两个字符的意思,现在我们就来看看浏览器显示的效果,现在它就会很准确的给我们缩进两个字符了

    9/9

    教程就到这里,祝学习愉快,多加练习

    本文关键词:

    版权声明:

    1、本文系转载,版权归原作者所有,旨在传递信息,不代表看本站的观点和立场。

    2、本站仅提供信息发布平台,不承担相关法律责任。

    3、若侵犯您的版权或隐私,请联系本站管理员删除。

    4、文章链接:http://www.1haoku.cn/art_127118.html

    相关资讯

    ©2019-2020 http://www.1haoku.cn/ 国ICP备20009186号05-07 17:07:56  耗时:0.026
    0.0258s