在Linux系统(centos7)中,安装VScode,并在VScode上编写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页面代码:

  1 <!doctype html>
  2 
  3 <html lang="en">
  4 
  5  <head>
  6 
  7   <meta charset="UTF-8">
  8 
  9   <meta name="Generator" content="EditPlus®">
 10 
 11   <meta name="Author" content="lwx">
 12 
 13   <meta name="Keywords" content="">
 14 
 15   <meta name="Description" content="">
 16 
 17   <title>舞动的小鸟</title>
 18 
 19   <style>
 20 
 21            body{
 22 
 23                 margin:0;  /*外边距*/
 24 
 25                 background-color:rgb(39,40,59);
 26 
 27            }
 28 
 29            .bird{
 30 
 31                 position:relative;  /*相对定位*/
 32 
 33                 width:200px;
 34 
 35                 height:200px;
 36 
 37                 margin:100px auto;  /*居中*/
 38 
 39                 background-color:#0000ff;
 40 
 41            }
 42 
 43            .bird .big,.middle,.small{
 44 
 45                 position:absolute;  /*绝对定位*/
 46 
 47                 border-style:solid;  /*边框:大小 风格 颜色*/
 48 
 49                 border-radius:50%;  /*圆角*/
 50 
 51                 transition:all 1s;  /*过渡*/
 52 
 53                 transform:rotate(45deg);  /*旋转*/
 54 
 55            }
 56 
 57            .big{
 58 
 59                 border-width:100px;  /*边框粗细*/
 60 
 61                 border-color:transparent transparent #f00 #f00;  /*透明色*/
 62 
 63            }
 64 
 65            .middle{
 66 
 67                 top:10%;
 68 
 69                 left:10%;
 70 
 71                 border-width:80px;
 72 
 73                 border-color:#ffff00 transparent #fff #fff;
 74 
 75            }
 76 
 77            .small{
 78 
 79                 top:30%;
 80 
 81                 left:30%;
 82 
 83                 border-width:40px;  /*边框粗细*/
 84 
 85                 border-color:transparent #ffcc00 transparent transparent;
 86 
 87            }
 88 
 89            .small:before{
 90 
 91                 content:'';  /*激活*/
 92 
 93                 position:absolute;
 94 
 95                 top:-10px;
 96 
 97                 right:20px;
 98 
 99                 width:20px;
100 
101                 height:20px;
102 
103                 border-radius:50%;
104 
105                 background-color:black;
106 
107            }
108 
109            .bird:hover .big{
110 
111                 transform:rotate(225deg);
112 
113                 border-color:transparent transparent #00ffff #33ffff;
114 
115            }
116 
117            .bird:hover .middle{
118 
119                 transform:rotate(-135deg);
120 
121                 border-color:transparent #ffff00 #fff;
122 
123            }
124 
125            .bird:hover .small{
126 
127                 transform:rotate(135deg);
128 
129            }
130 
131   </style>
132 
133  </head>
134 
135  <body>
136 
137       <div class="bird">   <!--父相子绝-->
138 
139            <div class="big"></div>
140 
141            <div class="middle"></div>
142 
143            <div class="small"></div>
144 
145       </div>
146 
147  </body>
148 
149 </html>

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

 

 

舞动的小鸟-运行过程:

 

    

【实验总结】

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

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

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM