加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

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

(2022-11-08 10:33:54)
标签:

h5前端培训

it

java培训

菁瑞优智

ui设计培训

 

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

文字的布局关系到一篇文章在网页中的美观与否,本文主要讲解HTML的布局标记。

1、行的控制

(1)换行控制

在《常用HTML标记和格式》中已经介绍过强制换行符< br>,表示一个段落中间另起一行。一个< br>标记表示换一行,如果在一行文字中出现多次< br>,就会换行多次。

同样,在《常用HTML标记和格式》中已经介绍过的段落标记< p>< /p>,也可以单独使用< p>,用作换行使用。换行< p>和强制换行< br>的区别在于,< p>换行中间会空一行,< br>不会空一行。

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

(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>

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

通过上面代码可以看出,决定无序的是< 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:用于设置内容滚动背景高度。

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有