上一章 其它常见样式类型

HTML样式的语法

UX百科编辑部2024-01-08 发布
692人在学·0条笔记
收藏

写了那么多 HTML CSS 的学习,终于,要在这篇迎来具体的案例应用了。下面,就是本节课要演示的案例图,我们要通过 HTML 和 CSS 将它实现出来:

在完成设计稿以后,我们着手项目的前端界面布局,首先要先建立项目有关的文件夹,然后在这个文件夹根目录中创建 ”index.html“ 文档,再创建 img、css 两个文件夹,用来存放对应文件。

然后,通过编辑器打开 index.html,优先完成页面的标签结构创建,即预判页面中包含哪些标签,以及相应的层级结构(即文档对象模型 DOM),将它们码下来。

那么什么是 HTML 的代码结构呢,前面我们有略微提及,下面用一个树状图来理解 HTML 文档中的结构:

这么做的目的,是为了先集中精力建立一个清晰的 HTML 文档,帮助我们后续在进行样式调整的时候可以更便捷,而不用一边写 HTML 又同时调整 CSS,这样效率会非常低下。

所以,下面就可以开始动手了,优先将我们前文所说的 HTML 文档标准结构填充进去,同时在 head 中添加引用外部 CSS 文件的链接。

然后我们就要在 body 标签内,添加有关的内容框架的 div 标签了,为了展示直观,下方的标签处于 body 标签内,标准文档信息我就不展示出来了。

简单描述一下上面的结构,就是我们将页面分为三个大的模块,并在每个大模块又拆分成两个子模块,用文字解释起来如下:

  • 页面顶部区域:导航栏、广告图
  • 页面内容区域:特点介绍、分享干货
  • 页脚内容区域:站点信息、备案号

在这个过程中,为了比较好的区分代码内容,我们可以通过在开头或结尾添加 <!–注释区域–> 注释代码,提升之后的浏览效率。

并且,在通过 div 创建框架的同时,我们可以为它增加有关的 class 命名,命名的方法大家可以根据自己的习惯定,用拼音也可以,只要没有在不相关的 div 中应用到相同名称即可。下面,开始具体演示几个模块 HTML 标签的编写方式。

首先看顶部模块,对它具体的内部模块做一次拆解,然后再开始动手:

然后,我们再开始定义下一个模块特点介绍:

然后,我们再讲讲在干货分享模块中,单个卡片定义的方式:

相信通过上面几个模块的演示,大家应该能了解如何制定 HTML 标签的结构了吧,节省篇幅,页脚模块的样式我就不添加了。

我会将基础的文件框架放在素材文件夹中,大家在公众号回复 ”前端“ 即可获取。

692人在学·0条笔记
收藏
已学会
9人已学会
下一篇CSS 全局预设
相信通过上面几个模块的演示,大家应该能了解如何制定 HTML 标签的结构了吧,节省篇幅,页脚模块的样式我就不添加了。 我会将基础的文件框架放在素材文件夹中,大家在公众号回复 ”前端“ 即可获取。 在这个全局预设中,我们分别清除了 margin、padding、list-style 三个属性的默认数值...
本章笔记
仅看自己
logo