<!DOCTYPE html>
<html lang="zh-cn">
<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="./index.css">
<!-- 引入网页标题图标 -->
<link rel="shortcut icon" href="./图片/title.webp" type="image/x-icon">
</head>
<body>
<!-- 导航条 -->
<div class="nav">
<div class="nav-wrap">
<!-- logo图 -->
<a href="" class='logo'>爱吃西瓜</a>
<!-- 导航列表 -->
<ul class="nav-list">
<li>首页</li>
<li>简介</li>
<li>探索</li>
<li>日志</li>
<li>留言</li>
<li>ENGLISH</li>
</ul>
</div>
</div>
<!-- 背景视频内容主体 -->
<div class="home">
<div class="wx-bg">
<!-- 视频标签 -->
<video src="./bg.mp4" autoplay muted loop></video>
</div>
<!-- 内容标题 -->
<div class="home-content">
<p>Welcome to my world</p>
<h1>只有多练习,才能掌握好知识</h1>
<!-- 滚动动画 -->
<a href="" class='roll-box'>
<span></span>
</a>
</div>
</div>
<!-- 简介模块 -->
<div class="author">
<div class="author-wrap">
<!-- 个人介绍 -->
<div class="introduce-box">
<h2>个人档案</h2>
<p>技术圈中的陈冠希,旅居中国山西晋中</p>
<p>掌握:html+css+js 熟悉各大前后端框架</p>
<p>谢谢大家</p>
</div>
<!-- 头像 -->
<img src="./图片/头像.jpg" class='pic' alt="">
<!-- 二维码名片 -->
<div class="card">
<img src="./图片/wx.jpg" alt="">
<p class="text">关注一下博主</p>
</div>
</div>
</div>
<!-- 作品 -->
<div class="works">
<div class="works-content">
<div class="Explore-wrap">
<div class="works-left">
<h2>Explore the world</h2>
<p>探索世界</p>
</div>
<button class='btn'>分享更多></button>
</div>
<ul class="works-pic">
<li>
<img src="./图片/1.jpg" alt="">
</li>
<li>
<img src="./图片/2.jpg" alt="">
</li>
<li>
<img src="./图片/3.jpg" alt="">
</li>
<li>
<img src="./图片/4.jpg" alt="">
</li>
<li>
<img src="./图片/5.jpg" alt="">
</li>
<li>
<img src="./图片/6.jpg" alt="">
</li>
<li>
<img src="./图片/7.jpg" alt="">
</li>
<li>
<img src="" alt="" id='pic'>
</li>
</ul>
</div>
</div>
<!-- 浏览模块 -->
<div class="Browse">
<ul class="Browse-wrap">
<li>
<div class="Browse-ico">
<h3>文章</h3>
<p>60篇</p>
</div>
</li>
<li>
<div class="Browse-ico">
<h3>访问量</h3>
<p>99+</p>
</div>
</li>
<li>
<div class="Browse-ico">
<h3>文章</h3>
<p>60篇</p>
</div>
</li>
<li>
<div class="Browse-ico">
<h3>运行时长</h3>
<p>4年185天</p>
</div>
</li>
</ul>
</div>
<!-- 日志模块 -->
<div id="Journal">
<!-- 日志内容 -->
<div class="Journal-content">
<h2 class='Journal-title'>Journal-记录</h2>
<!-- 日志列表 -->
<ul class="Journal-list">
<li>
<!--figure 图像标签-->
<figure class='pic-img'>
<img src="./图片/7.jpg" alt="">
</figure>
<div class="Journal-text">
<p>感悟</p>
<h3>拥有一所房子,面朝大海</h3>
<p>香菜 时间: 2022-6-1 评论:16</p>
</div>
</li>
<li>
<!--figure 图像标签-->
<figure class='pic-img'>
<img src="./图片/8.jpg" alt="">
</figure>
<div class="Journal-text">
<p>感悟</p>
<h3>拥有一所房子,面朝大海</h3>
<p>香菜 时间: 2022-6-1 评论:16</p>
</div>
</li>
<li>
<!--figure 图像标签-->
<figure class='pic-img'>
<img src="./图片/9.jpg" alt="">
</figure>
<div class="Journal-text">
<p>感悟</p>
<h3>拥有一所房子,面朝大海</h3>
<p>香菜 时间: 2022-6-1 评论:16</p>
</div>
</li>
<li>
<!--figure 图像标签-->
<figure class='pic-img'>
<img src="./图片/10.png" alt="">
</figure>
<div class="Journal-text">
<p>感悟</p>
<h3>拥有一所房子,面朝大海</h3>
<p>香菜 时间: 2022-6-1 评论:16</p>
</div>
</li>
<li>
<!--figure 图像标签-->
<figure class='pic-img'>
<img src="./图片/11.png" alt="">
</figure>
<div class="Journal-text">
<p>感悟</p>
<h3>拥有一所房子,面朝大海</h3>
<p>香菜 时间: 2022-6-1 评论:16</p>
</div>
</li>
<li>
<!--figure 图像标签-->
<figure class='pic-img'>
<img src="./图片/12.png" alt="">
</figure>
<div class="Journal-text">
<p>感悟</p>
我的网站.zip （24个子文件） 
我的网站 
bg.mp4 704KB 图片 
2.jpg 257KB
10.png 360KB 13.jpg 161KB wx.jpg 441KB
title.webp 33KB 14.jpg 364KB 6.jpg 343KB 12.png 1.47MB 1.jpg 317KB 1.jpeg 257KB 11.png 1.41MB 5.jpg 349KB 13.png 70KB 头像.jpg 97KB 8.jpg 53KB 3.jpg 271KB 7.jpg 118KB 9.jpg 213KB 4.jpg 408KB 111.jpg 67KB
index.html 10KB index.js 963B index.css 9KB资源评论
