在本教程中，我们将一步一步地建立一个YouTube克隆。你将学习如何创建布局并向这些布局添加内容。
如果你一直在努力用HTML和CSS建立一个真正的网站，这篇文章就是为你而写的。因为我即将教你一步一步地做，以减少你的挣扎。
我们将讨论如何用HTML和CSS制作YouTube克隆的布局，你将学会如何制作双栏布局。
等一下：如果你是一个完全的初学者，你甚至不明白HTML和CSS之间的区别，你可以查看下面的视频，了解你需要开始的一切...
把事情分成小块，使我们的项目更容易建立，这很重要。所以，我们要把这个YouTube克隆项目分解成更小的单元，我们要一步一步地构建。
YouTube克隆的分解
在我们将要建立的YouTube克隆中，网站有大约6个单元。
头部包含三个部分（左边、中间和右边）。左边部分包含标志和菜单，中间包含搜索框和一个图标，右边包含导航图标。这些图标是基于类似的元素，这意味着我们设计一个图标元素，然后复制、粘贴和编辑它来创建其他的图标。
主体包含两个部分（侧边栏和内容）。侧边栏中的导航链接也是类似的，所以它们只是一个东西。同样的事情发生在内容部分的视频上。
因此，我们的YouTube克隆有一个头，主，侧边栏，内容，视频卡，导航链接和导航图标作为主要单位。这就是我们要创建的网页的单元分类。
YouTube克隆版的布局
我们要做的第一件事是用HTML创建YouTube克隆的布局结构。我们将用下面的代码来完成这个工作：
<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" />
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- CSS File -->
<link rel="stylesheet" href="styles/index.css" />
<title>Youtube Clone with HTML & CSS</title>
</head>
<body>
<header class="header">.</header>
<main>
<div class="side-bar">.</div>
<div class="content">.</div>
</main>
<!-- Main Body Ends -->
</body>
</html>
在本教程中，我假定你已经了解了如何使用HTML元标签和如何链接CSS文件。如果你不了解，你可以在我上面添加的视频中了解更多信息。但对于我们在本课中所学习的内容，你不需要了解它们，所以继续阅读。
我们有一个标题标签来创建YouTube克隆的标题部分。我们稍后将在页眉处添加YouTube标志、搜索框和其他导航图标。
还有一个主部分，包含侧边栏和内容。侧边栏将包含一些导航链接，而内容将包含视频。所以，这就是只有HTML的结构了。
等等！我们的代码在运行后看起来并不太美观。好吧，我们将用CSS来解决这个问题。因此，让我们为它添加CSS，以真正创建一个YouTube布局。
用于克隆YouTube的CSS
第1步：在CSS中使用@import
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
让我们从 "import url('path')......它是做什么的？我们用它来链接名为Roboto的谷歌字体，这样我们就可以用它来作为我们网站的字体。
第二步：重置HTML默认样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
星号*是一个CSS选择器，可以选择我们页面上的所有HTML标签。我们将它们的margin和padding设置为0，然后将它们的box-sizing设置为border-box。我们为什么要这样做？
我们希望宽度或高度、border、margin和padding加起来就是总长度。这就是我的意思：在CSS中，如果一个盒子的宽度是100px，填充是10px，那么现在盒子的宽度将是110px。
但我们不希望这样--我们希望所有东西都是100px。宽度仍然应该是100px，包括10px的边距，而不是让它变成110px。这就是box-sizing: border-box 的作用。
注意：当你使用它时，你会开始更好地理解它是如何工作的--但现在，我只是想给初学者一些可以快速了解的见解。
第3步：设置font-family
body {
font-family: 'Roboto', sans-serif;
}
我们选择body标签，将其字体设置为Roboto，并使用sans-serif作为后备字体，以防Roboto不可用。
第4步：为标题设置样式
/* header section*/
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 15px;
}
.header 类的名称是用来选择（或连接到）我们网站的标题部分，这样我们就可以给它添加一些样式。
我们把它的显示属性设置为flex，以创建一个布局出来，然后我们可以很容易地把它分成几个部分。我们稍后将把它划分为几个部分。
Justify-content: space-between 是指我们希望标题中的内容一旦超过一个，它们之间就会有空间。
Align-items: centre 是用来将页眉中的所有内容移到屏幕的中央偏左位置。这就是所谓的垂直对齐。我们最后将 的 为60px，其padding为15px。header height
第5步：设置主部分的高度
main {
height: calc(100vh - 70px);
display: flex;
background-color: #f9f9f9;
}
我们将主部分的height 设置为calc( 100vh - 70px)...这是什么意思？V代表的是viewport ，它是一个窗口屏幕上不滚动的可见部分。"高度 "意味着垂直长度，我们也可以用 "w "表示宽度-水平长度。
简而言之，100vh指的是在不滚动的情况下，浏览器中可见的总高度。我们用calc ( 100vh - 70px)来进行计算，从100vh中减去70px。
我们把它的显示属性设置为flex，以便用它来创建一个布局。最后，我们将其背景颜色设置为#f9f99f ，这是一种银色或灰白色。
第6步：隐藏滚动条
/* Sidebar */
.side-bar {
height: 100%;
width: 17%;
background-color: white;
overflow-y: hidden;
}
.side-bar的height ，被设置为其父级的100%。这意味着它的高度将与它的父体相同。它的宽度被设置为其父体的17%，背景颜色设置为白色。
嘿！什么是overflow-y: hidden ？当Twitter一次加载10条推文时，你不可能一下子看到所有的东西，你必须滚动，对吗？在这种情况下，我们隐藏滚动条。谢谢你!
第7步：为响应性添加媒体查询
@media (max-width: 768px) {
.side-bar {
display: none;
}
}
我们使用这个媒体查询，使网站在手机、平板电脑和桌面上都能响应。当YouTube克隆在一个屏幕小于或等于768px的设备上时（如手机和平板电脑），侧边栏将消失。另外，max-width: 768px意味着设备的屏幕可以小于或等于768px。
好了，我们已经建立了我们的YouTube克隆的布局。下面是结果...
如何在标题部分添加内容
在这一部分，我们将讨论如何将一个元素分成几个部分，并在标题部分添加内容。
简而言之，我们将YouTube克隆的标题部分划分为三个部分：左边、中间和右边。而每个部分都包含一些标签。让我们开始吧!
第1步：在标题中添加子代和孙代
在这里，我们将简单地将HTML标签添加到YouTube克隆的标题部分。我们就用下面的代码来做这件事。
<header>
<div class="logo left">
<i id="menu" class="material-icons">menu</i>
<img src="https://www.freecodecamp.org/news/content/images/2022/01/yt-logo.png">
</div>
<div class="search center">
<form action="">
<input type="text" placeholder="Search" />
<button><i class="material-icons">search</i></button>
</form>
<i class="material-icons mic">mic</i>
</div>
<div class="icons right">
<i class="material-icons">videocam</i>
<i class="material-icons">apps</i>
<i class="material-icons">notifications</i>
<i class="material-icons display-this">account_circle</i>
</div>
</header>
通过添加三个独立的代码块将页眉分为三个部分后，现在是使用CSS使其更加美观的时候了。让我们开始吧。
第2步：为左边的部分设置样式
.left {
display: flex;
align-items: center;
}
.left #menu {
padding: 0 7px;
cursor: pointer;
}
别忘了，我们把页眉的justify-content 属性设置为space-between，这意味着页眉的每个标签之间都会有相等的空间。
现在，我们给了一个类left ，因为它应该是在左边的。我们把它的显示属性设置为flex，以便用它的布局来创建章节。它的孩子们被排列在页眉的左中心。我们还用它的id 来访问位于左边部分内的菜单。
我们将其padding top and bottom 设置为0，将其padding left and right 设置为7px。它的cursor 属性被设置为指针，这样，当鼠标放在它上面时，它就会显示一个指向性的手指。
第3步：为中心部分和它的形式设置样式
.search {
display: flex;
}
.search form {
display: flex;
border: 1px solid #ddd;
height: 45px;
}
嘿！你现在应该知道我们在搜索类中做了什么。）
我们把它的显示属性设置为flex，这样我们就可以用它的孩子创建一个布局。我们对位于搜索/中心部分的表单做同样的处理。
它的边框厚度被设置为1px，类型为实体，颜色为#ddd（银色或灰白色的东西）。
第4步：为搜索表单中的输入设置样式
.search input {
width: 600px;
padding:10px;
border: 0;
height: 100%;
border-radius: 2px 0 0 2px
}
input:focus {
outline: none;
border: 1px solid #ddd;
}
我们选择input ，它与.search input 一起位于搜索部分内。我们把它的border-radius设置为2px top, 0 right, 0 bottom, and 2px left。那么，什么是border-radius？它是一个物体的四角的弧形边缘。
第5步：为搜索和麦克风的图标/按钮设置样式
.search button {
height: 100%;
width: 60px;
border: none;
}
.mic {
margin-top: 10px;
}
搜索部分里面的按钮也是用.search button 。它的高度被设置为其父体的100%。我们不希望它有任何边界，所以我们把它的边界设置为0。
我们用它的类名.mic 来访问麦克风图标，并将它的margin-top设置为10px，这样它就会向下移动一点。
最后，让我们为网页上的所有材料图标设置样式：
.material-icons {
color: rgb(100, 100, 100);
padding: 0 7px;
cursor: pointer;
}
快!我们已经在YouTube克隆的标题上添加了子项和章节。看看下面的最终结果吧。
如何在侧边栏添加内容
在这一部分，我们将讨论如何向YouTube克隆版添加导航链接。简而言之，我们将在现有的侧边栏上添加一堆链接。
第1步：在侧边栏添加子子孙孙的内容
我们将把下面的HTML代码添加到侧边栏中：
<!-- <div class=”side-bar”> -->
<div class="nav">
<a class="nav-link active">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</div>
<!-- </div> -->
然后，我们需要首先对导航条进行样式设计，它是所有链接的包装：
.nav {
width: 100%;
display: flex;
flex-direction: column;
margin-bottom: 15px;
margin-top: 15px;
}
我在这里唯一要解释的是flex-direction。这决定了我们是否希望孩子们出现在一列（垂直）或一行（水平）。在这种情况下，我们选择水平显示。
然后，让我们用CSS将上面的导航链接样式化，如下图所示：
.nav-link {
display: flex;
align-items: center;
padding: 12px 25px;
}
.nav-link span {
margin-left: 15px;
}
.nav-link:hover {
background: #e5e5e5;
cursor: pointer;
}
.active {
background: #e5e5e5;
}
哎呀--这里没有什么好解释的，因为我已经解释过很多类似的概念了
好了，让我们来谈谈.home:hover 。其中的样式只在我们将光标移到主页导航链接上时才会应用。就是这样。
嘿......等等。我们在侧边栏里有很多链接，那么我们要如何创建呢？好吧，我们只是做每个开发者都喜欢的事情--复制和粘贴，然后像下面这样编辑：
<div class=”side-bar”>
<div class="nav">
<a class="nav-link active">
<i class="material-icons">home</i>
<span>Home</span>
</a>
<a class="nav-link">
<i class="material-icons">local_fire_department</i>
<span>Trending</span>
</a>
<a class="nav-link">
<i class="material-icons">subscriptions</i>
<span>Subscriptions</span>
</a>
</div>
<hr>
</div>
在粘贴了三个链接后，我们要通过使用来使它们成为独立的类别：
标签来创建一条线，将它们与下一个类别分开。现在，让我们对hr标签进行造型：
hr {
height: 1px;
background-color: #e5e5e5;
border: none;
}
然后，我们将在hr标签后添加剩余的代码，如下图所示：
<!-- <div class="nav">
hr -->
<a class="nav-link">
<i class="material-icons">library_add_check</i>
<span>Library</span>
</a>
<a class="nav-link">
<i class="material-icons">history</i>
<span>History</span>
</a>
<a class="nav-link">
<i class="material-icons">play_arrow</i>
<span>Your Videos</span>
</a>
<a class="nav-link">
<i class="material-icons">watch_later</i>
<span>Watch Later</span>
</a>
<a class="nav-link">
<i class="material-icons">thumb_up</i>
<span>Liked Videos</span>
</a>
<!-- </div> -->
如何将视频添加到内容部分
在YouTube克隆教程的这一部分，我们将向内容区添加视频。你需要将视频（而不是视频）复制到许多地方，使其看起来像Youtube，如果有的话，你可以用独特的Youtube视频信息编辑它们。
<div class="videos">
<!-- a video starts -->
<div class="video">
<div class="thumbnail">
<img src="https://img.youtube.com/vi/zUwB_imVjmg/maxresdefault.jpg" alt="" />
</div>
<div class="details">
<div class="author">
<img src="https://yt3.ggpht.com/bpzY-S4DYlbTeOpY5hIA7qz_hcbMkgvLAugtwKBGTTImNnWAGudX0y53bo_fJZ0auypxrWkUiw=s88-c-k-c0x00ffffff-no-rj" alt="" />
</div>
<div class="title">
<h3>
Introverts & Content Creation | Sumudu Siriwardana
</h3>
<a href="">
Francesco Ciulla
</a>
<span> 2M Views • 3 Months Ago </span>
</div>
</div>
</div>
<!-- a video Ends -->
</div>
现在，让我们对其应用CSS：
.content {
background-color: #f9f9f9;
width: 100%;
height: 100%;
padding: 15px 15px;
border-top: 1px solid #ddd;
overflow-y: scroll;
}
.videos {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
.video {
width: 270px;
margin-bottom: 30px;
}
如果你检查.videos 的样式，你会看到flex-wrap 。这是我之前唯一没有解释的属性，所以我们来解释一下。
例如，当屏幕只能容纳四个项目时，其他项目将被移到另一行。这就是 "flex-wrap "的作用：
.thumbnail {
width: 100%;
height: 170px;
}
.thumbnail img {
object-fit: cover;
height: 94%;
width: 100%;
}
.author img {
object-fit: cover;
border-radius: 50%;
height: 40px;
width: 40px;
margin-right: 10px;
}
上面唯一你可能不明白的是，因为我们之前没有解释过，object-fit: cover 。那么我们如何使用它呢？
object-fit 在这种情况下，"flex-wrap "用于将图像夹在其容器中，以消除高度和宽度上的溢出（图像大于其容器的区域）：
.details {
display: flex;
}
.title {
display: flex;
flex-direction: column;
}
.title h3 {
color: rgb(3, 3, 3);
line-height: 18px;
font-size: 14px;
margin-bottom: 6px;
}
.title a,
span {
text-decoration: none;
color: rgb(96, 96, 96);
font-size: 12px;
}
在这种情况下，我们用.details ，因为我们没有把它的flex-direction设置为属性，它将被设置为行--这是它的默认值。你看，我们也用title做了一个布局，并通过设置flex-direction为column，把它的孩子们设置为出现在一列。
我们选择在.title 内的h3标签，并将其颜色设置为有些黑色......我将在后面解释如何理解颜色代码。
line-height 是用来设置一行文字的高度，在这种情况下，我们把它设置为18px。
最后我们用.title a, span ，在.title ，选择锚点标签。我们还选择了页面上的所有span标签，并将其文本装饰设置为无。
那么什么是文字装饰呢？它有一个设计，比如锚标签所具有的下划线，在这种情况下，我们通过将其设置为无来隐藏它。我们已经将视频添加到YouTube克隆中，最终结果如下。
如何使克隆的YouTube具有响应性
在本教程的这一部分，我们将使我们建立的YouTube克隆有一点响应性。我们如何做到这一点呢？嗯，我们将使用CSS媒体查询。现在，让我们开始吧!
因此，我们将把下面的CSS代码添加到YouTube克隆的CSS文件中。
@media (max-width: 768px) {
.side-bar {
display: none;
}
.search {
display: none;
}
}
@media (max-width: 768px) { } 是用来设置媒体查询中的代码将适用的设备屏幕尺寸。
在这个例子中，max-width: 768px ，意味着媒体查询中的样式将应用于任何等于或小于768px的屏幕尺寸。
因此，只要使用的屏幕尺寸是768px或更小，我们就会通过将它们的显示属性设置为none来隐藏侧边栏和搜索输入。
@media (max-width: 900px) {
.search input {
width: 25rem;
}
}
最后，只要使用中的设备的屏幕尺寸小于或等于900px，我们就把搜索输入变小一点。
这就是了。
万岁......我们已经完成了YouTube克隆的制作。现在去建立你自己的，别忘了玩玩它。
从教程中添加或删除一些东西，以确保你真正理解你在做什么。祝你好运
