文章目录
- 前言
- 一、准备环境
- 二、创建站点（创建一个文件夹）
- 三、将站点部署到编写器中
- 四、VScode实用小设置
- 五、案例展示
前言
首先了解前端三件套：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：每个盒子独占一行，如果希望放在同一行就需要浮动一下。
