Question

请查看以下截图
如何将其转换为html

更清楚的理解
- 设计应具有响应性
- 图标悬停在图标上时，图标应为动画
- 如何将图标置于这些位置

如果背景图片我可以实现这一点，但我需要将其变为html元素

enter image description here

Answer 1

要将此图像转换为HTML，您可以使用不同的方法。但我肯定会使用SVG图像。

要做到这一点：

您可以在插图画家/草图或类似软件上创建SVG图像
然后，您可以按层分隔不同的元素，并为每个图层命名
导出SVG并使用代码编辑器打开它。您会注意到每个图层都有一个ID
现在，您可以使用CSS

Answer 2

嗯取决于你所看到的html。点和线图像可以作为css的背景图像添加，但是当文本增加时它将与图像重叠，如果你想在文本增加时使图像更大，那就更复杂了。

Answer 3

我要查看<canvas>元素。您可以随意绘制圆圈和线条。文本呈现往往不是那么好＆＃34; （至少可以这么说），所以你可能希望将的一部分作为位图。对于其余的，drawCircle和moveTo / lineTo就足够了。（嗯，椭圆弧）

Answer 4

尝试这样的事情：

    #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">
    	    <div id="content">
    		    <heading>Title</heading>
    		    <article>
    			    <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>
    		    </article>
    	    </div>
    	    <div id="frame"><img src="http://placehold.it/60x60" /></div>
        </div>
    </body>

请注意，我将图片重新保存为具有透明背景（而不是白色）的PNG，并使用644像素作为 #content 和 #frame 只是因为这恰好是图像的宽度。更改以反映全分辨率图像的实际宽度。

如何在html中实现以下设计

4 个答案: