在标题中添加徽标和其他图像

时间:2014-02-01 08:56:18

标签: html5 css3

我正在尝试在标题中添加徽标,但是当我添加它时,它会将电子邮件和联系人号码(它们也在标题中)向下移动。

我该如何解决这个问题?我正在使用一个简单的img函数将徽标添加到标题中。

我还希望在电子邮件和标题中的电话号码前显示一个小电子邮件图标和一个小电话图标。

我该怎么做?

而且我也不希望这个背景图像显示在整个页面上。它应该只占页面的1/4。我该怎么做才能实现这一目标?

<header id="big">
<img src="capture.png"/>

<style type="text/css">
    body{
    background-image: url(ny.jpg);}

</style>
    <h3>info@xyz.com  +123-456-789 <h/3>

</header>

我的CSS:

    #logo{
        display:inline-block;
}

2 个答案:

答案 0 :(得分:0)

另见: - http://jsfiddle.net/9wa8j/1/

你说你想要像图像和文本相邻的东西。对?   所以,根据我的理解,我尝试过这样的事情: -

.s{
 display:inline-block;

 }

检查此链接: - http://jsfiddle.net/9wa8j/

答案 1 :(得分:0)

请参阅,要添加小型电子邮件和手机图标,只需对图片进行小型谷歌搜索即可复制其链接并将其粘贴到图片源中。根据您的要求调整图像大小。

  height:30px;
  width:30px;

检查此链接,我添加了图片图标 http://jsfiddle.net/9wa8j/4/

PS: - 不要因为看到代码而感到害怕。因为它包含图片网址,这就是为什么它太长了。