10.16学习

最新推荐文章于 2024-08-03 21:32:51 发布

huxin0316

最新推荐文章于 2024-08-03 21:32:51 发布

阅读量99

点赞数

文章标签：学习前端

本文链接：https://blog.csdn.net/huxin0316/article/details/127347440

版权

1、JS为什么被称为脚本语言

具有表达力和动态性，能够在html中添加交互页面

2、理解数据库，后台，前端的概念

后端：处理数据（处理业务逻辑），向前端提供数据，要有强逻辑
数据库：存放数据
前端：与用户交流，没有后台只是一个架子

3、学习了弹窗和placeholder

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="function1()">弹框</button>
    <script src="index.js"></script>
    <input type="text" placeholder="请输入要查询的东西" style="width:300px">
</body>
</html>

function function1()
{
    alert("您好，我是弹框");
}

4、学习overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="f1"></div>
        <div id="f2">
            <div id="c1"></div>
        </div>
</body>
<style>
    #f1{
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    #f2{
        width: 200px;
        height: 200px;
        background-color: black;
        overflow: hidden;
    }
    #c1{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 30px;
    }
</style>
</html>

5、学习flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="H">
    <div id="h">1</div>
    <div id="h">2</div>
    <div id="h">3</div>
    <div id="h">4</div>
    <div id="h">5</div>
    <div id="h">6</div>
    </div>
</body>
<style>
    #h{
        width: 500px;
        height: 300px;
        background-color: blue;
        margin-left: 10px;
    }
    #H{
        display:flex;
        flex-direction: row;
    }
</style>
</html>