扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
1、打开Notepad++,新建一个文件
成都创新互联公司拥有网站维护技术和项目管理团队,建立的售前、实施和售后服务体系,为客户提供定制化的成都网站设计、网站建设、网站维护、光华机房服务器托管解决方案。为客户网站安全和日常运维提供整体管家式外包优质服务。我们的网站维护服务覆盖集团企业、上市公司、外企网站、成都商城网站开发、政府网站等各类型客户群体,为全球近1000家企业提供全方位网站维护、服务器维护解决方案。
2、输入图中内容:
3、保存为:css.html,当然你也可以使用其它的名字,但扩展名需要使用.htm或.html
4、选择文件的保存位置,点击保存按钮
5、然后添加一个标签,输入一段用来测试的文字。
6、使用浏览器打开查看显示样式,现在还没有缩进。
7、接下来添加样式,这里我们使用内联样式,给P标签添加样式: style="text-indent:2em;"
8、再刷新刚刚打开的网页看效果,是不是缩进了两个字符啊!
这里我们是使用em这个单位来缩进了两个字符,你也可以使用px作为单位来缩进指定的像素。
text-indent: 2em;
具体方法:
新建一个html代码文件,然后在这个html代码页面上创建一个div,同时给这个div设置一个class类;然后在这个div中创建几个p,并个p添加上内容。
代码:
div class="cont"
p顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多/p
p的顶顶顶顶顶的顶顶顶顶顶/p
p顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多/p
/div
设置样式。在title标签后面新建一个style,在这个style设置cont类的宽为400px,然后设置p标签的首行缩进为两个字符。如图:
代码:
style
.cont{
width:400px;
}
.cont p{
text-indent: 2em;
}
/style
使用浏览器打开,即可看到首行缩进的效果。如图:
所有代码。直接复制所有代码,粘贴到新建html文件上,保存后使用浏览器打开即可看到所有效果。
代码:
!DOCTYPE html
html
head
meta charset="UTF-8"
title首行缩进/title
style
.cont{
width:400px;
}
.cont p{
text-indent: 2em;
}
/style
/head
body
div class="cont"
p顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多/p
p的顶顶顶顶顶的顶顶顶顶顶/p
p顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多/p
/div
/body
/html
扩展资料:
CSS text-indent属性规定文本块中首行文本的缩进。
注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。
注意:在 CSS 2.1 之前,text-indent 总是继承计算值,而不是声明值。
用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值,这会产生一种“悬挂缩进”的效果。
所有浏览器都支持 text-indent 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
参考资料来源:百度百科:CSS text-indent
你好使用css实现首行缩进其实很简单,使用text-indent属性即可。但是如果要缩进几个字符可以使用em单位,一般而言中文段首是缩进两个汉字,可以这么写:123p
{
text-indent:
2em;}自然,如果缩进两个字符(即:一个汉字),就可以这么写:123p
{
text-indent:
1em;}希望对你有帮助,如有疑问,请追问。望采纳~~
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流