前端知识每日3+1 day01

最新推荐文章于 2023-06-08 16:40:28 发布

肚子咕卢卢.

最新推荐文章于 2023-06-08 16:40:28 发布

阅读量83

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_48000006/article/details/123958244

版权

文章目录

一、页面导入样式时，使用link和@import有什么区别？
二、圣杯布局和双飞翼布局的理解和区别，并用代码实现

–

一、页面导入样式时，使用link和@import有什么区别？

link属于html标签，而@import是css提供的
页面被加载时，link会被同时加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
link方式样式的权重高于@import

二、圣杯布局和双飞翼布局的理解和区别，并用代码实现

圣杯布局

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .header,.footer{
            background-color: #0077aa;
            height: 60px;
            line-height: 60px;
            width: 100%;
            clear: both;
        }
        .container{
            height: 60px;
            line-height: 60px;
            padding-left: 200px;
            padding-right: 150px;

        }
        .left{
            height: 60px;
            line-height: 60px;
            width: 200px;
            background-color: #795da3;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right{
            height: 60px;
            line-height: 60px;
            width: 150px;
            background-color: #55a532;
            float: left;
            margin-left: -150px;
            position: relative;
            right: -150px;
        }
        .main{
            float: left;
            background-color: #3eb18b;
            width: 100%;
            height: 60px;
        }
    </style>
</head>

<body>
<div class="header">header</div>
<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>

双飞翼布局

效果图
在这里插入图片描述
实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        #main{
            width: 100%;
            background-color: #795da3;
        }
        #center{

            margin-left: 200px;
            margin-right: 150px;
        }
        #left{
            width: 200px;
            background-color: #0077aa;
            margin-left: -100%;
        }
        #right{
            width: 150px;
            background-color: #55a532;
            margin-left: -150px;
        }
        #left,#right,#main{
            float: left;
        }
    </style>
</head>
<body>
        <div id="main">
            <div id="center">center</div>
        </div>
        <div id="left">left</div>
        <div id="right">right</div>
</body>
</html>

[js] 用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值

描述：

这是一道大题目，把考点拆成了4个小项；需要侯选人用递归算法实现（限制15行代码以内实现；限制时间10分钟内完成）：
a) 生成一个长度为5的空数组arr。
b) 生成一个（2－32）之间的随机整数rand。
c) 把随机数rand插入到数组arr内，如果数组arr内已存在与rand相同的数字，则重新生成随机数rand并插入到arr内[需要使用递归实现，不能使用for/while等循环]
d) 最终输出一个长度为5，且内容不重复的数组arr
代码如下（示例）：

function randomArr(arr, length, min, max) {
    var num =Math.floor(Math.random()*(max-min+1))+min;
    if(!arr.includes(num)){
        arr.push(num)
    }
    function each(arr) {
        arr.forEach(item=>{
            console.log(item)
        })
    }
    return arr.length===length?each(arr):randomArr(arr,length,min,max);
}
randomArr([],5,2,32)

肚子咕卢卢.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端知识每日3+1 day01

文章目录一、页面导入样式时，使用link和@import有什么区别？二、使用步骤1.引入库2.读入数据总结–一、页面导入样式时，使用link和@import有什么区别？link属于html标签，而@import是css提供的页面被加载时，link会被同时加载，而@import引用的css会等到页面加载结束后加载。link是html标签，因此没有兼容性，而@import只有IE5以上才能识别link方式样式的权重高于@import二、使用步骤1.引入库代码如下（示例）：import num
复制链接

扫一扫