HTML+CSS基础训练之做一个简单页面的布局

最新推荐文章于 2021-05-27 11:38:34 发布

WH小可爱

最新推荐文章于 2021-05-27 11:38:34 发布

阅读量5.6k

点赞数 11

分类专栏：笔记文章标签： css html

版权

本文介绍了如何使用HTML和CSS实现一个简单的居中页面布局。内容包括任务介绍、布局分析、HTML结构实现及CSS美化。通过分析布局和编写代码，详细解释了如何创建一个包含header、main和footer的container，并使用margin、绝对定位等技巧来调整元素的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@HTML+CSS基础之一个简单页面的布局

为了更好的学习WEB前端开发技术，本人将根据专业课所学以及自学的成果进行总结整理并实时更新分享！！
俺只是一名大二的小🌶️🐔第一次写文章 请大家多多海涵。

下面进入正题：布局是网页设计的基础中的基础，一个好的布局可以让人一目了然，一个失败的布局会让协同人员抓狂。所以前端开发，从布局开始。

如图所示：一个比较基础的居中布局。Body指的是窗口，contianer(红色线框)是真正页面的内容，让container保持在页面的居中的位置，可以假装在大屏幕和小屏幕保持一致，是目前页面布局的一种方法，目前还有使用这种布局方式有，腾讯网，新浪首页等。
AIT

首先分析一下图片的布局，分析各个色块之间的嵌套关系
在这里插入图片描述
如图所示：红色的框包含的是整个页面的内容container，其中包含header、main 、footer 这三大部分（绿框）
header部分里包含logo部分
main在侧边有sider部分

根据以上的划分，我们已经知道这个页面的大概布局以及这个页面由 container、header 、main、footer、logo、sider六个元素构成。接下来就是html代码实现啦～
在这里我用的是div元素标签。

div可定义文档中的分区或节（division/section）。
div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

html代码如下：

<body style="background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);">