在Linux系统[CentOS7]中,安装VScode,并在VScode上编写HTML网页

我写的  https://www.cnblogs.com/lu16/p/lu.html 

目   录

【实验目的】

【实验步骤】

1)   在VS code官网上,下载安装程序:

2)   在Linux系统下,安装VS code软件:

3)   在Linux系统下,启动VS code软件:

4)   在Linux系统下,安装VS code软件需要的插件:

5)   在VS code软件中,编写HTML页面:

6)   运行在VS code软件中编写的HTML页面:

【实验总结】


【实验目的】

在Linux系统中,搭建编写HTML网页的环境。在VS code官网上,下载VS code安装程序,进行安装。

在VS code软件中编写HTML页面,并正确运行。

【实验步骤】

1)   在VS code官网上,下载安装程序:

 

  

 

 

2)   在Linux系统下,安装VS code软件:

 

输入安装命令“rpm -ivh code-1.40.2-1574694258.el7.x86_64.rpm” 。

 

 

3)   在Linux系统下,启动VS code软件:

  

 

 

 

4)   在Linux系统下,安装VS code软件需要的插件:

 

安装汉化插件,对VS code进行汉化。

 

 安装快捷启动插件,方便运行HTML页面。

 

5)   在VS code软件中,编写HTML页面:

 

 

 

 

舞动的小鸟---HTML页面代码:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="lwx">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>舞动的小鸟</title>
  <style>
           body{
                margin:0;  /*外边距*/
                background-color:rgb(39,40,59);
           }
           .bird{
                position:relative;  /*相对定位*/
                width:200px;
                height:200px;
                margin:100px auto;  /*居中*/
                background-color:#0000ff;
           }
           .bird .big,.middle,.small{
                position:absolute;  /*绝对定位*/
                border-style:solid;  /*边框:大小 风格 颜色*/
                border-radius:50%;  /*圆角*/
                transition:all 1s;  /*过渡*/
                transform:rotate(45deg);  /*旋转*/
           }
           .big{
                border-width:100px;  /*边框粗细*/
                border-color:transparent transparent #f00 #f00;  /*透明色*/
           }
           .middle{
                top:10%;
                left:10%;
                border-width:80px;
                border-color:#ffff00 transparent #fff #fff;
           }
           .small{
                top:30%;
                left:30%;
                border-width:40px;  /*边框粗细*/
                border-color:transparent #ffcc00 transparent transparent;
           }
           .small:before{
                content:'';  /*激活*/
                position:absolute;
                top:-10px;
                right:20px;
                width:20px;
                height:20px;
                border-radius:50%;
                background-color:black;
           }
           .bird:hover .big{
                transform:rotate(225deg);
                border-color:transparent transparent #00ffff #33ffff;
           }
           .bird:hover .middle{
                transform:rotate(-135deg);
                border-color:transparent #ffff00 #fff;
           }
           .bird:hover .small{
                transform:rotate(135deg);
           }
  </style>
 </head>
 <body>
      <div class="bird">   <!--父相子绝-->
           <div class="big"></div>
           <div class="middle"></div>
           <div class="small"></div>
      </div>
 </body>
</html>

6)   运行在VS code软件中编写的HTML页面:

 

 

舞动的小鸟-运行过程:

【实验总结】

通过本次实验,我对Linux系统上的软件安装过程,更加熟悉。Linux系统中软件的安装,主要分为四种:源码包安装、RPM二进制安装、YUM在线安装、脚本安装包。

  1. 源码包:软件是编译安装,所以更加适合自己的系统,更加稳定、效率更高;编译过程时间较长,安装比二进制安装时间长。
  2. 二进制包(RPM包):包管理系统简单,只通过几个命令就可以实现包的安装、升级、查询和卸载;经过编译,不再可以看到源代码。
  3. YUM在线安装:可以方便地解决RPM安装依赖文件,一条命令就可以帮用户从网上(本地也可以)找到安装包进行安装。
  4. 脚本安装包:安装简单、快捷;完全丧失了自定义性。

安装软件的方法不同,但各有千秋。此次实验,令我对“Linux安装软件的四种方法”理解更加透彻。通过实验,我发现自身的很多不足,也发现了Linux的更多优点,课下我会多加练习,勤查资料,争取在Linux上的学习可以更上一层楼。

发布了47 篇原创文章 · 获赞 110 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_44949135/article/details/105528751