位同学大家好，开始进入到本节课。通过之前的课程已经把浮动给彻底的学完了，很多同学跟我私信、留言说：老师，我已经看完了，觉得好刺激，想要实战，想要锻炼自己，有这样的感觉是好的。所以从本期开始老师将带领大家进行实战，把源码专区的界面做出来，进行实战挑战自己。

本期课首先要把导航界面一步步的实现出来。首先来实现logo的专区，logo可以打开浏览器的f12，然后分析一下它。把鼠标移动上去过后可以明显的看见它是一个mg标签，mg标签是图片框标签，所以这个区域可以用图片框标签来实现。

·首先把图片进行储存，将它储存到本地，然后将所储存的标签放到原本的布局的源码的列表里面去。可以新建文件夹叫做文件或是im、a、t、e，尽量文件夹的起名都用英文好一点，虽然是用中文编程，但是文件夹可以用英文或者是拼音，觉得更标准一点。

·然后对文件进行引用，引用之前首先新建一个筛选器，筛选器可以把它理解为是一个分组，新建一个试点器，比如叫做全局文件logo，它是属于全局文件，新建一个全局文件的文件夹。

·然后进行引用，打开文件，找到目录，选择图像文件进行引用。引用过后再来新建一个文件夹，这个文件夹叫做原码专区，cs或者是原码专区都可以，就叫做原码专区。

·然后在原码专区里面去新建一个文件，新建一个原码专区的cs文件，这里点击lcs，点击创建。这里创建之前其实也可以再新建一个文件夹，这个文件夹就是cs文件，可以把cs文件放到cs目录以后，需要加斯cable可以再放到加斯cable的目录，要把这分目录的分组做好。

·选择目录，将它保存在项目里面的，等一下找到目录，将它保存项目里面的css文件夹里面，点击选择，点击创建。

·创建过后打开点lcs的文件，将之前所编写这些布局的cs文件拷贝过去，剪切一下，然后再粘贴过来。粘贴过来过后来进行代码格式化，整理一下，这样看起来代码就非常的舒服了。

·然后把标签、样式标签就可以删掉了，这样原代码可以很清晰的进行观看，cs可能以后会写很多cs，原码主要写cs就写这里就好了，atm就写h n代码，是不是非常的舒服？

·接下来还要对cs进行引用，虽然创建了cs，但是cs还没有在h s引用一下就好了，cs文件就属于h m a的文件了。

·首先还对页面进行分析，可以看见最基础布局是可以把最基础布局先运行起来，最基础布局是顶部导航已经把实现了，其实顶部的布局是居中的，内容是居中的，是从这个位置开始居中的，所以还要创建一个居中的盒子在顶部导航里面，都要进行居中。

·接下来来实现这一步，在顶部导航区域里面新建一个区块盒子，盒子可以在顶部导航这里尽量挨着它，再新建一个类名，比如叫做居中，叫导航顶部，导顶部导航居中盒子，顶部导航集中盒子更好理解一点。

·宽度之前分析过专区的宽度是一千一百七十px，就输一千一百七十px就好了，一千一百七十px高度就不填高度，让它默认去继承顶部盒子高度。

·改个背景颜色，方便去查看背景颜色，给它一个红色，然后进行设置，类名要记住经常性的保存，不保存是不生效的。

·进行设置，点击运行，可以看见运行过后目前为止是没有效果的，可以再次打开代码来看一下，宽度一千一百七十px，背景颜色为红色，但是没有生效，可以给它指定个高度，指定高度为五十五px，运行起来看一下，有效果，现在是有效果的。

·有效果过后先让它进行居中，比如背景居中是外边距，首先是零ps，自动就居中了，运行起来是不是居中了？

·然后就可以在盒子里面去写logo图片了，首先来分析下logo图片，用f4，打开开发者工具，点击这里，鼠标移动上去，可以看见图片的宽度和高度是多少，这里有显示，图片下面都有显示，是八十的宽，三十的高。

·所以这个时候可以打出一个图片框，在这里打出一个图片框，这个图片框的图片地址就是logo，文件logo。

·这个时候设置一下图片框的宽度和高度，可以这样写，可以直接点上面盒子名称，点图片框，这么写的含义就是指定类名下面的图片框。这个方式之前是没有学习过，给大家讲一下。

·通过类名，比如指定一个类名指定的盒子，盒子下面的所有的组件都可以通过类名，类名点某一个组件名称来进行指定，理解吧？比如这里是类名是这个，顶部导航居中盒子，类名点顶部导航居中盒子，给个空格，名称就是组建名，图片框的名称，可以设置它的一些属性了。

·比如设它的宽度为八十px，高度三十px，可以运行起来看一下效果，点击运行，是不是有个图片框，这就显示到八十和三十，把红色删掉，红色的背景删掉，是不是八十、三十，看起来很舒服。

·接下来要让它进行居中，既然让它进行居中，其实也很简单，只需要设置它的外面就好了。首先要进行分析，它的高度是三十px，而这个副组件盒子的高度是五十五px，就是五十五px，要经常做计算，要严格一点来做计算，五十五减去三十就等于二十五px，二十五px就可以除以二。

·比如上边距是十五点，十二点五px，下边距是十二点五px，所以直接指定一个外边距，外边距第一个参数是上下，十二点五px，左右零px，这样就好了，点击运行，可以看见是不是就居中了。

本节课就简单的先实现这样的logo效果，下节课再来实现，比如像这里面的导航的效果，一步步来实现。本节课到此结束，下节课再见。

行效果图

技术要点

• 类选择器

语法： 类选择器名称 { }

• 标签选择器

语法：标签名 { }

• 行内元素

常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其 中<span>是最典型的行内元素

行内元素的特点：

1、相邻行内元素在一行上，一行可以显示多个。

2、高度，宽度直接设置无效

3、宽度默认是本身内容的宽度

4、行内元素只能容纳文本或其它行内元素

注意：

1、链接里不能再放其它链接

2、特殊情况<a>链接里面可以放块级元素，但是给<a>转换一下块级模式最安全。

• 块元素

常见的块元素有<h1>--<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>是最典型的块元素

块元素的特点：

1、独占一行。

2、高度，宽度，外边距以及内边距都可以控制。

3、宽度默认是容器（父级容器的100%）

4、是一个容器及盒子，里面可以放行内或者块级元素

注意：

1、文字类的元素内不能使用块级元素

2、<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>

3、同理,<h1>--<h6>等都是文字类块级元素，里面也不能放其它块级元素

代码如下：