当前位置：首页 > news >正文

JavaSE学习（前端初体验）

news 来源：原创 2025/8/22 7:36:15

文章目录

前言
一、准备环境
二、创建站点（创建一个文件夹）
三、将站点部署到编写器中
四、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：每个盒子独占一行，如果希望放在同一行就需要浮动一下。