<!DOCTYPE html>
<html>
<head>
<title>Youtube.com</title>
<link rel="stylesheet" href="video.css">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="general.css">
<link rel="stylesheet" href="sidebar.css">
</head>
<body>
<div class="header">
<div class="left-section">
<img class="icons-list" src="../photos/列表2.png">
<img class="icons-youtube" src="../photos/youtube.png">
Youtube
</div>
<div class="middle-section">
<input class="search-box" type="text" placeholder="Search">
<button class="search-button"> <img class="icons-search" src="../photos/搜索.png"> </button>
<button class="voice-search-button"> <img class="icons-microphone" src="../photos/麦克风.png"> </button>
</div>
<div class="right-section">
<img class="icons-video" src="../photos/视频播放.png">
<img class="icons-picture" src="../photos/图标.png">
<div class="icons-rings-container">
<img class="icons-rings" src="../photos/提示.png">
<div class="icons-rings-number"> 3</div>
</div>
<img class="present-user" src="../photos/personal-photo.jpeg">
</div>
</div>
<div class="sidebar">
<div class="sidebar-link"> <img src="../photos/home.png">
<div>home</div>
</div>
<div class="sidebar-link"> <img src="../photos/explorer.png">
<div>explorer</div>
</div>
<div class="sidebar-link"> <img src="../photos/subscriptions.png">
<div>subscriptions</div>
</div>
<div class="sidebar-link"> <img src="../photos/视频.png">
<div>originials</div>
</div>
<div class="sidebar-link"> <img src="../photos/music.png">
<div>youtube music</div>
</div>
<div class="sidebar-link"> <img src="../photos/library.png">
<div>library</div>
</div>
</div>
<!--第一行放置三个div视频的，调整好就直接复制粘贴的-->
<div class="first-row">
<!--第一个视频-->
<div class="video-preview">
<div>
<img class="thumbnail" src="../photos/thumbnail1.webp">
</div>
<div class="video-time">
<strong>14:50</strong>
</div>
<div class="video-info-grid">
<div class="personal">
<img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
</div>
<div class="video-info">
<p class="video-title"><strong>How The Dinosaurs Actually Died</strong></p>
<p class="video-author">Kurzgesagt-In a Nutshell </p>
<p class="video-stats">116万次观看 · 12小时前</p>
</div>
</div>
</div>
<!--第二个视频-->
<div class="video-preview">
<div>
<img class="thumbnail" src="../photos/thumbnail2.webp">
</div>
<div class="video-time">
<strong>8:20</strong>
</div>
<div class="video-info-grid">
<div class="presonal">
<img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
</div>
<div class="video-info">
<p class="video-title"><strong> Race For AI Robots Just Got Real (OpenAI, NVIDIA and more)</strong></p>
<p class="video-author">ColdFusion </p>
<p class="video-stats">62万次观看 · 1天前</p>
</div>
</div>
</div>
<!--第三个视频-->
<div class="video-preview">
<!--上面放置图片的div-->
<div class="pictures">
<img class="thumbnail" src="../photos/thumbnail3.webp">
</div>
<!--上面放置图片事件的div-->
<div class="video-time">
<strong>20:50</strong>
</div>
<!--下面放置图片事件的div-->
<div class="video-info-grid">
<div class="presonal">
<img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
</div>
<div class="video-info">
<p class="video-title"><strong>SHOW about how to choose shoes that suitable for you</strong> </p>
<p class="video-author">Merdon Krits</p>
<p class="video-stats">30万次观看 · 2小时前</p>
</div>
</div>
</div>
</div>
<!--第二行放置三个div视频的，调整好就直接复制粘贴的-->
<div class="second-row">
<!--第一个视频-->
<div class="video-preview">
<div>
<img class="thumbnail" src="../photos/thumbnail4.webp">
</div>
<div class="video-time">
<strong>14:50</strong>
</div>
<div class="video-info-grid">
<div class="personal">
<img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
</div>
<div class="video-info">
<p class="video-title"><strong>How The Dinosaurs Actually Died</strong></p>
<p class="video-author">Kurzgesagt-In a Nutshell </p>
<p class="video-stats">116万次观看 · 12小时前</p>
</div>
</div>
</div>
<!--第二个视频-->
<div class="video-preview">
<div>
<img class="thumbnail" src="../photos/thumbnail5.webp">
</div>
<div class="video-time">
<strong>8:20</strong>
</div>
<div class="video-info-grid">
<div class="presonal">
<img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
</div>
<div class="video-info">
<p class="video-title"><strong> Race For AI Robots Just Got Real (OpenAI, NVIDIA and more)</strong></p>
<p class="video-author">ColdFusion </p>
<p class="video-stats">62万次观看 · 1天前</p>
</div>
</div>
</div>
<!--第三个视频-->
<div class="video-preview">
<!--上面放置图片的div-->
<div class="pictures">
<img class="thumbnail" src="../photos/thumbnail6.webp">
</div>
<!--上面放置图片事件的div-->
<div class="video-time">
<strong>20:50</strong>
</div>
<!--下面放置图片事件的div-->
<div class="video-info-grid">
<div class="presonal">
<img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
</div>
<div class="video-info">
<p class="video-title"><strong>SHOW about how to choose shoes that suitable for you</strong> </p>
<p class="video-author">Merdon Krits</p>
<p class="video-stats">30万次观看 · 2小时前</p>
</div>
</div>
</div>
</div>
<!--第三行放置三个div视频的，调整好就直接复制粘贴的-->
<div class="third-row">
<!--第一个视频-->
<div class="video-preview">
<div>
<img class="thumbnail" src="../photos/thumbnail1.webp">
</div>
<div class="video-time">
<strong>14:50</strong>
</div>
<div class="video-info-grid">
<div class="personal">
<img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
</div>
<div class="video-info">
<p class="video-title"><strong>How The Dinosaurs Actually Died</strong></p>
<p class="video-author">Kurzgesagt-In a Nutshell </p>
<p class="video-stats">116万次观看 · 12小时前</p>
</div>
</div>
</div>
<!--第二个视频-->
<div class="video-preview">
<div>
<img class="thumbnail" src="../photos/thumbnail2.webp">
</div>
<div class="video-time">
<strong>8:20</strong>
</div>
<div class="video-info-grid">
<div class="presonal">
<img style="width: 50px ; height: 50px;" src="../photos/personal-photo.jpeg">
</div>
<div class="video-info">
<p class="video-title"><strong> Race For AI Robots Just Got Real (OpenAI, NVIDIA and more)</strong></p>
<p class="video-author">ColdFusion </p>
<p class="video-stats">62万次�
简易框架demo-简单的复现了一下可爱的youtube
需积分: 0 55 浏览量
2024-04-17
21:46:11
上传
评论
收藏 427KB ZIP 举报
learning.zip （32个子文件） 
learning 
.DS_Store 6KB styles photos 
图标.png 2KB 提示.png 4KB thumbnail5.webp 37KB subscriptions.png 2KB music.png 3KB explorer.png 4KB 搜索.png 3KB home.png 2KB thumbnail1.webp 36KB 视频播放.png 3KB thumbnail2.webp 44KB 视频.png 3KB 列表2.png 2KB library.png 4KB youtube.png 3KB 麦克风.png 3KB personal-photo.jpeg 3KB thumbnail3.webp 83KB thumbnail4.webp 87KB thumbnail6.webp 74KB 前置课程 
button.html 2KB index.html 252B position.html 941B text.html 1KB 复现youtube youtube.html 9KB grid.html 329B sidebar.css 418B header.css 3KB general.css 171B img+search.html 697B video.css 2KB资源评论
