2013-02-18 25 views
-7

enter image description here使用CSS爲頁面內容構建框架

嗨,大家好,我需要用CSS來做這樣的框架。我有8個圖像(4個頂部和底部的角落和4個圖像將被重複)。 此框架應該可調整大小,所以我可以使用javascript將其調整爲屏幕尺寸。

問題是我不知道該怎麼做。我試圖谷歌教程,但失敗。

有人能指點我的方向嗎? 所以我有一個地方開始。一些教程或例子人們如何做) 將非常感謝,謝謝)

P.S.

我知道如何調整圖像大小。 我不知道如何結合div's有像綠色標題。 中間有兩個角落和可調整大小的元素。

+1

SO不是一個驅動代碼生成器。請嘗試自己去嘗試一下。有很多教程。 – BenM 2013-02-18 13:05:38

+0

沒有努力,沒有進展。 – jolt 2013-02-18 13:06:46

+0

你嘗試過搜索任何東西嗎? 「CSS漸變」或「CSS圓角」也許? – cimmanon 2013-02-18 13:07:23

回答

1

除了標題背景,你將不再需要任何其他圖像。您可以使用帶圖像背景和100%寬度的標題的div,另一個div用作具有背景和邊框以及填充/邊距的外部「正方形」,然後使用白色背景和邊框半徑的div(http://www.w3schools.com/cssref/css3_pr_border-radius.asp)。 (你也可以通過使用css3從標題背景做漸變,但它尚未被瀏覽器採用)。

1

我做了一個簡單的jsFiddle,我希望這會有所幫助。我只使用css3選擇器中的border-radius。您可以使用漸變實現標題中的漸變效果。