【实验目的】

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

在Linux系统(centos7)中,安装VScode,并在VScode上编写HTML网页的更多相关文章

  1. linux系统CentOS7中find命令使用

    一.作用 查找文件或目录 二.参数(常用) -atime 查找在指定时间曾被存取过的目录或文件,单位以24小时计算.(访问时间,执行文件等) -ctime 查找指定时间曾被更改的目录或文件,单位以24 ...

  2. Linux系统 Centos7/Centos6.8 yum命令在线安装 MySQL5.6

    Linux系统 Centos7 yum命令在线安装 MySQL5.6 标签: centosmysqlyum 2015-11-18 17:21 707人阅读 评论(0) 收藏 举报  分类: Linux ...

  3. Linux系统centOS7在虚拟机下的安装及XShell软件的配置

    前面的话 本文将详细介绍Linux系统centOS7在虚拟机下的安装 准备工作 [系统下载] 在安装centOS7之前,首先在官网下载合适的版本 然后,选择一个链接下载即可 [虚拟机配置] 接下来,需 ...

  4. linux系统CentOS7

    linux系统CentOS7 到http://mirrors.sohu.com/mysql/下载想要的mysql版本 这里用到的是 mysql-5.6.33-linux-glibc2.5-x86_64 ...

  5. centos7中安装mongodb3.6

    centos7中安装mongodb3.6 首先更新系统 yum -y update 1.安装Mongodb 编辑Mongodb安装源 vim /etc/yum.repos.d/mongodb-org- ...

  6. 在centos7中安装Robot Framework

    安装前景介绍: 最初,我们是在Windows环境下搭建Robot Framework来对我们的服务进行接口测试的(想知道如何在Windows下安装Robot Framework,可以参考我同事的博客h ...

  7. Jenkins:VMware虚拟机Linux系统的详细安装和使用教程

    jenkins:VMware虚拟机Linux系统的详细安装和使用教程 (一) 不是windows安装虚拟机可跳过 1.Windows安装VMware 2.VMware安装linux系统 3.windo ...

  8. Vmware Workstation - linux系统下 VmTools 安装

    程序版本 : VMware® Workstation 14 Pro 系统环境 : win10 64位下 ubuntu-14.04.5-desktop-amd64 问题:在运行linux系统过程中,de ...

  9. Linux 系统下Eclipse安装及使用

    Linux 系统下Eclipse安装及使用 我们在搞上层开发的时候,都是在Windows下使用Eclipse,那么如果是Linux应用开发,就必须要在Linux中安装Eclipse,用于C/C++开发 ...

随机推荐

  1. Linux驱动实践:一起来梳理中断的前世今生(附代码)

    作 者:道哥,10+年嵌入式开发老兵,专注于:C/C++.嵌入式.Linux. 关注下方公众号,回复[书籍],获取 Linux.嵌入式领域经典书籍:回复[PDF],获取所有原创文章( PDF 格式). ...

  2. Table.Range保留中间指定的….Range/Middle(Power Query 之 M 语言)

    数据源: "姓名""基数""个人比例""个人缴纳""公司比例""公司缴纳"&qu ...

  3. OpenWrt之关闭IPv6

    目录 OpenWrt之关闭IPv6 1.前言 2.WAN口设置 3.LAN口设置 4.保存并应用 5.防火墙设置 6.DHCP/DNS设置 1)SSH连接路由器 2)输入第一条命令,按回车执行 3)输 ...

  4. 从头造轮子:asyncio之 run_until_complete (1)

    前言 今天开始聊一聊python3的asyncio.关于asyncio,大家肯定都有自己的理解,并且网上大神也把基础概念也解释的比较透彻. 本文写作的初衷,主要是理解asyncio的原理并且实现一遍. ...

  5. 跨域:The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed

    https://blog.csdn.net/q646926099/article/details/79082204 使用Ajax跨域请求资源,Nginx作为代理,出现:The 'Access-Cont ...

  6. UDP&串口调试助手用法(2)

    通道的是创建.删除.编辑.链接.断开 通道创建 通道删除 先选择要删除的通道,再点击删除通道即可 通道参数编辑 双击创建的通道 即可编辑通道 通道链接 通道创建成功,提示 点击链接即可链接通道 通道断 ...

  7. 使用.NET 6开发TodoList应用(8)——实现全局异常处理

    系列导航 使用.NET 6开发TodoList应用文章索引 需求 因为在项目中,会有各种各样的领域异常或系统异常被抛出来,那么在Controller里就需要进行完整的try-catch捕获,并根据是否 ...

  8. treecnt 算法马拉松20(告别美国大选及卡斯特罗)

    treecnt 基准时间限制:1 秒 空间限制:131072 KB 给定一棵n个节点的树,从1到n标号.选择k个点,你需要选择一些边使得这k个点通过选择的边联通,目标是使得选择的边数最少. 现需要计算 ...

  9. CF 593B Anton and Lines(水题)

    题意是给你n条直线,和x1,x2;问 在x1,x2之间(不包括在x1,x2上) 存不存在任意两条线的交点. 说思路,其实很简单,因为给的直线的条数很多,所以无法暴力求每两条直线的交点,那么就求每条直线 ...

  10. Netty源码分析之ByteBuf引用计数

    引用计数是一种常用的内存管理机制,是指将资源的被引用次数保存起来,当被引用次数变为零时就将其释放的过程.Netty在4.x版本开始使用引用计数机制进行部分对象的管理,其实现思路并不是特别复杂,它主要涉 ...