牛客网零基础入门前端（一）

最新推荐文章于 2022-12-07 19:35:49 发布

liulizhi1996

最新推荐文章于 2022-12-07 19:35:49 发布

阅读量443

点赞数

分类专栏：前端文章标签： html javascript css

本文链接：https://blog.csdn.net/liulizhi1996/article/details/124633519

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

FED1 表单类型

<form>
    <!-- 补全代码 -->
    <input type="password" value="nowcoder" />
    <input type="checkbox" checked />
</form>

FED2 表格结构

<table>
    <!-- 补全代码 -->
    <caption>nowcoder</caption>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

FED3 图像标签属性

<!-- 补全代码 -->
<img src="" alt="" title="" />

FED4 新窗口打开文档

<!-- 补全代码 -->
<a target="_blank"></a>

FED5 自定义列表

<dl>
    <!-- 补全代码 -->
    <dt>nowcoder</dt>
    <dd>nowcoder</dd>
</dl>

FED73 加粗文字

<p><strong>牛客网</strong>，程序员必备求职神器</p>

FED6 语义化标签

<!-- 补全代码 -->
<header>
    <nav></nav>
</header>

FED7 音频媒体标签属性

<!-- 补全代码 -->
<audio src="" controls></audio>

FED8 视频媒体标签属性

<!-- 补全代码 -->
<video src="" onerror=""></video>

FED9 CSS选择器——标签、类、ID选择器

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div {
                color: rgb(255, 0, 0);
                font-size: 20px
            }
            
            .green {
                color: rgb(0, 128, 0);
            }
            
            #black {
                color: rgb(0, 0, 0);
            }
        </style>
    </head>
    <body>
        <div>红色</div>
        <div class='green'>绿色</div>
        <div id='black'>黑色</div>
    </body>
</html>

FED10 CSS选择器——伪类选择器

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            li:nth-of-type(2) {
                background: rgb(255, 0, 0)
            }
            
            li:last-child {
                background: rgb(255, 0, 0)
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
</html>

FED11 CSS选择器——伪元素

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div::after {
                content: "";
                display:block;
                width: 20px;
                height: 20px;
                background-color: rgb(255, 0, 0);
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

FED12 按要求写一个圆

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div {
                width: 100px;
                height: 100px;
                border: 1px solid black;
                border-radius: 50px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

FED13 设置盒子宽高

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            .box {
                width: 100px;
                height: 100px;
                padding: 20px;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>

FED74 段落标识

<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>

FED75 设置文字颜色

p {
    color: red
}

FED76 圣诞树

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <style type="text/css">
        .topbranch {
            width: 0px;
            height: 0px;
            /*
            * TODO: 上枝叶效果
            */
            border: 100px solid transparent;
            border-bottom-color: green;
            float: left;
            margin-left: 100px;
        }
        .middleBranch {
            width: 0px;
            height: 0px;
            /*
            * TODO: 中枝叶效果
            */
            border: 200px solid transparent;
            border-bottom-color: green;
        }
        .base {
            /*
            * TODO: 树干效果
            */
            width: 70px;
            height: 200px;
            background-color: gray;
            margin-left: 165px;
        }
    </style>
</head>
<body>
<section class="topbranch"></section>
<section class="middleBranch"></section>
<section class="base"></section>
</body>
</html>

FED14 浮动和清除浮动

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .wrap {
                /*补全代码*/
                overflow: hidden;
            }
             .left {
                width: 100px;
                height: 100px;
                /*补全代码*/
                float: left;
            }
             .right {
                width: 100px;
                height: 100px;
                /*补全代码*/
                float: left;
            }
        </style>
    </head>
    <body>
        <div class='wrap'>
            <div class='left'></div>
            <div class='right'></div>
        </div>
    </body>
</html>

FED15 固定定位

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                /*补全代码*/
                position: fixed;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class='box'></div>
    </body>
</html>

FED18 CSS单位（一）

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                /*补全代码*/
                width: 4em;
                height: 4em;
            }
        </style>
    </head>
    <body>
        <div class='box'></div>
    </body>
</html>

FED19 CSS单位（二）

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            div {
                /*补全代码*/
                width: 4rem;
                height: 4rem;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

FED20 基本数据类型检测

function _typeof(value) {
    // 补全代码
    return typeof(value)
}

FED21 检测复杂数据类型

function _instanceof(left,right) {
    // 补全代码
    return left instanceof right;
}

FED22 数据类型转换

function _splice(left,right) {
    // 补全代码
    return left.toString() + right.toString();
}

FED23 阶乘

function _factorial(number) {
    // 补全代码
    let ans = 1;
    for (let i = 1; i <= number; i++) {
        ans = ans * i;
    }
    return ans;
}

FED24 绝对值

function _abs(number) {
    // 补全代码
    return number >= 0 ? number : -number;
}

FED25 幂

function _pow(number,power) {
    // 补全代码
    return Math.pow(number, power);
}

FED26 平方根

function _sqrt(number) {
    // 补全代码
    return Math.sqrt(number);
}

FED27 余数

function _remainder(value) {
    // 补全代码
    return value % 2;
}

FED56 数组求和

function sum(arr) {
    return arr.reduce((total, elem) => {return total + elem;}, 0);
}

FED69 完全等同

function identity(val1, val2) {
    return val1 === val2;
}

FED70 或运算

function or(a, b) {
    return a || b;
}

FED71 且运算

function and(a, b) {
    return a && b;
}

FED72 字符串字符统计

function count(str) {
    let stat = {};
    for (let i = 0; i < str.length; ++i) {
        if (str[i] !== ' ') {
            stat[str[i]] = str[i] in stat ? stat[str[i]] + 1 : 1;
        }
    }
    return stat;
}

FED28 返回星期数

function _getday(value) {
    // 补全代码
    switch (value) {
        case 1:
            return "星期一";
        case 2:
            return "星期二";
        case 3:
            return "星期三";
        case 4:
            return "星期四";
        case 5:
            return "星期五";
        case 6:
            return "星期六";
        case 7:
            return "星期天";
    }
}