先给大家看一看效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/510d3feff0741632b32e385d3ff49838.png)
这个样式我们需要做如下处理
HTML 部分
-
编写 HTML 代码
-
使用 div 标签编写好元素
-
然后就是 在 head 标签里直接设置样式,或者通过外部文件,引用 css 样式
CSS样式设置部分
4. 通过外部文件,通过 link 标签引用 css 样式文件。
5. 设置 width = 100%, height = 50px;
6. z-index: 设置 100
7. flex 布局,居中处理
三、代码实现
=====================================================================
3.1 不引用外部样式