Question

首先，如果这里不鼓励这些问题，我很抱歉，但我真的很担心如何将其作为一个建设性的问题发布。所以，请耐心等待：D

我正在尝试创建一个类似于此的博客：

http://media02.hongkiat.com/blog-design-styles/crayonslife.jpg

我可以在CSS中进行一些点击和试用，但如果我想要“蜡笔的生命”进入同一个h1，我很困惑如何做到这一点。任何提示？谢谢！

编辑：我不会包括图片，这很重要。此外，不需要IE＆lt; 9支持

Answer 1

我会在标题内添加换行符，设置缩进以便在第二行之前有间距，然后向上移动导航。

<h1>A Crayon's <br> Life</h1>
<ul>
    <li>illustrations</li>
    <li>web design</li>
    <li>etc.</li>    
    <li>etc.</li>
</ul>

h1 {
    padding-left: 150px;
    text-indent: -150px;
}

ul {
    position: relative;
    top: -50px;
}

Demo

根据需要设置像素值。

Answer 2

您可以在h1内使用HTML标记，因为它的语义是正确的。基本上是：

<h1>
    <span>a</span>
    <strong>Crayon's</strong>
    <span>life</span>
</h1>

对于SEO，语义，CSS标记，这被认为仍然可以。为了实现这一目标，布局方面的试验和错误仍然是你应该做的工作。

有些事情：

h1 { position: relative; }
h1 span { color: orange; }
h1 strong { color: red; }
h1 strong + span { position: absolute; top: 50px; left: auto/*or in px*/ }

HTML CSS提示设计

2 个答案: