如何實現在HTML以下設計

-6

請找到下面的截圖
如何將其轉換成HTML如何實現在HTML以下設計

爲了更清楚地理解
- 設計應響應
- 圖標爲動畫時，懸停在圖標
- 如何將圖標在那些位置

如果背景圖片，我可以做到這一點，但我需要使它成爲HTML元素

enter image description here

2014-11-21 CnuVas

（ᾥhat不是這樣的一個問題嗎？）請詳細說明，如果說明如果你的社交圈/圖是元素或背景圖片它應該是響應式的，如果你正在討論圍繞元素或任何東西的文本對齊。同時顯示您迄今爲止所嘗試的所有代碼，以解釋您的具體問題。否則你的問題不適合本網站所需的問答格式。 *欲瞭解更多信息：* [help] – 2014-11-21 01:27:34

到目前爲止您嘗試過什麼？這個問題太模糊了，沒有人會去你的項目。如果你想有一個答案，至少有一個HTML代碼或什麼的。或者，如果您不知道HTML，請轉至Google和Google「HTML教程」。 – Tetsudou 2014-11-21 02:03:26

要將此圖像轉換爲HTML，您可以使用不同的方法。但我肯定會使用SVG圖像。

爲了做到這一點：

您可以創建插畫/草圖SVG圖像或類似的軟件
然後你就可以分出層次不同的元素，並給每個圖層的名稱
出口SVG並用代碼編輯器打開它。你會發現，每一層都有一個ID
現在你可以用CSS動畫的每個ID

來源

2014-11-21 03:17:23

嗯取決於你所看到的HTML。點和線圖像可以作爲背景圖像添加到CSS中，但是當文本增加時它會重疊圖像，如果您想在文本增加時使圖像更大，則會更加複雜。

來源

2014-11-21 01:01:03 seahorsepip

那些圈子是圖標 – CnuVas 2014-11-21 01:04:59

那麼？您仍然可以將所有內容合併爲一個大圖像並將其用作背景圖像。當你想讓每個圖標都是可單擊的單獨html元素時，它會變得更加複雜。 – seahorsepip 2014-11-21 01:07:23

當鼠標懸停在這些圖標上時，我需要實現一些動畫 – CnuVas 2014-11-21 01:08:41

我會看看<canvas>元素。你可以畫圓圈和線條。文字渲染往往是「不太好」（至少可以這麼說），所以你可能想要那的一部分是位圖。其餘的，drawCircle和moveTo/lineTo就足夠了。（嗯，和橢圓弧）

來源

2014-11-21 01:14:14 dhc

嘗試是這樣的：

#content { 
 
     width: 664px; 
 
     margin: auto; 
 
     position: relative; 
 
     top: 150px; 
 
     z-index: 1; 
 
    } 
 
    
 
    heading { 
 
     display: block; 
 
     width: 100%; 
 
     text-align: center; 
 
     font-style: italic; 
 
     font-size: larger; 
 
     font-family: sans-serif; 
 
    } 
 
    
 
    article { 
 
     margin: 10px 100px; 
 
    } 
 
    
 
    #frame { 
 
     z-index: 0; 
 
     width: 664px; 
 
     margin: 0 auto; 
 
    }

<!doctype html> 
 
    <html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <link href="demo.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 
    <body> 
 
     <div id="container"> 
 
    \t  <div id="content"> 
 
    \t \t  <heading>Title</heading> 
 
    \t \t  <article> 
 
    \t \t \t  <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
 
        industry. Lorem Ipsum has been the industry's standard dummy text ever 
 
        since the 1500s,when an unknown printer took a galley of type and 
 
        scrambled it to make a type specimen book. It has survived not only 
 
        five centuries, but also the leap into electronic typesetting, 
 
        remaining essentially unchanged.</p> 
 
    \t \t  </article> 
 
    \t  </div> 
 
    \t  <div id="frame"><img src="http://placehold.it/60x60" /></div> 
 
     </div> 
 
    </body>

請注意，我用一個透明背景重新保存圖像爲PNG（而不是白色），並且我使用了644像素作爲＃內容和＃幀的寬度，僅僅因爲那恰好是圖像的寬度。更改以反映您的全分辨率圖像的實際寬度。

來源

2014-11-21 02:16:06 PaulL

如何實現在HTML以下設計

回答

相關問題