好歡迎回來。
在這段視頻中，我們要馬上對我們網站的造型工作。
這肯定遠不什麼它應該看起來像在年底。
因此，讓我們居然並排比較它們的一面。
下面是在這裡我們的。
所以一些大的變化，我們需要做四捨五入角落在這裡加入一些間距往上頂。
改變這裡的按鈕樣式。
所以，這些按鈕並不真的像按鈕，直到你將鼠標懸停在他們，我們得到一個懸停影響我們的按鈕是絕對可怕的，我們不會對他們有任何懸停效果。
另外他們的位置是有點不對勁。
正如你可以看到，如果我在這裡想我得到的文本，但如果我是那清新高科技空間已經佔用與我們的版本，如果我猜的文本推一切的向兩側。
也有在這裡的動畫。
所以，當我點擊看到他們是如何慢慢淡出我們就當我們點擊好，如果我點擊了不正確的之一，它只是立即被刪除。
因此，我們要添加到一個過渡。
此外，我們有H-1在這裡需要對我們的一些工作。
它需要佔用更多的空間。
我們需要改變背景顏色。
我們要改變字體。
我們需要確保我們的色彩的跨度格式正確無誤所以它在自己的行，這是一個更大的字體。
此外，我們需要改變字體為整個身體。
所以這些都是相同的字體。
，最後你會發現，我們有一點點空間就在這裡的條紋和身體的結束和解決方案的版本沒有空間可言。
好。
讓我們首先解決這一H-1開始。
因此，我們會去我的亞系的文本，然後轉到H-1和將要做的僅僅是調整在中間的東西，你可以在解決方案中看到的第一件事。
事情對準中心。
因此，我們需要做的就是添加文本對齊中心以及保存和刷新。
好吧略有改善。
接下來讓我們改變背景顏色所以顏色會是藍色的還是，但你會發現，如果我刷新頁面，現在它工作得很好。
但是，如果我再次刷新，然後我贏得比賽還是我點擊了新的色彩。
這又回到了黑色，這就是因為我們的JavaScript代碼重寫，我們正在設置回我們的JavaScript這種暗灰色黑色的顏色。
我們需要找到我們重置為這種顏色是2 3 2 3 2 3的位置。
開始了。
我們只是想改變這是仍然藍色。
這也是當我刷新它開始它仍然是藍色的。
我得到新的顏色。
它保持靜止藍色。
好。
不過就是這樣。
現在，讓我們對我們的H-1的兩側擺脫所有的黑色空間。
因此，在我們的H-1，我們要得到頂部和底部的左側和右側擺脫所有保證金保證金為零。
因此注意到，當這樣做會發生什麼。
那黑色空間消失各方除間距在左上角和右邊這一點。
而這還不來自或H-1這實際上是從身體的到來。
因此，要解決這個問題，我們可以去身體，並給它利潤率為零。
而到現在注意這一點差距，我會刷新和消失。
因此，我們的白色條紋雲一路，就像它在這個版本在這裡所做的一面。
好。
接下來讓我們關注的樂趣。
所以樂趣將是我們所有的元素都是相同的。
按鈕和H-1和跨度在這裡它是所有相同的字體略有不同的字體粗細。
而我們將只使用內置之一的字體系統vaunts被稱為艾文莉。
所以這將是字體系列艾文莉。
也就是說，可能不是每個系統上工作在那裡的字體。
因此，我們要在另一種選擇是山補充。塞拉特就這樣。
因此，我們結束了這個有趣這裡這顯然看起來不完全一樣。
這歸結為我們的字體粗細。
所以我們需要改變這種字體的重量，因為它是一個H1。
默認是使其加粗或有像700或800，甚至900字體粗細。
我們想要做的是給它字體粗細正常。
所以，當我們的H-1可以添加字體粗細正常和保存。
刷新。
這就是仔細一看。
現在有我們需要改變一些其他的東西。
其中第一個是，這是所有大寫，我們可以與RCSS使用文本轉換大寫和保存所以，現在仔細看，也將希望確保我們的顏色是它自己的行，並且我們的風格跨越略有不同的方式來做要做到這一點。
我們要在這裡走了過來到我們的團隊，實際上我們要編輯的年齡他出去一點點。
這是我們打算使這項工作的第一種方式。
我們會看到Pearcey SS做的另一種方式但我們會通過這個造型我們有偉大的上一行開始，然後添加一個突破。
我們可以用ABR標籤，實際上這遠不是一個偉大的想法，風格這是一個有點令人難以接受，但它上手增加了一些回報，一些換行一個快速簡便的方法，這一切，這個標籤的作用是它增加了一個換行符。
因此，我們要一前一後大，我們想休息一下，然後我們的跨度，那麼我們希望在底部的另一個突破，然後顏色遊戲，如果我們現在刷新你可以看到我們越來越近了。
現在我們需要集中精力使跨度很多大。
所以這個樂隊有彩色顯示器的想法。
所以，我們要投奔於R（C S）S和選擇就這樣的彩色顯示屏。
標識的彩色顯示屏，然後我們會說字號是H-1字體大小的200％。
如果我們刷新我們現在得到這個更大的字體大小。
而且我們越來越近了。
我們有我們的休息時間在這裡了。
你也注意到，雖然我們有字裡行間更多的空間比我們在這裡做的。
因此，有一些事情是我們可以做的這項工作。
第一個是改變行的高度。
因此，我們將給予1.1的行高和保存。
讓我們再看看我們的版本，並刷新，你可以看到，縮小了一點。
但現在我們失去的頂部和底部的空間。
我們需要一點點空間存在。
所以，我們要做的是去並添加一些填充。
所以，我們要填充添加到頂部和底部沒有只左右，我們要在頂部和底部的20像素，所以我們所能做的，只是這樣的填充20個像素和零。
我們也可以做填充前20個像素，填充底部，但這是做刷新一個更好的一小段路，你可以看到我們幾乎沒有了。
因此，我們的頭看起來不錯。
我們有正確的字體正確的字體方式這一切都在大寫正確的背景顏色。
讓我們確保，因為我玩停留正確的看起來都很好。
我們應該處理接下來的事情，這是導航欄上的按鈕。
所以我們肯定還有很長的路要走，以改善這些。
我們要做的第一件事就是擺脫國界的，所以我們沒有按鈕周圍這個明顯的邊界。
我們也想擺脫的背景色。
所以，不應該有背景，你可以在這裡看到。
這只是等到我們懸停或直到我們選擇之一。
此外，我們希望確保字體系列是一樣的這種字體在這裡。
所以，讓我們開始吧。
而且我會選擇讓所有的按鈕，按鈕和我們只是說沒有邊界和保存。
需要注意的是按鈕，當我刷新。
好。
所以，我們現在有沒有邊界。
但是，我們仍然有背景顏色。
所以，現在，相同的背景，並沒有保存和更新，我們正在越來越近。
所以，現在我們剛純文本。
我們會通過使所有文字大寫像我們有超過這裡開始。
所以我們使用文本轉換再次只是行複製粘貼上，在那裡和刷新。
現在我們的按鈕都是大寫。
我們要做的下一件事就是確保該按鈕進入從頂部到div條紋容器的底部一路。
現在，它不僅佔用了一部分空間，所以我們可以通過設置高度為100％的做到這一點。
這意味著它會佔用包含元素的100％，你可以看到可以讓我們拉近了許多。
剛才我們需要改變一些顏色改變字體大小字體粗細，然後改變我們不設置了尚未懸停效果。
將要做的下一件事就是讓字體等待有點重，改變顏色是藍色還是為好。
因此，字體粗細會做七百然後顏色也將仍然藍色。
讓我們檢查了刷新。
因此，它變得有點老，你還可以看到的顏色已經變成了藍色的還是相同的顏色，我們有回到這裡。
這裡是一個非常微小的變化，我們可以使這是改變字母間距是一個像素。
如果你不注意的時候我刷新你可以看到的東西每個字母之間間隔了只是一點點。
萊斯利讓我們關注的字體大小。
他們似乎有點太小了。
因此，我們將只使用字體大小，並將其設置被繼承。
如果我刷新你可以看到，他們繼承字體大小和我們沒有明確地說了出來。
現在讓我們一起來看看。
其中一個很大的不同是，他們目前正在間隔不同。
只要在頁面加載我們這裡有空間，我們的版本。
然而，我們沒有空間，直到我們點擊一個按鈕。
所以我們需要做的是真正的風格，就在這裡的跨度，跨度被稱為消息，我們將要離開或放棄某些屬性，使其佔用的空間，而我們需要做的是改變一個人屬性實際上。
因此，我們要選擇顯示我們的信息是這扇和我們要改變顯示屬性為排隊。
BLOCK那麼，如果我刷新你不會注意到一個很大的區別馬上會做，但是這是因為我們還需要為它分配一個與你所知道的有20％，給它一個保存和刷新。
我們現在有這個跨度，即使它不具有任何東西，佔用該屏幕的20％。
所以這推動這些元素是正是我們所需要的一面。
讓我們來看看，並進行比較。
好吧，這樣看起來八九不離十。
現在我們要工作在下次越來越所選類相匹配的顏色和我們有懸停效果為好。
所以這將是我們的按鈕，我們打算先添加懸停效果。
因此，我們需要做的就是添加在按鈕Colan胡佛，我們要改變字體顏色為白色和背景色為藍鋼。
所以，我們基本上扭轉了顏色，我們將保存並刷新。
現在，當我將鼠標懸停你可以看到我得到的效果。
完善。
而我們選擇的類，我們將要看看一樣的。
只是要複製的樣式。
還有當我們徘徊在東西的時候是選擇它與無差異。
他們應該看起來是一樣的。
所以，你可以看到一個權利，我徘徊，只有當我徘徊。
是否得到了藍色背景和白色文本顏色。
當我移動它就會消失。
有輕微的差別。
如果我將鼠標懸停在該解決方案按鈕注意到它消失在顏色。
這不只是對我的版本的即時切換。
它只是瞬間切換。
我們可以修復使用按鈕選擇裡面一個C SS過渡性質。
我們打算寫過渡和傳遞。
兩個參數有兩個值，第一個就是我們要轉型，並在我們的情況下，我們只是將它添加到每一個屬性，然後下一個是我們要多長時間服用。
所以我打算先用兩秒鐘誇大它。
如此反复的過渡性質是我們如何能告訴CSX如何動畫顏色變化或更改字體大小和性能之間的轉換。
因此，我在這裡說的是，在任何按鈕，這對我們來說真的只是顏色和背景隨時屬性更改。
所以當顏色的變化和背景顏色變化應採取兩秒鐘，你會看到當我刷新。
我徘徊。
哦，這仍然沒有工作。
我在這裡失去了我的小號2.00秒。
現在如果我刷新和懸停它需要兩秒鐘，淡入，當我點擊添加所選類還需要兩秒鐘，它需要兩秒鐘淡出，當我離開。
所以2秒肯定是太長。
我想我的目標點左右三秒鐘。
讓我們測試了這一點。
在那裡，我們走了。
它看起來相當不錯。
最後一個大的事情越來越圓角對這些廣場，我們得到的圓角使用的是被稱為邊界半徑財產的方式。
所以，我有位DOCS打開，如果你想看看。
這是一個很好看的。
但他們表現出你不同的東西，你可以用做電路板半徑的一些例子。
所以，我們要做的就是給它一個輕微的邊界半徑，在這裡這些都是正方形。
讓我們來看看我們的目標什麼。
因此，這些都是我們所希望得到的。
所以這是輕微的輕微的曲線。
讓我們去到我們的廣場階級和分配邊界半徑，讓我們做一些真正誇張的開始，我會告訴你，如果我們做的50％會發生什麼。
我們得到的圈子，你實際上可能更喜歡使用圓。
我用的是他們考慮，但最終我更喜歡這種圓角正方形和我使用的數字是15％。
而我們就仔細檢查和比較的。
OK，這樣看起來不錯。
百分之十五，但如果你想我會告訴你，如果我們不喜歡的東西了5％，刷新會發生什麼。
我們得到非常略顯圓潤的邊角。
所以，我會回到我15刷新，現在我們有很好的圓角，但我們也需要在獲得動畫效果的工作，因為當我點擊其中之一。
請注意如何當顏色的變化就淡出就像懸停效果消退和縮小。
為了實現這個目標，我們還需要使用的過渡性質，但在一個稍微不同的方式。
所以我打算去廣場，我們希望過渡的唯一的事情是背景色或只是背景。
又一次讓我們做一個很長一段時間如，2.0秒，看看如何看起來。
所以，我會刷新，我會點擊其中的一個。
你可以看到它有兩個整秒淡出。
所以我們不想要的東西來維持這麼久。
也許去零第六點可能。
讓我們來試試。
好。
這似乎是合理的。
所以你可以看到，每當這樣的背景下改變它需要0.6秒。
和以往不同的是，雖然在其他屬性改變它並不動畫他們喜歡我們的按鈕，我們說，當任何屬性更改應採取點三秒。
我們只是針對背景和改變。
它應該採取0.6秒。
我們確實想知道的一個次要的事情是過渡性質不會在所有的瀏覽器，我們已經寫它現在是作為瀏覽器盡可能友好的方式。
實際上，我們需要在兩個我們不會注意到在功能上有什麼區別，但也有只為瀏覽器支持屬性添加。
因此，第一個是網頁工具包Dasch過渡，我們只在這裡添加相同的確切值就這樣。
然後，我們需要另外一個是，這應該是一條虛線莫茲M. Ozy。
因此，這些實際上是瀏覽器的前綴。
因此，網頁工具包是Web工具包是一個瀏覽器在使用如Safari引擎。
然後我們有莫茲和Mozy的是短表是Zilah這就是Firefox是建立在。
所以這些都只是添加一些更多的支持，因為過渡屬性沒有內置到每一個瀏覽器呢。
因此，我們刷新。
應該沒有什麼不同似乎。
我們的遊戲還是工作方式相同，我們仍然得到同樣的動畫，我們應該做同樣的事情到這裡的時候，我們已經轉變都只是重複這一點，並改變是過渡和轉軌的過渡MOOC均為0.3秒。
我們可以解決這裡的最後一件事是條紋和格子我們的開始之間的間隔中的位。
所以你可以看到我們這裡有一些更多的間距，我們沒有在這裡。
而現在，如果我們考察我們是圍繞我們的電網的元素。
我們有我們的廣場，我們有一個DIV ID容器和容器div善有善報所有6個正方形。
因此，我們可以使用，只是添加一些間距到容器div我們只需添加一個保證金的頂部和底部。
所以，我認為我們已經樣式那麼一點點。
開始了。
所以我們說利潤率為零。
和自動我們將做什麼，而不是說的是利潤率的頂部和底部，並自動在左，右這是它是如何中心20個像素。
因此，我們要在頂部刷新左右，但20個像素，要成為汽車。
我們有我們的間距。
OK，所以我們正在與造型做了現在。