慧河前端培训：JavaScript、HTML/CSS与布局解析-优快云博客

本文链接：https://blog.youkuaiyun.com/Asitwas/article/details/127456716

慧河前端第一次培训回顾

一，认识前端、后端、数据库

附学长的板书

学长的板书
在整个程序中，前端负责用户能看到的页面，其中html与css负责页面的呈现，而JavaScript则负责与用户的交互，用户通过前端提出需求，前端则将需求发送至后端进行处理，后台处理需求并从数据库中提取数据，最后将处理好的数据发送至前端，由前端呈现使用户获得信息。

二，初识JavaScript

上周日的课程简单讲了一下JavaScript，不妨写在这里，算是再复习一下

<!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="myFunction()">按钮</button>
    <script>
        function myFunction() {
            alert("111");
        }
    </script>
</body>
</html>

效果：
一个实现点击后出现弹窗“111”的按钮
或者我还可以写一个单独的js文件来实现这个效果
html文件：

<!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="myFunction()">按钮</button>
    <script src="1.js"></script>
</body>
</html>

js文件

function myFunction() {
    alert("111");
}

注：外部引入js文件一般放置在</body>前面的位置

三，html和css的补充

1，placeholder

使用placeholder来实现在输入框中的占位符

<!DOCTYPE html>
<!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>
    <input type="text" placeholder="什么" style="height: 20px; width: 200px;">
</body>
</html>

效果：
设定输入框中的占位符为“什么”

2，盒子塌陷

盒子塌陷的介绍
在我们移动父盒子中的的子盒子的时候，父盒子会随着子盒子的移动而移动，而不会停留在原来的位置，这种情况就叫做盒子塌陷
示例：
子盒子移动前

<!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="a"></div>
    <div id="b">
        <div id="c"></div>
    </div>
</body>
<style>
    #a{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
    #b{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }
    #c{
        width: 50px;
        height: 50px;
        background-color: blueviolet;
    }
</style>
</html>

效果：
子盒子移动前子盒子移动后

<!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="a"></div>
    <div id="b">
        <div id="c"></div>
    </div>
</body>
<style>
    #a{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
    #b{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }
    #c{
        width: 50px;
        height: 50px;
        background-color: blueviolet;
        margin-top: 20px;
    }
</style>
</html>

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

关于盒子塌陷，学长为我们介绍了其中一种解决办法，那就是给父盒子添加一个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="a"></div>
    <div id="b">
        <div id="c"></div>
    </div>
</body>
<style>
    #a{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
    #b{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        overflow: hidden;
    }
    #c{
        width: 50px;
        height: 50px;
        background-color: blueviolet;
        margin-top: 20px;
    }
</style>
</html>

效果：

3，flex布局

flax布局即弹性布局，是一种在进行页面的缩放时不改变原有布局方式的一种布局方式
在不使用flax布局的情况下，则会出现以下情况
代码：

<!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="a">
        <div id="b"></div>
        <div id="c"></div>
        <div id="d"></div>
        <div id="e"></div>
    </div>
</body>
<style>
    #a{
        overflow: hidden;
    }
    #b{
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: left;
    }
    #c{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        float: left;
    }
    #d{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        float: left;
    }
    #e{
        width: 100px;
        height: 100px;
        background-color: chartreuse;
        float: left;
    }
</style>
</html>

缩放前：

缩放后：

盒子的布局会随缩放情况的变化而变化
使用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="a">
        <div id="b"></div>
        <div id="c"></div>
        <div id="d"></div>
        <div id="e"></div>
    </div>
</body>
<style>
    #a{
        overflow: hidden;
        display: flex;
        flex-flow: row;
    }
    #b{
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: left;
    }
    #c{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        float: left;
    }
    #d{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        float: left;
    }
    #e{
        width: 100px;
        height: 100px;
        background-color: chartreuse;
        float: left;
    }
</style>
</html>

效果
使用flex布局的效果

另：学习flex布局的网站

http://flexboxfroggy.com/