<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>機器學習介紹</title>
<style>
* {
scroll-behavior: smooth; /*超連結滾動*/
margin: 0;
padding: 0;
}
/*由右往左淡出*/
@keyframes opacity-right {
0% {
opacity: 0;
transform: translateX(100%);
}
100%{
opacity: 1;
transform: translateX(0);
}
}
/*由左往右淡出*/
@keyframes opacity-left {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/*由下往上淡出*/
@keyframes opacity-bottom {
0% {
opacity: 0;
transform: translateY(100%)
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/*旋轉360度*/
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body {
background-color: #e0e0e0;
}
img:hover {
/*當滑鼠移動到圖片將放大1.3倍和圓角，轉場時間1秒*/
transition-duration: 1s;
border-radius: 50px;
transform: scale(1.3);
}
.guide {
position: fixed; /* 固定位置*/
top: 0; /*固定在頂部*/
background-color: white;
width: 100%;
min-width: 1000px; /*最小寬度*/
height: 90px;
box-shadow: 0px 0px 8px; /*陰影往下*/
z-index: 2;
animation: opacity-left 2s forwards;
}
.guide-title {
display: inline-block;
font-size: 24px;
font-weight: bolder;
padding: 10px;
border-bottom: 1px solid; /*下邊框*/
border-color: grey; /*顏色設定*/
}
.guide-title a:hover {
color: #FF2D2D;
}
.guide button{
width: 100px;
height: 30px;
float: right;
}
#e0e0e0 {
background-color: #e0e0e0;
}
#D9FFFF {
background-color: #D9FFFF;
}
#FFF8D7 {
background-color: #FFF8D7;
}
.guide ul {
display: flex;
list-style-type: none;
margin: 10px;
}
.guide li {
margin-right: 10px;
}
.guide a {
margin-right: 10px;
color: black;
text-decoration: none; /*取消超連結樣式*/
font-weight: bold;
transition-duration: 0.5s;
}
.guide ul a:hover {
text-decoration: underline;
color: #5fc7ba;
}
.caption-background{
height: 380px;
width: 100%;
background-color: #272727;
animation: opacity-right 2s forwards;
z-index: 1;
}
.caption {
height: 380px;
margin: auto 300px;
min-width: 1200px;
background-color: #272727;
box-sizing: border-box;
}
.caption-content{
padding-top: 180px;
margin-right: 5%;
}
.caption-title {
color: white;
font-size: 50px;
margin-bottom: 40px; /*下外邊框*/
}
.caption p {
color: grey;
margin-top: 20px;
}
.caption img {
height: 290px;
max-width: 100%;
margin-top: 90px;
float: right;
opacity: 0.5; /*圖片淡化*/
}
.container {
display: flex;
flex-direction: row;
}
.main-content {
margin: 10px 300px;
padding: 0 100px;
min-width: 440px;
background-color: white;
box-shadow: 1px 1px 6px;
border-radius: 20px;
animation: opacity-bottom 2s forwards;
}
.section {
padding-top:90px;
margin: auto 10px;
}
.section img{
max-width: 100%;
margin: 20px;
}
.section-title {
font-size: 25px;
font-weight: bold;
margin-bottom: 30px
}
.section-content {
display: inline;
margin-left: 20px;
}
.section-content li {
margin-bottom: 20px;
}
.section-content p {
margin-bottom: 30px;
}
#one img{
width: 450px;
height: auto;
float: right;
}
#two img {
width: 100%;
max-width: 912px;
height: auto;
}
#five img{
width: 500px;
float: right;
}
#six img{
height: 300px;
width: auto;
float:right
}
.sub-title {
font-weight: bolder;
}
.footer {
height: 200px;
margin: 100px 200px auto 200px;
border-top: 1px solid;
border-color: #ffffff;
}
.footer-title {
margin-left: 100px;
margin-bottom: 20px;
font-size: 30px;
color: #272727;
}
.footer ul{
list-style-type: upper-roman; /*大寫羅馬數字*/
margin-left: 150px;
}
.footer li{
margin-bottom: 10px;
}
.footer a {
color: forestgreen;
}
.footer img {
height: 200px;
width: 200px;
float: right;
}
.footer img {
animation: rotate 1s infinite linear; /*無限循環旋轉*/
}
</style>
<script>
/*當按下button改變背景顏色*/
function change_backgroundcolor(color) {
document.body.style.backgroundColor = color;
}
</script>
</head>
<body>
<header>
<div class="guide">
<div class="guide-title"><a href="#">MACHINE LEARNING</a></div>
<button id='e0e0e0' onclick="change_backgroundcolor('#e0e0e0')"></button>
<button id='D9FFFF' onclic
Machine Learning.zip
需积分: 0 92 浏览量
2023-05-30
09:24:03
上传
评论
收藏 7KB ZIP 举报
Machine Learning.zip （1个子文件） 
Machine Learning.html 21KB资源评论
2301_77871013
- 粉丝: 0
- 资源: 1
最新资源
- 【哈工大计算机系统】CSAPP计统大作业
- 音视频对齐python脚本
- Tkinter简易版学生信息管理系统源码+数据库配置文件
- Advanced Sniper Starter kit v4.3.unitypackage
- tensorflow-gpu-2.8.3-cp37-cp37m-win-amd64.whl
- tensorflow-2.8.4-cp37-cp37m-win-amd64.whl
- tensorflow-2.8.3-cp37-cp37m-win-amd64.whl
- 仿微博发贴，评论帖子，回复评论，后端mysql数据库表设计.md
- 618电商活动的Python网页程序+编程知识+技术开发
- 简单的网页重复操作2.25
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
