HTML基础知识day7与java环境配置_html的java配置方式-CSDN博客

本文链接：https://blog.csdn.net/hzbobhz/article/details/112062006

制作特殊图形

一、制作圆形
首先，想要制作图形要用到border-radius属性。
作圆形的要点：1、元素的宽度和高度必须相同
2、圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<style>
		div{
			width:200px;
			height:200px;
			border-radius:50%;
			border:4px solid red;
		}
	</style>
</head>
<body>

	<div></div>

</body>
</html>

结果如图：
在这里插入图片描述
二、半圆形
作半圆形的要点：1、制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
2、制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<style>
		.a1{
			width:50px;
			height:100px;
			border-radius:0px 50px 50px 0px;
			border:4px solid red;
		}
		.a2{
			width:50px;
			height:100px;
			border-radius:50px 0px 0px 50px;
			border:4px solid red;
		}
		.a3{
			width:100px;
			height:50px;
			border-radius:50px 50px 0px 0px;
			border:4px solid red;
		}
		.a4{
			width:100px;
			height:50px;
			border-radius:0px 0px 50px 50px;
			border:4px solid red;
		}
	</style>
</head>
<body>
	<div class="a1"></div>
	<div class="a2"></div>
	<div class="a3"></div>
	<div class="a4"></div>
</body>
</html>

结果如图：
在这里插入图片描述
border-radius中四个位置分别是左上、右上、右下、左下；通过改写这四个值的数值，来调整半圆的朝向。

三、扇形
利用border-radius属性制作扇形遵循“三同，一不同”原则：1、“三同”是元素宽度、高度、圆角半径相同
2、“一不同”是圆角取值位置不同
示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<style>
		div{
            background: red;
            margin: 30px;
        }
        div:nth-of-type(1){
            width: 50px;
            height: 50px;
            border-radius: 50px 0 0 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            border-radius:0 50px 0 0;
        }
        div:nth-of-type(3){
            width: 50px;
            height: 50px;
            border-radius:0 0 50px 0;
        }
        div:nth-of-type(4){
            width: 50px;
            height: 50px;
            border-radius: 0 0 0 50px;
        }
	</style>
</head>
<body>
	<div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

结果如图：
在这里插入图片描述

在windows环境下安装jdk、配置环境变量

下载jdk

下载地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

点击下载按钮：
在这里插入图片描述
如果是64位的windows系统电脑，就选择红色框中的版本进行下载，虽然jdk已经来到了15代，但是大部分公司还是用jdk8，所以我们也得使用jdk8。
开始安装jdk：

点击更改可以安装到你想安装到的路径。

环境变量配置

1、打开环境变量窗口
右键单击此电脑—>单击属性进入系统—>单击系统页面中的高级系统设置—>单击环境变量进去
系统界面
在这里插入图片描述

2、新建JAVA_HOME变量
在系统变量中点击新建按钮

在变量名中输入JAVA_HOME，在变量值中输入电脑中jdk安装的绝对路径。输入完毕之后点击确定

3、新建classpath变量
在系统变量中点击新建按钮，在变量名中输入classpath，在变量值中输入.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意开头有一个点，别忘输进去)
在这里插入图片描述
4、修改Path变量
选择Path变量，单击编辑，然后点击新建

新建两条变量：%JAVA_HOME%\bin %JAVA_HOME%\jre\bin

4、查看环境变量是否配置成功
wisdom键+R键打开运行窗口，输入cmd，打开dos命令行

输入java，会出现一连串的指示命令
在这里插入图片描述
输入javac，显示javac编译器的帮助信息

分别输入java -version和javac -version，如果能出现版本号

就说明配置成功了。