先上張原圖
這是我做的
接下來我就說明下裡面我遇到的知識點。
①豌豆莢是乙個鏈結，只是用代替文字而已，裡面重要的一句是text-indent: -9999px;意思是將文字縮排到左邊網頁外，再用乙個logo的class用background替換背景。
②小細節border-bottom: 1px solid #dfdfdf;
box-shadow: 0 0 3px rgba(0,0,0,0.15);這樣會使導航灰色背景下面有一條顏色較深的灰線，是不是看上去更質感。
③border-radius: 3px 3px 3px 3px;圓角
第乙個值是水平半徑。
如果第二個值省略，則它等於第乙個值，這時這個角就是乙個四分之一圓角。
如果任意乙個值為0，則這個角是矩形，不會是圓的。
值不允許是負值。
④a 看原網頁導航中，人家的鏈結之間都隔著距離，而且每個還有高度寬度，之前我怎麼弄都不不行，後來突然想到裡面的「首頁」等文字是鏈結，不是像li那樣的塊級元素，內聯元素怎麼可以設定高度寬度呢！所以加上display:block；一切搞定。一般的塊級元素諸如段落、標題...、列表,、**、表單、div和body等元素。而內聯元素則如: 表單元素、超級鏈結、影象
到現在搞不清什麼是內聯元素的情猛擊
⑤應用的右邊有乙個向下的箭頭，看它的css，其中有乙個這樣的display:inline-block;它的意思就是結合了內聯和塊級元素的特點，既能使其在一行，又能設定高寬，但是放著的意思我不太懂！還請高人指點，我猜可能是相容吧！
border-top: 4px solid
#999
;border-left: 4px dashed
transparent
;border-right: 4px dashed
transparent
;看不懂？沒關係，這裡講的很詳細
⑥搜尋欄的裡面的「搜尋應用」字樣，當你在裡面寫字的時候字自動不見了，刪除完的時候他又出現了，看下**就知道了
是不是很簡單呢！
糾正，此方法在經本人試驗後不對，希望高人解釋！
web前端網頁設計作業 如何學習網頁前端設計培訓？
學習網頁的前端設計分為幾個步驟或者說幾個網頁設計教程大類。乙個是熟練掌握各種網頁設計需要的操作軟體，然後就是web介面設計與專案設計，最後還有web整站設計實訓。如何學習網頁的前端設計呢？許多零基礎的學員想要從事網頁設計或者網頁前端的工作，想要成為一名網頁設計師都不知道從何學起。非凡教育的特色課程專...
Web前端 軟體和網頁的概述
二.軟體的分類 三.軟體的架構 2.伺服器 返回響應 四.網頁的結構 五.統一資源定位器 uniform resource locators 六.靜態網頁與動態網頁 通常我們講的網頁就是html網頁，也就是靜態網頁internet上網頁的位址 網域名稱包括 網路名 網域名稱主體 網域名稱字尾 例如 ...
web的各種前端列印方法之CSS控制網頁列印樣式
css控制網頁列印樣式 使用css控制列印樣式，握剛剛使用時一塌糊塗，根本不知道css中的midia的作用是什麼，問到別人說匯入這個樣式，還傻乎乎的不知所措。如果你也有這種現象，那麼我告訴你吧，在w3school查到css的midia的作用。midia 定義和用法 media 屬性規定被鏈結文件將顯...