Question

我有2个问题（更像是1.5）

1）将第一张图片中的菜单修改为第二张图片中的菜单的正确方法是什么。由于我将图片和文字都放在同一<a>标签中，因此我遇到了白色边框问题（图标为30x30像素，周围没有透明空间或任何东西）：

HTML：

<div id="header">
    <div class= "main">

        <div class="logoHeader">
            <a href="#"><img src="logo.png"></a>
        </div>

        <div class="menuPicHeader"> 
            <a href="#"><img src="stovyklae.png"><h2>stovykla</h2></a>
            <a href="#"><img src="klubase.png"><h2>klubas</h2></a>
            <a href="#"><img src="elparde.png"><h2>el. parduotuvė</h2></a>
            <a href="#"><img src="kontaktaie.png"><h2>kontaktai</h2></a>
        </div>

        <div class="socialIconsWrapHeader">
            <a href="#"><img src="yttop.png"></a>
            <a href="#"><img src="ftop.png"></a>
        </div>

    </div>
</div>

CSS：

h2{
        display:inline-block;
        text-transform: uppercase;
        text-decoration: none;
        color: black;
        margin-left:10px;
        margin-right:10px;
        font-size:14px;

    }

.logoHeader{
        margin-left:15px;
        float:left;
        margin-bottom: 20px;
        margin-top:15px;
    }

    .socialIconsWrapHeader{

        float:right;
        margin-top:15px;
        margin-right:20px;
    }

    .socialIconsWrapHeader a{
        margin:0px 10px 0px 10px;
    }

    .menuPicHeader{
        float:left;
        margin:20px 0px 0px 130px;
        padding-left:10px;
    }

    .menuPicHeader a{   
        padding-top:20px;
        padding-bottom:2px;
    }

2）我想知道应该用什么来将文字放到图片上，如下所示：

我应该将图片切成两半，得到一些div并将灰色的一半作为背景粘贴到图片的底部吗？或者以某种方式只写在<a>？

之上

HTML：

<div class="rightCol1"> 
    <a href="#"><img src="pic1.png"></a> 
    <a href="#"><img src="pic2.png"></a>
</div>

CSS：

.rightCol1{
    float:right;
    margin-right:30px;
    margin-top:10px;
}

Answer 1

第二次

<div class="rightCol1"> 
    <a href="#"><img src="pic1.png"><span>your text</span></a> 
    <a href="#"><img src="pic2.png"><span>your text</span></a>
</div>

CSS：

.rightCol1{
    float:right;
    margin-right:30px;
    margin-top:10px;
}
.rightCol1 a {display:inline-block;position:relative;height:200px;width:100px;}
.rightCol1 a span {display:block;width:100px;height:70px;position:absolute;bottom:0;left:0;z-index:99;background:#333}

Answer 2

1：添加.menuPicHeader a{ margin-right: 20px; }

http://jsfiddle.net/Lphup/

2：有很多方法可以做到这一点，但这里有一个选择：

http://jsfiddle.net/33vth/

Answer 3

如果将父级的定位设置为“relative”，然后将其定位设置为绝对，则可以对元素进行更多定位控制。这使您可以使用top，left或right设置子对象的绝对位置，与其父对象相关。

我没有机会尝试这个，但是这样的事情可以解决问题：

.menuPicHeader { position: relative; } 
.menuPicHeader a { position: absolute; top: 0; }

带有图标的HTML + CSS菜单，结合了2张图片

3 个答案: