在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在线安装、脚本安装包。
- 源码包：软件是编译安装，所以更加适合自己的系统，更加稳定、效率更高；编译过程时间较长，安装比二进制安装时间长。
- 二进制包（RPM包）：包管理系统简单，只通过几个命令就可以实现包的安装、升级、查询和卸载；经过编译，不再可以看到源代码。
- YUM在线安装：可以方便地解决RPM安装依赖文件，一条命令就可以帮用户从网上（本地也可以）找到安装包进行安装。
- 脚本安装包：安装简单、快捷；完全丧失了自定义性。
安装软件的方法不同，但各有千秋。此次实验，令我对“Linux安装软件的四种方法”理解更加透彻。通过实验，我发现自身的很多不足，也发现了Linux的更多优点，课下我会多加练习，勤查资料，争取在Linux上的学习可以更上一层楼。
在Linux系统(centos7)中，安装VScode，并在VScode上编写HTML网页的更多相关文章
- linux系统CentOS7中find命令使用
一.作用 查找文件或目录 二.参数(常用) -atime 查找在指定时间曾被存取过的目录或文件,单位以24小时计算.(访问时间,执行文件等) -ctime 查找指定时间曾被更改的目录或文件,单位以24 ...
- Linux系统 Centos7/Centos6.8 yum命令在线安装 MySQL5.6
Linux系统 Centos7 yum命令在线安装 MySQL5.6 标签: centosmysqlyum 2015-11-18 17:21 707人阅读 评论(0) 收藏 举报 分类: Linux ...
- Linux系统centOS7在虚拟机下的安装及XShell软件的配置
前面的话 本文将详细介绍Linux系统centOS7在虚拟机下的安装 准备工作 [系统下载] 在安装centOS7之前,首先在官网下载合适的版本 然后,选择一个链接下载即可 [虚拟机配置] 接下来,需 ...
- linux系统CentOS7
linux系统CentOS7 到http://mirrors.sohu.com/mysql/下载想要的mysql版本 这里用到的是 mysql-5.6.33-linux-glibc2.5-x86_64 ...
- centos7中安装mongodb3.6
centos7中安装mongodb3.6 首先更新系统 yum -y update 1.安装Mongodb 编辑Mongodb安装源 vim /etc/yum.repos.d/mongodb-org- ...
- 在centos7中安装Robot Framework
安装前景介绍: 最初,我们是在Windows环境下搭建Robot Framework来对我们的服务进行接口测试的(想知道如何在Windows下安装Robot Framework,可以参考我同事的博客h ...
- Jenkins:VMware虚拟机Linux系统的详细安装和使用教程
jenkins:VMware虚拟机Linux系统的详细安装和使用教程 (一) 不是windows安装虚拟机可跳过 1.Windows安装VMware 2.VMware安装linux系统 3.windo ...
- Vmware Workstation - linux系统下 VmTools 安装
程序版本 : VMware® Workstation 14 Pro 系统环境 : win10 64位下 ubuntu-14.04.5-desktop-amd64 问题:在运行linux系统过程中,de ...
- Linux 系统下Eclipse安装及使用
Linux 系统下Eclipse安装及使用 我们在搞上层开发的时候,都是在Windows下使用Eclipse,那么如果是Linux应用开发,就必须要在Linux中安装Eclipse,用于C/C++开发 ...
随机推荐
- 多个工作簿拆分（Excel代码集团）
一个文件夹里有N个工作簿,每个工作簿中包括N个工作表,将各个工作表拆分成工作簿,命名为每个工作簿里第一个工作表的A列和B列. 工作簿.工作表数量不定,表内内容不限,拆分后保存于当前文件夹下的" ...
- 小迪安全 Web安全 基础入门 - 第九天 信息打点 - CDN绕过篇&漏洞回链&接口探针&全网扫描&反向邮件
一. CDN知识-工作原理及阻碍 (一)工作原理 1.概述:CDN的全称是Content Delivery Network,即内容分发网络.CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地 ...
- CF760A Petr and a calendar 题解
Content 输入两个数 \(m,d\),请输出 \(2017\) 年 \(m\) 月的日历[其中第一天是星期 \(d\)(如果 \(d=7\) 就是星期天)]需要印的列数. 格式见题目所述. 数据 ...
- java 多线程：线程池的使用Executors~ExecutorService； newCachedThreadPool；newFixedThreadPool(int threadNum)；ScheduledExecutorService
1,为什么要使用线程池:Executors 系统启动一个新线程的成本是比较高的,因为它涉及与操作系统交互.在这种情形下,使用线程池可以很好地提高性能,尤其是当程序中需要创建大量生存期很短暂的线程时,更 ...
- shell判断新字符串列表是否在老字符串列表中
for sn in `cat 12.30-new`;do if ! [[ `cat 12.30-old` =~ $sn ]];then echo $sn; fi; done
- Qt的VS插件下载地址
地址 https://download.qt.io/official_releases/vsaddin/2.4.3/
- 【LeetCode】1095. 山脉数组中查找目标值 Find in Mountain Array
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 二分查找 日期 题目地址:https://leetco ...
- 【LeetCode】982. Triples with Bitwise AND Equal To Zero 解题报告（C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- 【LeetCode】122.Best Time to Buy and Sell Stock II 解题报告（Java & Python & C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- 【LeetCode】929. Unique Email Addresses 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 set + 字符串操作 参考资料 日期 题目地址:h ...