HTML基础知识day7与java环境配置

制作特殊图形

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


<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>

结果如图:
HTML基础知识day7与java环境配置_第1张图片
二、半圆形
作半圆形的要点:1、制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度值
2、制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度值
示例如下:


<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>

结果如图:
HTML基础知识day7与java环境配置_第2张图片
border-radius中四个位置分别是左上、右上、右下、左下;通过改写这四个值的数值,来调整半圆的朝向。

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


<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>

结果如图:
HTML基础知识day7与java环境配置_第3张图片

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

   下载jdk

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

点击下载按钮:
HTML基础知识day7与java环境配置_第4张图片
如果是64位的windows系统电脑,就选择红色框中的版本进行下载,虽然jdk已经来到了15代,但是大部分公司还是用jdk8,所以我们也得使用jdk8。
开始安装jdk:
HTML基础知识day7与java环境配置_第5张图片
点击更改可以安装到你想安装到的路径。

   环境变量配置

1、打开环境变量窗口
右键单击此电脑—>单击属性进入系统—>单击系统页面中的高级系统设置—>单击环境变量进去
HTML基础知识day7与java环境配置_第6张图片
HTML基础知识day7与java环境配置_第7张图片
HTML基础知识day7与java环境配置_第8张图片
2、新建JAVA_HOME变量
在系统变量中点击新建按钮
HTML基础知识day7与java环境配置_第9张图片
在变量名中输入JAVA_HOME,在变量值中输入电脑中jdk安装的绝对路径。输入完毕之后点击确定
HTML基础知识day7与java环境配置_第10张图片
3、新建classpath变量
在系统变量中点击新建按钮,在变量名中输入classpath,在变量值中输入.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意开头有一个点,别忘输进去)
HTML基础知识day7与java环境配置_第11张图片
4、修改Path变量
选择Path变量,单击编辑,然后点击新建
HTML基础知识day7与java环境配置_第12张图片
新建两条变量:%JAVA_HOME%\bin %JAVA_HOME%\jre\bin
HTML基础知识day7与java环境配置_第13张图片
4、查看环境变量是否配置成功
wisdom键+R键打开运行窗口,输入cmd,打开dos命令行
HTML基础知识day7与java环境配置_第14张图片
输入java,会出现一连串的指示命令
HTML基础知识day7与java环境配置_第15张图片
输入javac,显示javac编译器的帮助信息
HTML基础知识day7与java环境配置_第16张图片
分别输入java -version和javac -version,如果能出现版本号
HTML基础知识day7与java环境配置_第17张图片
就说明配置成功了。

你可能感兴趣的:(jdk,html)