Question

我一直在制作一个投资组合，而且我并没有真正限制自己更容易编码..所以......我最终得到了这个（这是主页，但几乎所有其他页面都准备好了）的Photoshop）

那么将其转换为HTML / CSS的最佳方法是什么？我应该将它分成多个区域，或者每个层分开（如云，树，岛等）。我被告知要使用语义HTML，但我不确定我理解这意味着什么。我该怎么做按钮？图像地图？这不是一个坏主意吗？

你觉得这个设计值得麻烦吗？

Answer 1

我无法发表评论，我能做的最好就是回答，所以这里有：

先生。 Lister是对的，图像地图可能是要走的路。但是，我认为值得注意的另一个项目，SEO值，特别是对于Home / Portfolio / Contact Me /和About anchors。一个可能的解决方案是使用图像映射...但是进行一些特征检测以查看浏览器是否允许css旋转功能。

您的HTML

<section class="homepage-navigation">
    <a class="contact-me nav-link" href="/contact">Contact Me</a>
    ...
</section>

你的CSS可能是

.home-navigation{position:relative;}
.home-navigation .nav-link{position:absolute;}
.home-navigation .contact-me{transform: rotate(-95deg);left:10px;}

所以...这里有一个权衡。使用图像映射并将链接文本嵌入到图像中会更容易......但是您在看到锚文本的浏览器上失败了。如果你去CSS路线，你需要考虑支持允许转换css属性的浏览器和不支持转换css属性的浏览器。：|

将此设计转化为代码的最佳方法是什么？

1 个答案: