位同學大家好，開始進入到本節課。通過之前的課程已經把浮動給徹底的學完了，很多同學跟我私信、留言說：老師，我已經看完了，覺得好刺激，想要實戰，想要鍛煉自己，有這樣的感覺是好的。所以從本期開始老師將帶領大家進行實戰，把源碼專區的界面做出來，進行實戰挑戰自己。

本期課首先要把導航界面一步步的實現出來。首先來實現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>等都是文字類塊級元素，里面也不能放其它塊級元素

代碼如下：