网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 生活知识 知识问答

如何使用HTML5+CSS3属性white-space控制间距

时间:2024-10-11 22:03:47

1、第一步,双击打开HBuilder编辑工具,新建静态页面whiteSpace.html,并引入相关的文件,如下图所示:

如何使用HTML5+CSS3属性white-space控制间距

2、第二步,在body标签元素内插入div标签,使用Bootstrap样式布局;然后在div标签内插入一个无序列表,分别设置无序列表子项class属性,如下图所示:

如何使用HTML5+CSS3属性white-space控制间距

3、第三步,设置完毕后保存代码,在浏览器中预览该静态页面,如下图所示:

如何使用HTML5+CSS3属性white-space控制间距

4、第四步,在<style></style>标签内,利用class类选择器分别定义无序列表子项的空格样式,如下图所示:

如何使用HTML5+CSS3属性white-space控制间距

5、第五步,再次保存代码并预览该界面,结果发现第三个和第五个子项内容出现了移位,如下图所示:

如何使用HTML5+CSS3属性white-space控制间距

6、第六步,由于界面显示一个无序列表,再次添加样式控制整个界面渐变,如下图所示:

如何使用HTML5+CSS3属性white-space控制间距
© 2026 五度知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com