html和css制作简单的页面,HTML+CSS基础训练之作一个简单页面的布局

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

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

为了更好的学习WEB前端开发技术，本人将根据专业课所学以及自学的成果进行总结整理并实时更新分享！！

俺只是一名大二的小🌶️🐔第一次写文章 请你们多多海涵。

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

1、任务介绍

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

前端

2、分析布局

首先分析一下图片的布局 ，分析各个色块之间的嵌套关系

如图所示：红色的框包含的是整个页面的内容container，其中包含header、main 、footer 这三大部分(绿框)

header部分里包含logo部分

main在侧边有sider部分web

3、HTML代码实现

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

在这里我用的是div元素标签。ide

div可定义文档中的分区或节(division/section)。

div 标签能够把文档分割为独立的、不一样的部分。它能够用做严格的组织工具，而且不使用任何格式与其关联。svg

html代码以下：工具

logo

header

sider

footer