菁瑞优智干货来啦:文字布局—HTML+CSS

标签:
h5前端培训itjava培训菁瑞优智ui设计培训 |
文字的布局关系到一篇文章在网页中的美观与否,本文主要讲解HTML的布局标记。
1、行的控制
(1)换行控制
在《常用HTML标记和格式》中已经介绍过强制换行符< br>,表示一个段落中间另起一行。一个< br>标记表示换一行,如果在一行文字中出现多次< br>,就会换行多次。
同样,在《常用HTML标记和格式》中已经介绍过的段落标记< p>< /p>,也可以单独使用< p>,用作换行使用。换行< p>和强制换行< br>的区别在于,< p>换行中间会空一行,< br>不会空一行。
(2)不换行控制
格式:< nobr>菁瑞优智< /nobr>
该标记中的文字,不会换行,不管有多长,都在一行里显示。不换行控制在实际中不会经常用到。
2、文字对齐
文字对齐很重要,是一种经常用到的文字布局方式。
语法:align="#"
#可以为left(向左)、right(向右)、center(居中)。
align需要配合< p>< /p>、< div>< /div>(后面会学到)等使用,表示文字在标记中向某个方向偏移,当然,除了文字,图片也是可以的。
如文字右对齐:< p align="right">菁瑞优智< /p>
cener可不用align关键字,进行居中处理
< center>菁瑞优智< /center>
3、列表
列表分为有序列表和无序列表。我们在浏览网页新闻时,有的新闻列表标题前是一个小圆点,这种表示无序列表,而有的标题前是有序的数字,这种表示有序的列表。
(1)无序列表
< ul>
< li>表项一< /li>
< li>表项二< /li>
< li>表项三< /li>
< /ul>
(2)有序列表
< ol>
< li>表项一< /li>
< li>表项二< /li>
< li>表项三< /li>
< /ol>
通过上面代码可以看出,决定无序的是< ul>,决定有序的是< ol>,而< li>只是里面的列表项,如果想列出更多的列表项,那么就在里面添加多个< li>即可。
4、 制作滚动文字
通过前面的学习,相信大家已经能够很好地控制各种段落文字的显示方式,不过无论怎么设置,文字都是静态的。那怎样让文字动起来呢?
(1)设置文字滚动
格式:< marquee>菁瑞优智< /marquee>
默认从右到左,循环滚动。
(2)设置文字滚动方向
格式:< marquee direction=“#”>菁瑞优智< /marquee>
direction属性用于设置内容的滚动方向,#表示方向,属性值有left(向左)、right(向右)、up(向上)、down(向下)。
(3)设置文字滚动的速度和形式
scrollamount:用于设置内容滚动速度。
behavior:用于设置内容滚动方式,默认为scroll,即循环滚动。当其值为alternate时,内容将来回循环滚动;当其值为slide时,内容滚动一次即停止,不会循环。还有一个loop属性可设置其滚动循环次数,默认为没有限制。
scrolldelay:用于设置内容滚动的时间间隔。
bgcolor:用于设置内容滚动背景色(类似于body的背景色设置)。
width:用于设置内容滚动背景宽度。
height:用于设置内容滚动背景高度。