如何編碼此標頭設計？

我最近從一個潛在客戶那裏得到了這個設計，雖然我們不同意一起工作，但我會嘗試爲一些練習編寫設計代碼。這不是我的設計（我沒有聲稱），我也不打算將它用於任何事情，純粹是爲了練習。這也是我阻止公司名稱的原因。

無論如何，當談到這個標題/導航區時，我非常難過。徽標側面的裝飾品以及基本上跨越兩個div的徽標，確實讓我失望。我想知道你們中的任何一個人會如何編碼。

我想每個邊裝飾只是一個div，然後標誌將不得不被絕對定位。這是一個正確的解決方案？

我第一次嘗試將它合併到960grid系統中，但這種情況並沒有發生，因爲標識跨越問題使得網格變得非常困難。

2012-08-13 Jakemmarsh

您的問題太寬泛，但大圖是：刪除所有的菜單項，並使所有其他的一個圖像。將它作爲帶'position：relative'的div的背景添加，並用'position：absolute'定位菜單ul。菜單項可以使用'font-face'，CSS精靈或單個圖像完成。 – bfavaretto 2012-08-13 02:53:48

您是否看到過客戶是否購買了字體，您總是可以對字體進行字體對照，這樣可以讓字體變得更容易。

除此之外，我會刪除鏈接和文本之間的點，然後使用圖像作爲背景，然後創建一個UL，爲每個頁面分配一個類，例如home，about，gallery然後使用一些PHP添加current_page類。

再經過畫廊創建具有以下標記另一個李：

<li class="logo"><a href="/">Logo</a></li>

增添風采像這樣。

li.logo { 
    background: transparent url(....) no-repeat; 
    width: width of logo; 
    height: height of logo; 
    display: block; 
    overflow: hidden; 
} 

li.logo a { 
    text-indent: -9999px; 
    width: 100%; 
    height: 100%; 
    display: block; 
    overflow: hidden; 
}

如果你想我爲你做，或者向你展示例子，我很樂意。

來源

2012-08-13 02:33:31

如果你願意這樣做，或給出更具體的例子，那會很好。我知道你打算如何製作導航/徽標，但那麼徽標將如何重疊到較暗的背景中，並且如何在徽標的任何一側做這兩幅圖像？謝謝！ – Jakemmarsh 2012-08-13 02:41:39

我不確定你在說什麼，我不在任何一方看到任何標誌或兩個圖像？ – 2012-08-13 02:44:51

希望我可以更具描述性和有意義... 我所指的「徽標」是中心的徽章形物體，被封鎖的公司名稱。它位於導航的中間，並且在黑暗背景頂部和無序列表之間重疊。「側面的兩幅圖像」是徽標兩側的捲曲裝飾，在較暗的背景中。希望這樣做更有意義。想到的一個解決方案只是將整個事物作爲標題的背景圖像，只擔心導航/標誌編碼？ – Jakemmarsh 2012-08-13 02:49:52

我會使用一個列表，並在第三個項目上添加一個類，以便爲它創建一個足夠大的margin-right以創建h1徽標的空間。這樣，你的標記就很好，語義也好，你不必使用多個div和列表。

您也可以使用nth-child CSS選擇器而不是添加類。

來源

2012-08-13 02:31:25

如何保證徽標位於導航中心？ – banzomaikaka 2012-08-13 02:43:28

我會假設前3個導航項不會改變。 – 2012-08-13 03:01:27

我會打破原設計爲兩行，像這樣：

enter image description here

「設計」位可以在拳行的中心坐徽標圖像的兩側。這可以讓您鏈接徽標，但不鏈接設計。第二行被分割爲導航元素和徽標。我會把它放在一個寬度和高度均爲div的div中，這是所有各種圖像的確切尺寸。把事情簡單化。你可以把這些行放到單獨的div中，但是我認爲沒有它你會沒事的。

對於超低預算的實現，請按原樣使用圖像並將圖像映射應用於它以添加所需的鏈接。你會失去像翻轉圖像這樣的選項，但這就是低預算的原因。

由於這是一個學習練習，請嘗試用幾種不同的方法對其進行編碼。浮動所有元素，絕對放置它們，製作列，製作行，使用大背景圖片，並將導航放在它上面，以及任何你能想到的東西 - 但沒有表格！:)

來源

2012-08-13 02:59:26

當然沒有桌子！感謝你的想法，我會盡快嘗試其中的一些，看看我能夠工作。 – Jakemmarsh 2012-08-13 03:20:05

我會爲「使用大背景圖片並將導航放置在其上」投票。更少的服務器命中==更好的性能（儘管你可以創建一個包含幾個小圖像的精靈圖像，它們會有相同的結果）。 – steveax 2012-08-13 03:23:24

如何編碼此標頭設計？

回答

相關問題