天来说下HTML语言CSS样式字体的文本缩进 text-indent
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。来看下语法使用:
div {
text-indent:10px;
}
来看下使用效果,使用前:
每一行没有缩进
使用后:
每个段落的第一行都缩进了20px,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式之文本缩进</title>
<style>
p {
text-indent: 20px;
}
</style>
</head>
<body>
<p>第一年,我考上了大学,来到了北京,冬天的雪就像冷冷的冰雨,
在脸上胡乱的拍.摇啊摇,摇啊摇,摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。
</p>
<p>一片冰心在玉壶,我劝天公重抖擞,不拘一格降人才。一片冰心在玉壶,我劝天公重抖擞,不拘一格降人才。</p>
<p>只有聆听你的声音,才能抚平我寂寞无聊的心,HTML5。只有聆听你的声音,才能抚平我寂寞无聊的心,HTML5</p>
</body>
</html>
需要缩进的像素可以是任意值,除了正的px,还可以是负的值,可以看下效果:
这不是我的浏览器坏了,展示不了段落首部,是将px修改为-20px
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式之文本缩进</title>
<style>
p {
text-indent: -20px;
}
</style>
</head>
<body>
<p>第一年,我考上了大学,来到了北京,冬天的雪就像冷冷的冰雨,
在脸上胡乱的拍.摇啊摇,摇啊摇,摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。
</p>
<p>一片冰心在玉壶,我劝天公重抖擞,不拘一格降人才。一片冰心在玉壶,我劝天公重抖擞,不拘一格降人才。</p>
<p>只有聆听你的声音,才能抚平我寂寞无聊的心,HTML5。只有聆听你的声音,才能抚平我寂寞无聊的心,HTML5</p>
</body>
</html>
根据大家写文章段落的习惯,一般都是缩进两个字,但是20px或者10px是不是2个字的长度呢,回答不是的。缩进字数长度有专门的单位: em
通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
em是一个相对单位,就是当前元素 font-size 1个文字的大小,如果当前元素没有设置大小,则会按照1个父元素文字大小。
我们来看下效果:
确实是缩进了2个字的长度,看下对应代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式之文本缩进</title>
<style>
p {
text-indent: 2em;
}
</style>
</head>
<body>
<p>第一年,我考上了大学,来到了北京,冬天的雪就像冷冷的冰雨,
在脸上胡乱的拍.摇啊摇,摇啊摇,摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。
</p>
<p>一片冰心在玉壶,我劝天公重抖擞,不拘一格降人才。一片冰心在玉壶,我劝天公重抖擞,不拘一格降人才。</p>
<p>只有聆听你的声音,才能抚平我寂寞无聊的心,HTML5。只有聆听你的声音,才能抚平我寂寞无聊的心,HTML5</p>
</body>
</html>
每个段落第一行如果想要三个字间距,就是3em
今天就先到这里,大家周末快乐~
elocity中常常会写出#foreach #if #else #end等语句,
但由于模板文件中html本身就带有缩进,所以最终的缩进,并不符合velocity语句的含义。当主要针对velocity逻辑阅读时,很不方便
没有处理格式代码:
模板代码:
模板代码截图
生成html文件截图:
#if产生缩进后的截图
解决办法:
“#if#foreach#else#end”这些语法,不用任何缩进。并且行尾加##注释,表示不解析后面空格
定格写,末尾加##注释
取消缩进后结果
velocity-wiki地址
https://cwiki.apache.org/confluence/display/velocity/VelocityWhitespaceTruncatedByLineComment
解决办法截图
TML 框架
框架的作用就是把浏览器窗口划分成多个子窗口。
每个子窗口可以载入各自的HTML文档。
框架(frameset)与页面主体body是同级的关系
1.框架的整体结构
<frameset rows="高度"> ~ </frameset>
<frameset cols="宽度"> ~ </frameset>
<frame src="http://www.haook.cn" name="框架名称">
<noframes> ~ </noframes>
属性属性值说明
rowspx , %上下分割窗口
colspx , % 左右分割窗口
srcurl指定要载入到框架的页面地址
name指定框架名称
例 1:上中下分割框架
<frameset rows="高度A,高度B,高度C">
<frame src="1.html" />
<frame src="2.html" />
<frame src="3.html" />
</frameset>
例 2:左右分割框架
<frameset cols="宽度A, 宽度B, 宽度C">
<frame src="1.html" />
<frame src="2.html" />
<frame src="3.html" />
</frameset>
例 3:
<frameset rows="高度A,高度B">
<frame src="top.html" />
<frameset cols="宽度A,宽度B">
<frame src="menu.html" />
<frame src="main.html" />
</frameset>
</frameset>
2.设置框架的显示方式
<frame scrolling="yes" noresize />
<frame marginwidth="左右缩进" marginheight="上下缩进" />
属性属性值说明
scrolling yes、no、auto是否显示滚动条
noresize 禁止改变框架的尺寸大小
marginwidthpx框架内左右的空白区域
marginheightpx框架内上下的空白区域
frameborder1, 0是否显示边框
framespacing0框架与框架之间的空白
border0 边框
3. <iframe> 内嵌框架
<iframe src="URL" name="框架名"> ~ </iframe>
属性属性值说明
widthpx , %指定框架的宽度
heightpx , % 指定框架的高度
scrollingyes,no,auto是否显示滚动条
frameborder1, 0是否显示边框
head 头信息
1.设置页面标题
<title> ~ </title>
2. 设置页面编码
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
utf-8 多国语言编码
gb2312 中文简体编码
3. 设置页面关键字,内容介绍
<meta name="keywords" content="关键字1,关键字2,…" />
<meta name="description" content="内容介绍" />
*请认真填写需求信息,我们会在24小时内与您取得联系。