JavaSE学习（前端初体验）

文章目录

• 前言
• 一、准备环境
• 二、创建站点（创建一个文件夹）
• 三、将站点部署到编写器中
• 四、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中编写结构层：

  思想：写盒子、搭框架。

  例如下面这样一个案例：

  

  
  
      
      
      我的前端页面
      
  
  
      
  1
      
  
          
  3
          
  4
      
      
  5
  
  
  

  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：每个盒子独占一行，如果希望放在同一行就需要浮动一下。