Fatal编程技术网
  • html/
  • Html 转换为无表表格

Html 转换为无表表格

html css

Html 转换为无表表格,html,css,Html,Css,Tableless什么都不懂，不知道下面的代码是怎么写的 在这张桌子上，变成无桌子 谁能帮助我，我将非常感激没有检查代码，但这是非常重要的一步 <!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">

Tableless什么都不懂，不知道下面的代码是怎么写的 在这张桌子上，变成无桌子

谁能帮助我，我将非常感激没有检查代码，但这是非常重要的一步

<!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> 


布局
身体{
字体系列：Tahoma、Verdana、Arial、无衬线字体；
字体大小：11px；
颜色：#000；
保证金：0；
}
#包装纸{
背景#006699；
}
#碳纳米管包装{
背景：#005A86；
宽度：1024px；
保证金：0自动；
}
#menutopoesq{
浮动：左；
左侧填充：16px；
垫面：3件；
颜色：#FFF；
文本阴影：0px 1px 1px rgba（0,0,0,0.7）；
}
#menutopodir{
浮动：对；
右边填充：14px；
垫面：3件；
颜色：#FFF；
文本阴影：0px 1px 1px rgba（0,0,0,0.7）；
}
img.menutopodir{
垂直对齐：中间对齐；
}
#影子{
明确：两者皆有；
边框顶部：1px实心#666；
高度：6px；
背景：url（shadow.png）；
位置：固定；
宽度：100%；
左：0；
右：0；
顶部：32px；
z指数：9009；
溢出：隐藏；
过滤器：progid:DXImageTransform.Microsoft.AlphaImageLoader（src='shadow.png'，sizingMethod='scale'）；
_背景：无；
}
Início|Estabelecimentos | Consumidores | Blogs | O queé| Contato | Sugire
Olá，sejam bem vindo！|我要说的是，我要进去了
这里的关键是为作业使用正确的标记。您当前拥有的站点看起来像是在顶部显示一个列表，很可能是用于导航，因此我们将在此处使用列表：

<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>
要创建双色背景，我们可以将
背景
应用于
主体
和
顶栏

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

#topbar {
    background: url('shadow.png') repeat-x;
}
其中两个shadow.png文件都是当前背景的1px×45px切片。在中间放置代码< > TopBar < /代码>，我们给它一个宽度，使用<代码>空白：0个自动< /代码>。填充也用于将内容定位到正确的位置，并应用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
元素上的边框

您可以在此处看到完成的结果：

您尝试过吗？首先尝试一下，在网上搜索正常的方法，等等。向我们展示你所尝试的-它可以帮助我们帮助你。给它一个机会，即使它在dreamweaver中。当你被困在一个问题后——这就是你学习的方式。 
#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;
}