【實驗目的】
在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在線安裝、腳本安裝包。
- 源碼包:軟件是編譯安裝,所以更加適合自己的系統,更加穩定、效率更高;編譯過程時間較長,安裝比二進制安裝時間長。
- 二進制包(RPM包):包管理系統簡單,只通過幾個命令就可以實現包的安裝、升級、查詢和卸載;經過編譯,不再可以看到源代碼。
- YUM在線安裝:可以方便地解決RPM安裝依賴文件,一條命令就可以幫用戶從網上(本地也可以)找到安裝包進行安裝。
- 腳本安裝包:安裝簡單、快捷;完全喪失了自定義性。
安裝軟件的方法不同,但各有千秋。此次實驗,令我對“Linux安裝軟件的四種方法”理解更加透徹。通過實驗,我發現自身的很多不足,也發現了Linux的更多優點,課下我會多加練習,勤查資料,爭取在Linux上的學習可以更上一層樓。