Question

我有一个关于我正在处理的（响应）网站的标题/导航的概念，但遗憾的是我无法弄清楚如何在HTML / CSS中实现我想要的方式响应式布局。

这是我想要实现的概念：

enter image description here

基本上，徽标需要位于导航左右两半的中间，并与标题div重叠。

Answer 1

试试这个

http://jsfiddle.net/abbood/9yhHE/

（我用我创建的随机图片替换了你的徽标图片）使导航栏看起来好像是一种颜色..只是确保s和零边框之间没有间距..你很高兴

<强> HTML

<div id="imgContainer" />
<table>
    <tr>
        <th>left header text</th>
        <th>right header text</th>      
    </tr>
    <tr>
        <td>
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>
        </td>
        <td class="right">
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>   
        </td>
    </tr>
</table>

<强> CSS

#header {
    height: 3em;
    min-width: 40em;
}


table {
    width: 100%;
    min-width: 40em;
}

ul {
    list-style:none;
}

ul li {
    display: inline-block;
}

table tr th:first-child {
    text-align: left;
    padding-right:1em;
}

table tr th:nth-child(2) {
    text-align: right;
    padding-left:1em;
}

table ul {
    padding-left: 0;
    padding-right:0;
}



table tr:nth-child(2) td:nth-child(1) {
    text-align: right;
    padding-right: 3em;
}
td.right {
    text-align: left;
    padding-left: 3em;
}


#imgContainer {
    width: 100%;
    min-width: 40em;
    background-image: url(http://s8.postimage.org/49ywsfsqp/logo.png);
    background-position: center;
background-repeat: no-repeat;
}

注意：我做了基本的结构..我把样式和导航栏项目之间的间距给你（这很容易）..但基本结构应该是shound

更新的只需要让徽标出现在顶部..（通过z-index + abs定位做到了）

这是更新后的http://jsfiddle.net/abbood/9yhHE/2/

<强> HTML

<div id="imgContainer">
    <img  src="http://s8.postimage.org/49ywsfsqp/logo.png" />
</div>
<table>
    <tr>
        <th>left header text</th>
        <th>right header text</th>      
    </tr>
    <tr>
        <td>
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>
        </td>
        <td class="right">
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>   
        </td>
    </tr>



</table>

<强> CSS

#header {
    height: 3em;
    min-width: 40em;
}


table {
    width: 100%;
    min-width: 40em;
    background-color: yellow;
}

ul {
    list-style:none;
}

ul li {
    display: inline-block;
}

table tr th:first-child {
    text-align: left;
    padding-right:1em;
}

table tr th:nth-child(2) {
    text-align: right;
    padding-left:1em;
}

table ul {
    padding-left: 0;
    padding-right:0;
}



table tr:nth-child(2) td:nth-child(1) {
    text-align: right;
    padding-right: 3em;
}
td.right {
    text-align: left;
    padding-left: 3em;
}

#imgContainer {
        min-width: 40em;
        position: absolute;
        width: 100%;

}

#imgContainer > img{
    width: 50px;
    height: 50px ;
    z-index: 1; 
    display: block;
    margin: 0 auto;

}

Answer 2

我可以想到三种方法：

使用不同尺寸的不同图像，并将它们放置在以不同分辨率显示/隐藏的不同图层中
拥有一个元素（，等等），并将徽标作为该元素的背景图片，您可以在不同分辨率的背景之间切换
使用所有徽标尺寸制作单个sprited图像，并使用css background-position或使用边距和溢出属性来改变它的位置。

您也可以引用现有网站。可以在此处找到一个很好的响应式网站库：http://mediaqueri.es

坐在导航和标头顶部的徽标

2 个答案: