JavaSE学习（前端初体验）

---

前言

首先了解前端三件套：HTML、CSS、JS

HTML：超文本标记语言、框架层、描述数据的；
CSS：层叠样式表、表现层，美化修饰数据的；
JS：动作层、实现交互、加工处理数据的。

---

一、准备环境

1、下载一个编写器:
vscode，常见的还有hbuilder、sumlim；
2、安装一个解释执行器：
任何浏览器都可以，但推荐使用firefox火狐浏览器，因为它可以在做CSS时一边做一边立即就可以看到效果。

可以下载一个腾讯电脑管家，在里面寻找你需要的应用软件，非常方便！

二、创建站点（创建一个文件夹）

1、在任意磁盘位置创建一个文件夹，这里以在桌面创建为例：

2、在里面再创建两个文件夹，用于放图片或视频等的素材：

三、将站点部署到编写器中

1、打开vscode，点击文件—>打开文件夹…选中刚才创建好的文件夹

2、创建css、html文件

3、打出一个感叹号！或者doc敲回车，自动搭建好框架

4、将html文件与css文件连接起来

我们可以打开浏览器检查是否连接上：

找到我们创建的站点—>右键打开—>在浏览器中右键点击查看源代码—>点击show.css，如果连接成功会自动跳转，反之会显示找不到文件。

---

四、VScode实用小设置

1、关于字体：
文件—>首选项—>设置—>文本编辑器—>字体；
如果希望按住鼠标滚轴和ctrl进行调节：找到

点击settings.json进去再最后一句加上:

"editor.mouseWheelZoom": true

2、主题颜色：
依然是在设置里面，有个工作台—>外观—>color theme；

3、软件的汉化：
点击扩展—>搜索chinese—>选择简体中文下载。

---

五、案例展示

1、在HTML中编写结构层：
思想：写盒子、搭框架。
例如下面这样一个案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的前端页面</title>
    <link rel="stylesheet" href="show.css">
</head>
<body>
    <div class="top">1</div>
    <div class="middle">
        <div class="left">3</div>
        <div class="right">4</div>
    </div>
    <div class="bottom">5</div>
</body>
</html>

2、在CSS中编写表现层：
我们可以在vscode中写代码，但是更推荐在火狐浏览器的样式编辑器中写，因为可以看到即使效果

点击这里，找到样式编辑器。
每次更改切记保存！

*{
    margin:0;
    padding:0;
}
body{
    background: aliceblue;
}
.top{
    width: 900px;
    height:100px;
    border:solid 3px cadetblue;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    background:lightcyan;
}
.middle{
    width: 900px;
    height:450px;
    border:solid 3px lightsteelblue;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    background:lightgoldenrodyellow;
}
.left{
    width: 400px;
    height:400px;
    border:solid 3px lightsteelblue;
    margin-top:20px;
    margin-left:20px;
    margin-right:20px;
    background:lightgrey;
    float:left;
}
.right{
    width: 400px;
    height:400px;
    border:solid 3px lightsteelblue;
    margin-top:20px;
    margin-left:20px;
    margin-right:20px;
    background:lightgrey;
    float:right;
}
.bottom{
    width: 900px;
    height:100px;
    border:solid 3px yellow;
    margin:20px auto;
    background:pink;
}

---

说明几点：
1、关于居中可以用margin:20px auto;（上下边距20，水平居中）去代替
margin-top:20px;
margin-left:auto;
margin-right:auto;
2、margin：外边距；padding：内边距。
3、float：每个盒子独占一行，如果希望放在同一行就需要浮动一下。