Flex改写phpcnui手册的代码及前端总结--php培训9期线上班

Flex改写phpcnui手册的代码

html代码：
<header>
    <h2>phpcn UI</h2>
    <h2>用户参考手册</h2>
</header>
<main>
   <div>
   
        <dl>
            <dt>前端基础</dt>
            <dd><a href="base/1_框架安装.html" target="content">框架安装</a></dd>
            <dd><a href="base/2_页面结构.html" target="content">页面结构</a></dd>
            <dd><a href="base/3_常用标签.html" target="content">常用标签</a></dd>
            <dd><a href="base/4_CSS选择器.html" target="content">CSS选择器</a></dd>
            <dd><a href="base/5_CSS样式控制.html" target="content">CSS样式控制</a></dd>
            <dd><a href="base/6_CSS盒模型.html" target="content">CSS盒模型</a></dd>
            <dd><a href="base/7_CSS浮动与定位.html" target="content">CSS浮动与定位</a></dd>
            <dd><a href="base/8_CSS常用布局方式.html" target="content">CSS常用布局方式</a></dd>
            <dt>框架组件</dt>
            <dd><a href="component/1_栅格布局.html" target="content">栅格布局</a></dd>
            <dd><a href="component/2_常用样式.html" target="content">常用样式</a></dd>
            <dd><a href="component/3_文本与背景色.html" target="content">文本与背景色</a></dd>
            <dd><a href="component/4_表格.html" target="content">表格</a></dd>
            <dd><a href="component/5_分页条.html" target="content">分页条</a></dd>
        </dl>
        <p>php中文网©版权所有(2019)</p>
    </div>
    <div>
        <iframe src="welcome.html" frameborder="0" name="content" width="100%" height="100%"></iframe>
    </div>
</main>
</body>

css代码：
*{
    padding: 0;
    margin: 0;
}

body{
    display: flex;
    flex-flow: column nowrap;
    height: 100vh;
}

header{
    box-sizing: border-box;
    display: flex;
    background-color: #D4D4D4;
    height: 56.8px;
    width: 100%;
    padding: 10px;
}
header>h2:first-of-type{
    color: #FF7F50;
    text-shadow: 2px 2px 1px #3A3A3A;
    margin-left: 50px;
}

header>h2:last-of-type{
    margin-left: 5px;
    font-weight: lighter;
    color: #555555;

}

main{
    display: flex;
    flex: 1;
}

main>div:first-of-type{
    display: flex;
    flex-flow: column nowrap;
    background-color: #EEEEEE;
    justify-content: space-between;
    width: 260.617px;
    padding-top: 30px;
}


main>div:first-of-type>dl>dd{
    margin-left: 20px;
    margin-top: 5px;
}
main>div:first-of-type>dl>dt{
    font-weight: bolder;
}
main>div:first-of-type a{
    text-decoration: none;
}
main>div:first-of-type>p{
    display: flex;
    justify-content: center;
    width: 260.617px;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

main>div:last-of-type{
    display: flex;
    flex: 1;
    padding: 30px;
}

a{
    color:#393939
}
a:hover{
    font-weight: bolder;
    color: #20B2AA;
}

效果图：

 

手抄：

前端课程的自我总结(必须手写)