HTML+CSS之基础训练从传统布局到Flex布局

›# 从传统布局到Flex布局

本文将结合一个实例（其实是学校留的作业），来分析传统布局和Flex的异同。

一、任务介绍：

(1)新建一个 html 页面，并完成下图所示的布局页面

(2)尝试用 ul<li 或者 ol<li 标签完成黄色线框内 3 个土黄色色块的布局
(3)黄色矩形的圆角效果是使用了 css3 中的 border-radius 这个属性进行美化

二、分析布局

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

如图所示：
container里包括header、main、footer三个大部分；
其中header里面包括logo色块 ；
main里面包括sider和content色块；
其中sider中包括头像色块和表格色块；
content中包括content1和content2色块。

HTML代码实现：

根据以上分析，接下来就可以用代码实现啦，依旧采用的是div标签 。
其中侧边栏sider中的黄色矩形list表单使用的是ul、li元素
代码如下：

<div class=" container ">
        <div class="header ">
            <div class=logo>logo
            </div>
        </div>
        <div class="main ">
            <div class="sider ">
                <div class="photo"></div>
                <ul class="list">
                    <li></li>
                    <li></li>