【实验目的】
在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上的学习可以更上一层楼。