Question

无表无所不知，想知道下面的代码如何在此表中，变成无表格

http://adresende.com.br/help/layout.html

谁能帮助我，我将非常感激

Answer 1

这里的关键是为作业使用正确的标记。您当前看到的网站显示的是顶部的列表，最有可能用于导航，因此我们将在此处使用列表：

<div id="topbar">
    <ul id="leftnav">
        <li>Início</li>
        <li>Estabelecimentos</li>
        <li>Consumidores</li>
        <li>Blogs</li>
        <li>O que é</li>
        <li>Contato</li>
        <li>Sugire</li>
    </ul>

    <ul id="rightnav">
        <li>Olá, sejam bem vindo!</li>
        <li>Crie seu perfil</li>
        <li>Entrar</li>
        <li><img alt="Brazil!" src="http://adresende.com.br/help/br.png" /></li>
    </ul>
</div>

我们首先通过将两个ul浮动到每个边来创建布局，然后将li浮动到ul内以创建内联列表：

#leftnav {
    float: left;
}

#rightnav {
    float: right;
}

#topbar ul li {
    float: left;
}

要创建双色背景，我们可以将background应用于body和#topbar。

body {
    background: url('shadow_2.png') repeat-x;
}

#topbar {
    background: url('shadow.png') repeat-x;
}

其中，两个shadow.png文件都是当前背景的1px x 45像素切片。要将#topbar放在中间位置，我们会给它一个宽度并使用margin: 0 auto。还应用填充以将内容定位到正确的位置，并应用clearfix以防止其崩溃：

#topbar {
    padding: 8px 10px 20px;
    width: 956px;
    margin: 0 auto;
    overflow: hidden;
}

然后我们在#topbar规则集中应用文本样式 - 颜色，字体大小，文本阴影等：

#topbar {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 11px;
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}

最后我们添加一个边框，而不是使用竖线字符：

#topbar ul li {
    padding: 0 10px;
    border-left: 1px solid;
    padding: 0 7px 2px;
    line-height: 0.8em;
}

#topbar ul li:first-child {
    border: 0;
}

:first-child规则用于删除最左侧li元素的边框。

您可以在此处查看完成的结果：http://jsfiddle.net/yijiang/BWYGX/embedded/result,html,css

Answer 2

没有检查代码，但这还有很长的路要走......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Layout</title>
    <style media="all" type="text/css">
        body {
            font-family: Tahoma, Verdana, Arial, sans-serif;
            font-size: 11px;
            color: #000;
            margin: 0;
        }

        #wrapper{
            background:#006699;
        }

        #cntwrapper{
            background:#005A86;
            width:1024px;
            margin:0 auto;
        }

        #menutopoesq {
            float: left;
            padding-left:16px;
            padding-top:3px;
            color: #FFF;
            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
        }

        #menutopodir {
            float: right;
            padding-right:14px;
            padding-top:3px;
            color: #FFF;
            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
        }

        img.menutopodir {
            vertical-align: middle;
        }

        #shadow {
            clear:both;
            border-top:1px solid #666;
            height:6px;
            background:url(shadow.png);
            position:fixed;
            width:100%;
            left:0;
            right:0;
            top:32px;
            z-index:9009;
            overflow:hidden;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='shadow.png', sizingMethod='scale');
            _background:none;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="cntwrapper">
        <div id="menutopoesq">
            Início &nbsp; | &nbsp; Estabelecimentos &nbsp; | &nbsp; Consumidores &nbsp; | &nbsp; Blogs &nbsp; | &nbsp; O que é &nbsp; | &nbsp; Contato &nbsp; | &nbsp; Sugire
        </div>

        <div id="menutopodir">
            Olá, sejam bem vindo! &nbsp; | &nbsp; Crie seu perfil &nbsp; | &nbsp; Entrar &nbsp; | &nbsp; <img src="br.png" class="menutopodir" />
        </div>
    </div>
    <div id="shadow"></div>
</div>
</body>
</html>

转换为无表格表

2 个答案: