在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