Fatal编程技术网
  • html/
  • Html CSS专栏问题

Html CSS专栏问题

html css

Html CSS专栏问题,html,css,Html,Css,我正在尝试制作一个基本的网页，因为我刚刚开始用HTML和CSS编码，出现了一些问题 我正在做一个带有页眉、3列和页脚的基本网页。除了第三栏，一切都很好：它在第一栏，我甚至不知道如何修复它 HTML内容： 下面是我的CSS资料： 您的html如下所示： <div id="wrapper"></div> <div id="headerdiv"></div> <div id="content-wrapper">

我正在尝试制作一个基本的网页，因为我刚刚开始用HTML和CSS编码，出现了一些问题

我正在做一个带有页眉、3列和页脚的基本网页。除了第三栏，一切都很好：它在第一栏，我甚至不知道如何修复它

HTML内容：

下面是我的CSS资料：

您的html如下所示：

<div id="wrapper"></div>
    <div id="headerdiv"></div>
    <div id="content-wrapper">
        <div id="content-column"></div>
    </div>
    <div id="left-column"></div>
    <div id="right-column"></div>
    <div id="footer"></div>
</div>
你应该像这样组织它：

<div id="wrapper"></div>
    <div id="headerdiv"></div>
    <div id="content-wrapper">
        <div id="left-column"></div>
        <div id="content-column"></div>
        <div id="right-column"></div>
    </div>
    <div id="footer"></div>
</div>
以下内容需要您注意：

  • 内容包装器中不包含右列和左列
  • 在内容包装器div中移动左列后，会强制左列留太多边距

  • 您没有将内容列的宽度放在中间

  • 左右列不需要您的边距

  • 右列应该是右浮动，而不是左浮动

以下是更新的更改： *注意：很抱歉，样式不在单独的样式表中：

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<style>
/* CSS Document */

body{
        margin:0;
        padding:0;
        line-height: 1.3em;
}

#wrapper{
        width: 1120px;
        margin: 0 auto;
}

#headerdiv{
        background: #000;
        height: 90px;
}

#headerdiv h1{
        margin: 0;
        padding-top: 15px;
        color: #C30;
}

#content-wrapper{
        float: left;
        width: 100%;
}

#content-column{
        padding: 10px 5px;
        margin: 0 auto;
        width: 600px;
        border: 1px solid #DDDDDD;
        -moz-box-shadow: 1px 1px 1px #D4D4D4;
        -webkit-box-shadow: 0px -0.9px 5px #D4D4D4;
}

#left-column{
        padding: 10px 5px;
        float: left;
        width: 235px;
       margin: 0;
        background: #FFF;
}

#right-column{
        padding: 10px 5px;
        float: right;
        width: 235px;
        margin-left: 0;
        background: #FFF;
}

#footer{
        clear: left;
        width: 100%;
        background: black;
        color: #FFF;
        text-align: center;
        padding: 4px 0;
}

#footer a{
        color: #FFFF80;
}

.sidediv{
        margin: 10px;
        margin-top: 0;
}
</style>
</head>
<body>
<div id="wrapper">

<div id="headerdiv"><div class="sidediv"><h1>Um logo qualquer por aí</h1></div></div>

<div id="content-wrapper">
<div id="left-column">
<div class="sidediv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div>

</div>
<div id="right-column">
<div class="sidediv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div>
</div>
<div id="content-column">
<div class="sidediv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div>
</div>

</div>





<div id="footer">Oi, eu sou um footer! :D</div>

</div>
</body>
</html>


睾丸
/*CSS文档*/
身体{
保证金：0；
填充：0；
线高：1.3em；
}
#包装纸{
宽度：1120px；
保证金：0自动；
}
#海德尔迪夫{
背景：#000；
高度：90px；
}
#头颅静脉曲张{
保证金：0；
填充顶部：15px；
颜色：#C30；
}
#内容包装器{
浮动：左；
宽度：100%；
}
#内容栏{
填充：10px 5px；
保证金：0自动；
宽度：600px；
边框：1px实心#DDDDDD；
-莫兹盒阴影：1px 1px 1px#d4；
-网络工具包盒阴影：0px-0.9px 5px#d4；
}
#左列{
填充：10px 5px；
浮动：左；
宽度：235px；
保证金：0；
背景：#FFF；
}
#右栏{
填充：10px 5px；
浮动：对；
宽度：235px；
左边距：0；
背景：#FFF；
}
#页脚{
清除：左；
宽度：100%；
背景：黑色；
颜色：#FFF；
文本对齐：居中；
填充：4px0；
}
#页脚a{
颜色：#FFFF80；
}
塞迪夫先生{
利润率：10px；
边际上限：0；
}
Um徽标qualquer por aí
Lorem ipsum dolor sit amet，是一位杰出的领导者。调味品。阿利奎姆·诺努米拍卖人马萨。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。risus的Nulla。魁斯克·普卢斯·麦格纳、拍卖人等、萨吉提斯·ac、波苏尔·尤尔、莱克图斯。Nam mattis，felis和Adipising。
Lorem ipsum dolor sit amet，是一位杰出的领导者。调味品。阿利奎姆·诺努米拍卖人马萨。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。risus的Nulla。魁斯克·普卢斯·麦格纳、拍卖人等、萨吉提斯·ac、波苏尔·尤尔、莱克图斯。Nam mattis，felis和Adipising。
Lorem ipsum dolor sit amet，是一位杰出的领导者。调味品。阿利奎姆·诺努米拍卖人马萨。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。risus的Nulla。魁斯克·普卢斯·麦格纳、拍卖人等、萨吉提斯·ac、波苏尔·尤尔、莱克图斯。Nam mattis，felis和Adipising。
哎，欧苏嗯！页脚！：D
您听说过：jsfiddle.net吗？请在问题本身中添加相关代码。如果可以的话，做一个决定。