包装器不工作？
[英]Wrapper not working?
问题描述
我正在尝试对我的投资组合页面进行编码。 好像每次我做一个包装div。 并将所有内容（包括内容，页脚和侧边栏）放入包装器中，以使页脚似乎仍不会始终停留在页面底部。 当我添加更多内容时，它会超出页脚。 页脚不停留在底部。 因此，如果有人可以帮助我，则需要修复这些问题。
这是html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Crescent Moon Designs ~ Coming Soon!</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Begins Wrapper-->
<div id="wrapper">
<!--Begina Header--><div id="header"></div><!--Ends Header-->
<div id="menu_top">
<div id="menu_top1">
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Home</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">About</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Portfolio</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Tutorials</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Contact</a></li>
</div>
</div>
<!--Starts Sidebar-->
<div id="sidebarleft">
<table border="0" cellpadding="0" cellspacing="0" width="200px"style="border-bottom: 1px solid #000000;">
<tr>
<td valign="top" class="side_title">
Sidebar Title
<img border="0" src="images/sideheader1.png" align="left">
</td>
</tr>
<td id="sidetext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu.
Vestibulum eu porttitor mauris. Praesent sed malesuada dui.
Nunc nulla libero, ultricies eget elit fermentum, rutrum dignissim dui.
</td>
</table>
</div>
<!--Ends Sidebar-->
<!--Starts Content-->
<div id="content_box">
<table border="0" cellpadding="0" cellspacing="0" width="600px" style="border-bottom: 1px solid #000000;">
<tr>
<td valign="top" class="content_title">
Content Title
<img border="0" src="images/titleheader1.png" align="left"></td>
</tr>
<td class="content_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu.
Vestibulum eu porttitor mauris. Praesent sed malesuada dui.
Nunc nulla libero, ultricies eget elit fermentum, rutrum dignissim dui.
</td>
</tr>
</table>
</div>
<!--Ends Content-->
<div id="footer">
All Rights Reserved © Crescent Moon Designs 2016
</div>
</div><!--Ends Wrapper-->
</body>
</html>
这是CSS：
@charset "utf-8";
body {
background-image: url('images/mainbg.jpg');
background-repeat: fixed;
background-color: #ffffff;
margin-top: 10px;
}
#wrapper {
margin-left: 240px;
clear: both;
}
#header {
background: url('images/cmdblack.png');
height: 250px;
width: 800px;
}
#footer {
margin: auto 0;
clear: both;
position: relative;
top: 800px;
}
#sidebarleft {
position: absolute;
left: 229px;
top: 334px;
}
.side_title {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #000000;
text-align: center;
letter-spacing: 2px;
}
#sidetext {
background-color: #fff;
font-family: verdana, arial, serif;
font-size: 11px;
color: #494949;
padding: 8px;
}
.content_title {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #000000;
text-align: center;
letter-spacing: 2px;
}
#content_box {
position: absolute;
left: 555px;
top: 334px;
}
.content_text {
background-color: #fff;
font-family: verdana, arial, serif;
font-size: 11px;
color: #494949;
padding: 18px;
}
#menu_top {
position: absolute;
left: 273px;
top: 260px;
border-bottom: 1px solid #000000;
}
#menu_top1 li {
display: inline;
padding: 8px;
padding-top: 0;
}
li a {
font-family: sans-serif;
font-size: 25px;
font-weight: lighter;
font-style: normal;
text-decoration: none;
color: #000000;
padding: 10px;
}
li a:hover {
font-family: sans-serif;
font-size: 25px;
font-weight: lighter;
font-style: italic;
text-decoration: none;
color: #3D3D3D;
border-radius: 9px;
padding: 10px;
}
.listimg {
padding-right: 7px;
}
4 个解决方案
解决方案1
0 2016-02-25 04:12:02
我已经仔细研究过并稍加修改了您的结构。 您使用的是TABLE标记，表实际上仅应用于表格数据，而不用于布局。 我已对此进行了修改，因此现在改为使用DIV。 我对您的HTML和CSS进行了以下更改-
- 我已将“ content_box”中的第一个DIV设置为“ width：600px;”。
- 我已将页脚移到“内容”区域，并删除了“ position：relative;”。 因为这不是必需的。
- 我还删除了“ top：800px”，否则它将距离结果顶部很远。 相反，我现在在您的“ content_text”类上添加了“最小高度：800像素”，以便在只有少量内容时，页脚就不在您的内容旁边。 如果要在页面上向上移动，可以减小此大小。
- 您和没有UL父级的LI标签存在错误，我也已解决此问题。
希望它能实现您想要的。 :)
修改后的HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Crescent Moon Designs ~ Coming Soon!</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Begins Wrapper-->
<div id="wrapper">
<!--Begina Header--><div id="header"></div><!--Ends Header-->
<div id="menu_top">
<div id="menu_top1">
<ul>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Home</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">About</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Portfolio</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Tutorials</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Contact</a></li>
</ul>
</div>
</div>
<!--Starts Sidebar-->
<div id="sidebarleft">
<table border="0" cellpadding="0" cellspacing="0" width="200px" style="border-bottom: 1px solid #000000;">
<tr>
<td valign="top" class="side_title">
Sidebar Title
<img border="0" src="images/sideheader1.png" align="left">
</td>
</tr>
<td id="sidetext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu.
Vestibulum eu porttitor mauris. Praesent sed malesuada dui.
Nunc nulla libero, ultricies eget elit fermentum, rutrum dignissim dui.
</td>
</table>
</div>
<!--Ends Sidebar-->
<!--Starts Content-->
<div id="content_box">
<div style="border-bottom: 1px solid #000000; width: 600px;">
<div valign="top" class="content_title">
Content Title
<img border="0" src="images/titleheader1.png" align="left">
</div>
<div class="content_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum turpis fermentum ante pharetra aliquam. Duis fringilla sit amet nibh quis ornare. Duis vulputate libero sit amet convallis posuere. Ut iaculis bibendum purus sit amet commodo. Vivamus sit amet posuere nisi. Donec hendrerit congue urna, quis semper nisi ultrices vitae. Proin porta mauris eget turpis sollicitudin, non mattis metus finibus. Sed rhoncus, dolor sit amet interdum posuere, metus neque placerat tellus, nec bibendum elit ante at diam. Aenean eget sodales dolor. Curabitur posuere euismod erat, pharetra venenatis nibh scelerisque eu. Cras rhoncus augue fermentum est interdum egestas. Donec a diam eros.
</div>
</div>
<div id="footer">
All Rights Reserved © Crescent Moon Designs 2016
</div>
</div>
<!--Ends Content-->
</div>
<!--Ends Wrapper-->
</body>
</html>
修改后的CSS：
@charset "utf-8";
body {
background-image: url('images/mainbg.jpg');
background-repeat: fixed;
background-color: #ffffff;
margin-top: 10px;
}
#wrapper {
margin-left: 240px;
clear: both;
}
#header {
background: url('images/cmdblack.png');
height: 250px;
width: 800px;
}
#footer {
margin: auto 0;
clear: both;
}
#sidebarleft {
position: absolute;
left: 229px;
top: 334px;
}
.side_title {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #000000;
text-align: center;
letter-spacing: 2px;
}
#sidetext {
background-color: #fff;
font-family: verdana, arial, serif;
font-size: 11px;
color: #494949;
padding: 8px;
}
.content_title {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #000000;
text-align: center;
letter-spacing: 2px;
}
#content_box {
position: absolute;
left: 555px;
top: 334px;
}
.content_text {
background-color: #fff;
font-family: verdana, arial, serif;
font-size: 11px;
color: #494949;
padding: 18px;
min-height: 800px;
}
#menu_top {
position: absolute;
left: 273px;
top: 260px;
border-bottom: 1px solid #000000;
}
#menu_top1 li {
display: inline;
padding: 8px;
padding-top: 0;
}
li a {
font-family: sans-serif;
font-size: 25px;
font-weight: lighter;
font-style: normal;
text-decoration: none;
color: #000000;
padding: 10px;
}
li a:hover {
font-family: sans-serif;
font-size: 25px;
font-weight: lighter;
font-style: italic;
text-decoration: none;
color: #3D3D3D;
border-radius: 9px;
padding: 10px;
}
.listimg {
padding-right: 7px;
}
解决方案2
0 2016-02-25 04:13:35
HTML代码内部有错误。 请检查所有开始标签在预期位置是否具有其各自的结束标签。
@charset "utf-8"; body { background-image: url('images/mainbg.jpg'); background-repeat: fixed; background-color: #ffffff; margin-top: 10px; } #wrapper { margin-left: 240px; clear: both; } #header { background: url('images/cmdblack.png'); height: 250px; width: 800px; } #footer { margin-top: 20px; background: #eee; margin: auto 0; clear: both; position: relative; top: 800px; } #sidebarleft { position: absolute; left: 229px; top: 334px; } .side_title { font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; font-size: 14px; font-style: italic; font-weight: bold; color: #000000; text-align: center; letter-spacing: 2px; } #sidetext { background-color: #fff; font-family: verdana, arial, serif; font-size: 11px; color: #494949; padding: 8px; } .content_title { font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; font-size: 14px; font-style: italic; font-weight: bold; color: #000000; text-align: center; letter-spacing: 2px; } #content_box { position: absolute; left: 555px; top: 334px; } .content_text { background-color: #fff; font-family: verdana, arial, serif; font-size: 11px; color: #494949; padding: 18px; } #menu_top { position: absolute; left: 273px; top: 260px; border-bottom: 1px solid #000000; } #menu_top1 li { display: inline; padding: 8px; padding-top: 0; } li a { font-family: sans-serif; font-size: 25px; font-weight: lighter; font-style: normal; text-decoration: none; color: #000000; padding: 10px; } li a:hover { font-family: sans-serif; font-size: 25px; font-weight: lighter; font-style: italic; text-decoration: none; color: #3D3D3D; border-radius: 9px; padding: 10px; } .listimg { padding-right: 7px; }
<!--Begins Wrapper--> <div id="wrapper"> <!--Begina Header--> <div id="header"></div> <!--Ends Header--> <div id="menu_top"> <div id="menu_top1"> <li> <img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Home</a> </li> <li> <img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">About</a> </li> <li> <img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Portfolio</a> </li> <li> <img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Tutorials</a> </li> <li> <img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Contact</a> </li> </div> </div> <!--Starts Sidebar--> <div id="sidebarleft"> <table border="0" cellpadding="0" cellspacing="0" width="200px" style="border-bottom: 1px solid #000000;"> <tr> <td valign="top" class="side_title"> Sidebar Title <img border="0" src="images/sideheader1.png" align="left"> </td> </tr> <tr> <td id="sidetext"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent sed malesuada dui. Nunc nulla libero, ultricies eget elit fermentum, rutrum dignissim dui. </td> </tr> </table> </div> <!--Ends Sidebar--> <!--Starts Content--> <div id="content_box"> <table border="0" cellpadding="0" cellspacing="0" width="600px" style="border-bottom: 1px solid #000000;"> <tr> <td valign="top" class="content_title"> Content Title <img border="0" src="images/titleheader1.png" align="left"> </td> </tr> <tr> <td class="content_text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent sed malesuada dui. Nunc nulla libero, ultricies eget elit fermentum, r Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent sed malesuada dui. Nunc nulla libero, ultricies eget elit fermentum, r Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent sed malesuada dui. Nunc nulla libero, ultricies eget elit fermentum, r Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent sed malesuada dui. Nunc nulla libero, ultricies eget elit fermentum, r Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent sed malesuada dui. Nunc nulla libero, ultricies eget elit fermentum, r Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent sed malesuada dui. Nunc nulla libero, ultricies eget elit fermentum, r Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent sed malesuada dui. Nunc nulla libero, ultricies eget elit fermentum, rutrum dignissim dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent sed malesuada dui. Nunc nulla libero, ultricies eget elit fermentum, rutrum dignissim dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent sed malesuada dui. Nunc nulla libero, ultricies eget elit fermentum, rutrum dignissim dui.utrum dignissim dui. </td> </tr> </table> </div> <!--Ends Content--> <div id="footer"> All Rights Reserved © Crescent Moon Designs 2016 </div> </div> <!--Ends Wrapper-->
解决方案3
0 2016-02-25 04:14:40
包装器应居中，并且所有div均应相对放置并浮动。
您可以执行以下操作：
#wrapper {
position: absolute;
width: 60%; /*you can set the width in px too*/
left: 50%;
top: 20px;
margin: 0 0 0 -30%; /*this will make the div go left half of its width*/
}
#menu_top {
position: relative;
width:100%;
float:left;
background: #0f0;
}
#footer {
position: relative;
width:100%;
float:left;
background: #00f;
}
然后对所有其他div执行相同的操作。 边栏可以是20％或30％的div，含量可以是80％或70％的div。 这不是最好的方法。 您应该使用类似Bootstrap的框架。 如果您想构建自己的HTML / CSS，请首先通过响应式设计和网格结构进行搜索。
解决方案4
0 2016-02-25 04:30:36
使用以下修改的代码::
这是您的HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Crescent Moon Designs ~ Coming Soon!</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Begins Wrapper-->
<div id="wrapper">
<!--Begina Header--><div id="header"></div><!--Ends Header-->
<div id="menu_top">
<div id="menu_top1">
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Home</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">About</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Portfolio</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Tutorials</a></li>
<li><img src="images/moonlisticon.png" class="listimg"><a href="" target="_self">Contact</a></li>
</div>
</div>
<!--Starts Sidebar-->
<div id="sidebarleft">
<table border="0" cellpadding="0" cellspacing="0" width="200px"style="border-bottom: 1px solid #000000;">
<tr>
<td valign="top" class="side_title">
Sidebar Title
<img border="0" src="images/sideheader1.png" align="left">
</td>
</tr>
<td id="sidetext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, enenatisvel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu.Vestibulum eu porttitor mauris. Praesent sed malesuada dui. Nuncnulla libero, ultricies eget elit fermentum, rutrum dignissim dui.
</td>
</table>
</div>
<!--Ends Sidebar-->
<!--Starts Content-->
<div id="content_box">
<table border="0" cellpadding="0" cellspacing="0" width="600px" style="border-bottom: 1px solid #000000;">
<tr>
<td valign="top" class="content_title">
Content Title
<img border="0" src="images/titleheader1.png" align="left"></td>
</tr>
<td class="content_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus,venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu.Vestibulum eu porttitor mauris. Praesent sed malesuada dui. Nunc nulla libero, ultricies eget elit fermentum, rutrum dignissim dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis,aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitormauris. Praesent sed malesuada dui. Nunc nulla libero, ultricieseget elit fermentum, rutrum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent sed malesuada dui. Nunc nulla libero, ultricies eget elit fermentum, rutrum dignissim dui.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et interdum tortor. Nullam eu justo ipsum. Praesent ligula metus, venenatis vel imperdiet quis, aliquet nec lorem. Suspendisse ut elit arcu. Vestibulum eu porttitor mauris. Praesent sed malesuada dui. Nunc nulla libero, ultricies eget elit fermentum, rutrum dignissim dui.
</td>
</tr>
</table>
</div>
<!--Ends Content-->
</div><!--Ends Wrapper-->
<div id="footer">All Rights Reserved © Crescent Moon Designs 2016</div>
</body>
</html>
并使用以下CSS ：：
@charset "utf-8";
body {
background-image: url('images/mainbg.jpg');
background-repeat: fixed;
background-color: #ffffff;
margin-top: 10px;
}
#wrapper {
float: left;
width: 100%;
}
#header {
background: url('images/cmdblack.png');
}
#footer {
clear: both;
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
left: 0;
padding: 20px 0;
}
#sidebarleft {
float: left;
width: 25%;
}
.side_title {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #000000;
text-align: center;
letter-spacing: 2px;
}
#sidetext {
background-color: #fff;
font-family: verdana, arial, serif;
font-size: 11px;
color: #494949;
padding: 18px;
}
.content_title {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #000000;
text-align: center;
letter-spacing: 2px;
}
#content_box {
float: left;
width: 75%;
}
.content_text {
background-color: #fff;
font-family: verdana, arial, serif;
font-size: 11px;
color: #494949;
padding: 18px;
}
#menu_top {
text-align: center;
border-bottom: 1px solid #000000;
padding: 20px;
margin-bottom: 30px;
}
#menu_top1 li {
display: inline;
padding: 8px;
padding-top: 0;
}
li a {
font-family: sans-serif;
font-size: 25px;
font-weight: lighter;
font-style: normal;
text-decoration: none;
color: #000000;
padding: 10px;
}
li a:hover {
font-family: sans-serif;
font-size: 25px;
font-weight: lighter;
font-style: italic;
text-decoration: none;
color: #3D3D3D;
border-radius: 9px;
padding: 10px;
}
.listimg {
padding-right: 7px;
}
这是工作代码。
背景颜色在包装器中不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.