<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据调研</title>
<link rel="stylesheet" href="./css/nav.css">
<link rel="stylesheet" href="./css/all.css">
<style>
body .shell-main-nav ul .nav-box {
left: 360px;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
background-repeat: no-repeat;
background-size: contain;
}
body .shell-main-nav {
margin-bottom: 0;
background-color:rgba(255, 255, 255, 0.1);
backdrop-filter: blur(13px);
}
.main {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-width: 1430px;
overflow-x: hidden;
transform: translateY(0px);
background-color:black;
transition: .3s;
padding: 50px;
border: 1px solid #000;
}
.img {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background-color:black;
background-attachment: fixed;
background-size: 100%;
background-repeat: no-repeat;
}
.img::after {
content: '数据调研';
width: 500px;
height: 200px;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: #fff 5px solid;
color: #fff;
letter-spacing: 30px;
font: 100 70px 'font';
display: flex;
align-items: center;
justify-content: center;
font-family:”方正兰亭”;
}
/* -------------------------------------- */
.section-top {
width: 100%;
height: 300px;
display: flex;
justify-content: space-evenly;
margin-top: 50px;
}
.section-top-middle {
width: 300px;
height: 300px;
border-radius: 50%;
background-image: url('./image/25.jpg');
background-size: cover;
background-position-y: -30px;
margin: 0 50px;
border: 15px solid rgba(0, 0, 0, 0.151);
}
.section-top-left,
.section-top-right {
width: 300px;
height: 300px;
font-size: 22px;
margin-top: 30px;
}
.section-top-left {
text-align: right;
}
.section-top p {
font-size: 26px;
color: #22A39F;
margin: 5px 0;
}
.section-middle,
.section-bottom {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.section-bottom {
position: relative;
}
.section-middle-box {
width: 100%;
display: flex;
margin: 50px 0;
}
.section-middle-left {
width: 600px;
display: flex;
flex-direction: column;
justify-content: center;
font-weight:200;
}
.section-middle-left span {
text-align: left;
color: rgb(158, 162, 198);
margin-top: 10px;
}
.section-middle-right {
width: 600px;
display: flex;
justify-content: center;
color:white;
}
.section-middle-right img {
width: 600px;
}
.section-middle-left span {
text-align: center;
font-size: 20px;
}
.section-middle-left span h1{
text-align: center;
font-size: 10px;
}
.Skills {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin: 40px 0;
}
.Skills li {
width: 50%;
display: flex;
justify-content: space-evenly;
margin: 20px 0;
height: 50px;
cursor: pointer;
}
.Skills li span,
.Skills li p {
text-align: center;
font-size: 20px;
display: block;
width: 50%;
transition: .2s;
letter-spacing: 0px;
}
.Skills li p {
color: rgba(158, 162, 198, 1);
}
.Skills li:hover p {
letter-spacing: 5px;
}
.Achievement {
margin-top: 40px;
width: 100%;
display: flex;
justify-content: space-between;
}
.Achievement-left {
display: flex;
flex-direction: column;
width: 300px;
}
.Achievement-left h2 {
font-size: 18px;
margin-bottom: 20px;
}
.Achievement-left span {
font-size: 10px;
}
.Achievement-right {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
width: 450px;
}
.Achievement-right img {
width: 200px;
margin-left: 20px;
margin-bottom: 20px;
transition: .3s;
}
.Achievement-right img:hover {
transform: scale(1.1);
}
article {
display: flex;
justify-content: center;
}
aside {
width: 100%;
position: relative;
left: 50%;
transform: translate(-50%);
display: flex;
flex-direction: column;
align-items: center;
background-color: rgb(240, 240, 224);
padding: 50px 0;
}
.bottom{
width: 1300px;
display: flex;
justify-content: space-between;
position: relative;
}
.bottom::after{
content: 'QQ:10086';
position: absolute;
top: -170px;
width: 100%;
text-align: center;
font: 300 40px '';
}
.bottom img{
width: 23%;
height: 300px;
}
</style>
</head>
<body>
<audio src="2.mp3" autoplay="true"></audio>
<div class="shell">
<div class="shell-main">
<div class="shell-main-nav">
<div class="logo">
<img src="./image/18.png" alt="">
<span>捕·迹</span>
</div>
<ul>
<div class="nav-box"></div>
</ul>
</div>
<div class="img"></div>
<div class="main">
<section>
<div class="section-top">
<div class="section-top-left">
<p> <br /></p>
<br />
<p><br /></p>
<br />
<p><br /></p>
<br />
</div>
<div class="section-top-middle">
</div>
山羊の期末大作业1.zip
需积分: 9 189 浏览量
2022-10-27
16:28:00
上传
评论
收藏 42.86MB ZIP 举报
山羊の期末大作业1.zip （81个子文件） 
山羊の期末大作业1 goat 
Template.html 4KB css 
all.css 848B index1.css 18KB nav.css 2KB index.scss 23KB css.css 6KB index.css 16KB painter.html 14KB image 
27.jpg 32KB all.css 821B 110.jpg 27KB 26.jpg 41KB 103.jpg 8.15MB
tx2.png 301KB 17.png 130KB 19.png 130KB 83.jpg 2KB img img (14).png 130KB img (5).png 325KB img (12).png 207KB img (13).png 163KB img (10).png 85KB img (6).png 68KB img (15).png 240KB img (17).png 168KB img (16).png 445KB img (9).png 164KB img (4).png 168KB img (2).png 207KB img (7).png 136KB img (3).png 237KB img (8).png 309KB img (11).png 237KB img (1).png 445KB 25.jpg 39KB 28.jpg 32KB 82.jpg 3KB 120.png 197KB 203.jpg 237KB 21.png 158KB black.jpg 63KB tx1.jpg 57KB 74.jpg 1KB 111.jpg 591KB 75.jpg 4KB nav.css 2KB 202.jpg 207KB 121.png 170KB 85.jpg 4KB 104.jpg 301KB 71.jpg 894B 81.jpg 3KB fs.jpg 104KB 112.jpg 47KB 101.jpg 14KB 70.jpg 917B index.scss 23KB css.css 6KB 84.jpg 4KB 18.png 130KB 102.jpg 4KB 30.png 39KB 121.jpg 108KB 31.png 176KB 90.jpg 38KB 112.png 445KB 20.png 689KB 91.jpg 5.03MB 201.jpg 445KB 72.jpg 753B 73.jpg 5KB
synth city by VISUALDON 4K 60 FPS.mp4 22.27MB index.css 16KB index1.html 13KB make.html 7KB index.html 11KB js index.js 0B make2.html 7KB font 优设标题黑_猫啃网.ttf 1.35MB make1.html 8KB 新建文件夹 index.css 14KB资源评论
:D138
- 粉丝: 0
- 资源: 1
最新资源
- pta题库答案c语言之排序4统计工龄.zip
- pta题库答案c语言之树结构7堆中的路径.zip
- pta题库答案c语言之树结构3TreeTraversalsAgain.zip
- pta题库答案c语言之树结构2ListLeaves.zip
- pta题库答案c语言之树结构1树的同构.zip
- 基于C++实现民航飞行与地图简易管理系统可执行程序+说明+详细注释.zip
- pta题库答案c语言之复杂度1最大子列和问题.zip
- 三维装箱问题（Three-Dimensional Bin Packing Problem,3D-BPP）是一个经典的组合优化问题
- 以下是一些关于Linux线程同步的基本概念和方法.txt
- 以下是一个简化的示例，它使用pygame库来模拟烟花动画的框架.txt
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
