全面的背景和響應

鏈接，你可以看到有關於頭文本（報頭的圖像）文字是： [email protected]（這段文字是圖像的一部分）

我轉換該標頭圖像的一部分來鏈接與下面碼

<div id="hw"><div id="header"><img src="test.jpg" /><a href="#" id="ResponsiveLink"></a></div></div>

，這是#LINK

#ResponsiveLink { 
    width: 267px; 
height:29px; 
display:block; 
position:absolute; 
top:100px; 
margin-left:413px; 
}

我們如何才能使該鏈接在其他設備中響應？例如，當瀏覽器的標籤位置變窄時，#ResponsiveLink id會發生變化，但是我希望它可以固定在我的文本上。

來源

2014-02-08 user3250818

除非你想用'媒體queries'每移動'＃ResponsiveLink'的位置屏幕大小，我建議你分別剪出標題，然後用** a **標籤連接電子郵件圖像 – EmileKumfa

我的主要目標是它的響應性，而不是用任何方式。分離的圖像如何使其響應？ – user3250818

你目前正在建設的東西不是一個可持續的解決方案，你應該看到其他關於如何改進你的網站佈局的回覆。

但是，如果你需要一個臨時的解決方案，下面的CSS變化將當前網頁上的工作：

#header { 
    margin: 0 auto; 
    max-width: 980px; 
    position: relative; 
} 

#ResponsiveLink { 
    background: none repeat scroll 0 0 #FF0000; 
    display: block; 
    height: 30%; 
    left: 60%; 
    position: absolute; 
    right: 12%; 
    top: 37%; 
}

來源

2014-02-08 10:07:09 Nit

也謝謝有價值的信息是的我是新的響應和需要更多的嘗試但你能寫我哪些步驟，我需要達到以上的目標，但以正確的方式嗎？ – user3250818

你會希望從許多嵌套元素中構建自己的視覺效果，而不是製作背景，然後在其上放置不可見的元素。根據您的技能水平，您可能想要開始學習基本HTML佈局如何從頭開始工作。如果您只是在響應方面遇到問題，您可能需要使用一個平臺，在某種程度上爲您抽象它，如Bootstrap。 – Nit

我知道的最好的方法不是將大部分屏幕作爲圖像。另一方面，您可能不想將圖像剪切成多個單獨的圖像。所以，我建議使用CSS Sprit。

分離圖像後，可以使用浮點，清除和百分比寬度將零件放置在彼此的旁邊，或使用類似引導的框架。

如果您仍然希望將圖片作爲整個標題使用，那麼您可以在一個完全不推薦的HTML標記中使用#ResponsiveLink的百分比頂部。您應該只爲其所有父項添加width: 100%：header，hw和wrapper。

繼評論：

#ResponsiveLink { 
    background: none repeat scroll 0 0 #FF0000; 
    display: block; 
    height: 0; 
    left: 58%; 
    margin-left: 0; 
    margin-top: 7%; 
    padding-bottom: 3%; 
    position: absolute; 
    top: 0; 
    width: 25%; 
}

這將解決由於位置和保證金比例之間的差異的問題，頂個是使用第一絕對父母的高度，但margin和padding百分比計算的計算使用父母的寬度。還有一個問題，由最大寬度引起的，你可以在你的#head裏添加一個包裝，寬度爲100％，沒有最大寬度。

使用浮動和分離圖像的其他嘗試有太多的問題寫在這裏，對不起。

來源

2014-02-08 07:58:07 Sheric

>在分離圖像之後，可以使用浮動，清除和百分比寬度將零件放置在彼此旁邊，並且您的意思是在小屏幕中，我將這三個零件放置在彼此的下面，而不是彼此相鄰的水平線上？ .......................... 此外，我還測試了百分比上限，但鏈接位置隨瀏覽器寬度的變化而變化。 – user3250818

我也使用CSS精靈但像素，我不知道如何使用它在響應 – user3250818

使用浮點數，如果您指定一個合適的寬度，您可以在水平線條出這些部分。使頁面響應，可以通過多種方式完成，包括使用百分比而不是像素，但您應該小心。我推薦的方式是使用[bootstrap]（http：// http：//getbootstrap.com/） – Sheric

全面的背景和響應

回答

相關問題