尚硅谷前端基础 (101)

好，那么到此为止的话，我们的关于HTMMRCSS的一些基础知识是吧，一些常用的标签啊，常用一些样式，我们就都给他说完了，包括我们常用的两种布局，布局手段这个啊定位还有什么这个这个呃，浮动对吧，那接下来呢，我们来通过一个这个呃，一个项目练习啊，来对我们这个知识进行一个巩固，那这个项目练习呢，诶，我挑选了一个这个相对来说比较，呃呃东西内容没那么多，但是结构上其实也还挺复杂的，这么一个练习就是这个小米的一个官方网站，那我们拿这个小米一个官网啊来作为一个我们这个等于是一个项目实战，那通过这个练习对我们之前所有的知识给它干嘛呢？进行一个串联啊，进行一个总的一个回顾，总的一个复习，那你们要做的事儿是，哎，首先跟着我的节奏，把这个练习给它做完了啊，一定要好好做完了啊，争取呢，哎。

做个三五遍的也不多啊，你做一两遍呢，我也不嫌你少是吧，做个三五遍呢，我也不嫌你多，所以这个时候你就多写两遍，对你来说一定是有帮助的，哪怕是一个项目，你重复的写也一定是有很大大帮助的啊，所以第一件事儿跟着我的节奏把这个东西写完了，第二件事儿写完了这个，然后你可以暂时先别往下学，可以先自己再尝试去做几个网站，比如说诶我可以做个京东行不行是吧？我做个淘宝行不行，诶我做个这个这个这个各各种各样的网站吧，是吧？诶天猫行不行？诶什么小米的油品行不行，诶华为的商城行不行啊，其实你会发现这些商业网站大部分的特点都是什么呀？都是类似的，它没有什么太大的区别，整体上思路都是类似的啊，都是类似的，然后我们回到我们主题，我们说的我们这个小米官网，小米官网的话，首先呢，它包含的内容其实也还也还挺多的，对吧，也还挺多的，所以我们做的时候也并。

不是全做啊，我们做的什么呢？哎，我们主要就做这个小米官网的一个首屏，什么叫首屏啊，就是你一打开浏览器就看到这个位置，所以我们基本上做到这个位置，我们这个实验就做完了，那下边还有一些，下边还有一些，其实整体来说就都差不多了，我们就不一个一个来做了啊，我们就做一个首屏就完事了，多的话感兴趣可以自己尝试往下做一下，那作为练习角度来讲，我们就把首屏做完就行了，因为你要讲整个一个整战的话，其实一耽误时间，二一个没必要，因为这种布局相对来说都比较大，简单啊，比较简单啊，所以的话我们看的话，我们就要做这个首屏，这这这是一个，然后第二一个小米的官网，它本身它会有一些这种响应式的设计，比如说呃，可能在我们这比较典型的一个就是这个它这个条，它这个条啊，当你网页这个窗口小的候，它是贴到这儿的，但是当你的窗口大的时候呢，它会贴到什么呢？它会贴到这个边上，那这个响应式的话，暂时我们还做不了，因为这里边。

那我们要涉及到一个媒体查询这么一个东西，这个东西我们要讲完实战我们才能讲这个媒体查询，所以我们做的话，我们就以这个小的版本去做，所以这个时候我们就以这个呃，窗口比较小的这种情况下去完成这个练习啊，完成一个练习好，那这一块我们就不多说了啊，不多说了，然后的话我们就直接开始来做我们这个项目，至于项目的话，我们第一个参考的位置就是我们这个官网的原图，对吧，我们可以直接对照着官网的图去做这个事儿，然后第二一个呢，我也截了一张图，诶截了一张图呢，我现在做了一些简单的一个标注啊，做了一个简单标注，我们也可以参考这个标注呢，诶去做这个东西啊，所以我们现在来做我们这个项目，在这儿呢，我们新建一个文，哎，我们在我们的根目录下新建一个文件夹。新建一个家，我们就叫做一个米啊，这是我们小米的官网，那叫着这个米的话，我们先来对我们项目进行一个搭建，我们先创建一个什么呢？诶，新的一个页面，我们叫做一个index.nl那这个时候你也要注意了，我们的网站啊，一般我们的首页啊，一般我们的首页主页一般都叫什么呢？Index，诶所以起index也表示它是一个首页，然后在这里边呢，我们来新建几个文件夹，首先我们要找我们这个CSS文件夹，放我们的CSS，那这里边呢，哎，我们是不是也必须要对代码进行重置啊，哎，所以我们把这个重置代码re.cssctrlc，我给它复制一份啊，复制一份点CSS，然后很明显小米这个里边呢，我们也会用到图标字体，所以我们把这个ffa啊，这个放到awesome，我也复制一份啊，也复制一份，然后呢，哎，我再创建一个这个文件夹，哎，专门用来放我们这个图片，哎放我们图片那大概我们基本的内容。

就是这么一个结构，然后这里边啊，我们来引入，哎，我这改个名吧，这个title我们写什么呢？我们写跟这个小米一样的，小米官网写的什么呀？哎，我直接给它复制一下，检查一下，我们来看一下它里面的title title是不是写的是这一套啊，哎，我们就跟它一样，我们就不再改了，呃，直接给它粘过来啊title，然后在下边我们这儿来引入，诶引入我们这个重置样式表啊，引入我们这个重置样式表，我们直接来一个link啊，来一个link link的话，我们在这儿的话，我们就直接引的是我们这个点斜杠，我们CSS下边的一个reign点4SS，这是我们重置样式表，然后再往下呢，我们来引入谁呢？哎，引入我们这个，哎，这个图标字体库，诶我们这个放的awesome啊，我们直接来一个，这个也是叫做一个link，诶link我们这儿是点鞋盖csi，诶不是CSS，是我们FA下。

边一个什么呢？下边一个CSS，下边一个o.CSS那这样我们就给它引入完了啊引完了然后接下来的话，还有一个东西就是我们其实的话，我们之前写样式，哎，都是把这些样式写到我们的内部样式表里，对吧？那现在我们这里面我们既然要做一个呃项目了，那这项目我们做的时候就要认真一点，所以我们尽量的话就跟着我们真实开发的这个情况来写，所以这个时候我们在这里面呢，诶，我再创建一个新的CS的文件，哎，新建一个我叫一个index.css，那注意了，这个时候我这个文件为什么叫index.css，因为这个文件是不是这是专门是给我这个页面去写样式的，哎，专门是给我这页去写样式的，所以这个时候我们应该干嘛呢？哎，我们最好就是让我们这个文件名跟CSS的名是一样的啊，一样以后的好处就是我们知道哪个文件对应哪个CSS比较好找一些。

好找一些，所以这个时候我们来引入，哎，引入我们当前页面的一个样式表啊，我们直接来一个这个link啊link我们这叫做一个index.css点这看CSS下边的一个index.css诶直接引入啊，三个4S文件就给它引完了啊，三个CS文件就给他引完了，然后除了这种东西的话，实际上如果是作为一个真实项目开发的话，我们说一下实际上我一个项目的话，其实。

不止是一个网页，肯定不止一个，可能至少可能十几个。20几个网页对吧，那么这些网页里甚至还能更多上百个网页对吧？这都是有可能的，那么这些网页里他们是不是所有样式都是完全独立的呀？哎，不是，他还可能会我的不同的网页里有一些这种公共的样式，也就说这个样式在A网页里的样在B网页里样在C网页里也这样，所以这个时候往往我们还有一个文件，我们叫什么呢？诶新建一个文件，我们叫做一个base，第二一个CSS，那这个base里边放的是什么呢？这个放的是我们这个叫什么呀？叫做一个公共的样式啊公共的样式，然后这个样式的话，一般我们会也在每一个页面里都去进行引入啊，都去进行引入，我们在这个重置下边来引入，引入什么呢？诶引入我们这个，诶，公共的一个样式表在这儿呢，我们直接来一个link啊，我们这个叫做点鞋盖CSS下边的一个这个base.css直接对它进行一个引入。

这样base里边写什么，Base里边就是写，诶所有网页里都会用到的，就写到base里，比如说可能呃比较典型的，我可以写一个这个clear fix啊clear fix，诶点一个c clear fix，嗯，Fix，然后冒号，冒号我们来一个这个before啊before然后逗号我们再来一个，点一个fix，我们来什么呢？我们来一个after啊after然后在这儿我们直接来一个display，来一个table table啊然后呢，我们再来一个这个这个这个诶clear来一个这个boss啊clear来一个boss，哎，还忘了写谁了，还忘了写我们一个content，最重要的一个content险写了它，那这样的话，你只需要如果你想用这个clear fix，你是不是只直接把我这个base.css1引入就行了呀，哎，一引入就行了，所以base里写什么，就是公共样式，哎，所有的浏览器里，所有的网页都一样的，你就写到这个base里啊，就完事了，所以我们基本上这个结构也就确定了啊。

这个index.css我们也写个主释这个什么呢？哎，这个玩意儿，这个是我们哎主页的主页，我们这个叫做一个index.html的一个样式表啊，它独有的往这里边写就行了，那好，呃，我们这么一个基本的结构就给它布局完了，然后我们还要写的话，其实呃，Base里边，你像我们这写了一个这个clear fix，其实有的时候还有一些东西非常重要的，我们要写，一般情况下，我们的网页里面的字体它会有一个统一的，所以这个时候我们来看一下，我们应该给包Y啊设置一个字体，这个字体呢，我也放到这个base里，因为基本上每个页面的字体都是都是一样的，所以这个字体怎么设置我就不写了，我就不再去自己写了，无非就是你要写一个什么呀，你要写一个放的里边要设置什么呀？哎，设置字体大小，比如说我字体大小是一个14的像素，然。

那后后边是不是要设置一组组的字体啊，哎，一组组的字体，那至于这个字体是什么，需要根据你的设计来，那这个时候如果真正到工作当中，那你就要问你们的这个设计师是吧？问的产品经理啊，我这个字体需要用什么字体确定一下，然后往这写就完事了，但是我们现在做的话，我们就直接是模仿小米这个项目，所以我就直接看小米的了啊，我们就不再费劲了，我直接看小米的字体，小米的字体是不是是不是这样的呀，哎，然后像什么基本的颜色对吧，我们都给它复制过来，CTRLC，然后我们这来CTRLV字体粘过来，诶就用它这个我们就不再去写了啊，这是叫做一个放，然后再有就是一个color，也就说它自己的一个基本颜色是一个333这个颜色，那其他的我们就先不写了啊，那至于这个呃，Wise啊，还有这个background color，待会儿我们再处理啊，待会我们再说这个问题，那现在我们基本的一个网页结构，我们就给它布局出来了啊，布局出来了好，我们这先停一下，你先把这个结构搭建一下，然后我们来。

开始着手做。