前端最后一作业，仿phpcnui--php第九期线上班 - 作业

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>phpcnUI用户手册</title>
    <style>
        /*清空页面边距*/
        body{
            margin: 0;
            padding: 0;
        }
        /*设置头部样式*/
        header{
            height: 57px;
            background-color: #d4d4d4;
            color: #555;
            font-size: 28px;

        }
        /*给橙色字体加入特殊样式*/
        header strong{
            color: #ff7f50;
            text-shadow: 2px 2px 2px black;
            margin-left: 40px;
            padding: 10px;
        }
        main{
            display: flex;
        }
        /*给a标签设置样式以及聚焦样式*/
        a{
            text-decoration-line: none;
            color: #333;
            font-size: 14px;
        }
      a:hover{
          font-weight: bold;
          color: lightseagreen;
      }
        .left{
            background-color: #eeeeee;
            height: 905px;
            width: 149px;
            padding: 30px;
        }
        dl{
            margin-left: 20px;
            padding: 30px;
            display: flex;
            flex-flow: column nowrap;
        }
        dd{
            margin: 0;
        }
        dt{
            margin-left: -20px;
            font-weight: bold;
        }
        .right{
            padding:30px ;
        }
        ul li{
            list-style: none;
        }
        .right div{
            padding: 30px;
        }
        .right h2{
            color: dodgerblue;
        }
        .right h2,.right h4{
            font-weight: initial;
        }
        ul{
            padding: 0;
        }
    </style>
</head>
<body>
<header><strong>phpcn UI</strong>用户参考手册</header>
<main>
    <div class="left">
        <dl>
            <dt>前端基础</dt>
            <a href=""><dd>框架安排</dd></a>
            <a href=""><dd>页面结构</dd></a>
            <a href=""><dd>常用标签</dd></a>
            <a href=""><dd>CSS选择器</dd></a>
            <a href=""><dd>CSS样式控制器</dd></a>
            <a href=""><dd>CSS盒模型</dd></a>
            <a href=""><dd>CSS浮动与定位</dd></a>
            <a href=""><dd>CSS常用布局方式</dd></a>
            <dt>框架组件</dt>
            <a href=""><dd>栅格布局</dd></a>
            <a href=""><dd>常用样式</dd></a>
            <a href=""><dd>文本与背景色</dd></a>
            <a href=""><dd>表格</dd></a>
            <a href=""><dd>分页条</dd></a>
        </dl>
    </div>
    <div class="right">
        <div>
        <h2>phpcn UI 框架特点:</h2>
        <h4>遵循HTML5/CSS3/ES5/6编程规范, 具有如下特点:</h4>
        <ul>
            <li><strong>免费开源:</strong>您不需要付任何费用, 就可以用在你的项目或商业应用中</li>
            <li><strong>简洁高效:</strong>秉承大道至简原则, 一切为开发者服务, 在不失功能前提下进行最大程序的简化</li>
            <li><strong>易学好用:</strong>开箱即用, 学习门槛极低, 优雅易记的命名规范, 方便您的二次开发与扩展</li>
        </ul>
        </div>
    </div>
</main>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

这次作业提交时发现a标签里面不可以套自定义列表，本想不用ul做出效果。但是效果做出来，下次一定会记住这样会不符合w3c准则。感谢老师过去两周的教导，还有我真的是个男同学。

Correction status：qualified

Teacher's comments：<nav>+<a>: 其实这才是导航应该有的样子不是吗? <nav>表示这是一个导航, 多个<a>是导航中的每一个链接... 之前用<ul><li>那是因为<nav>这个标签还没有被发明出来... 只要是Flex布局, 那就只有二种类型的盒子: 弹性元素和弹性元素, 其它统统不去理会