包装不工作？

时间：2016-02-25 03:44:29

标签： html css web wrapper

我正在尝试编写我的投资组合页面。似乎每次我做一个包装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 &copy; 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 个答案:

答案 0 :(得分：0)

我经历过并略微修改了你的结构。您使用的是TABLE标记，表格实际上只应用于表格数据，而不能用于布局。我已对此进行了修改，因此现在使用的是DIV。我对您的HTML和CSS进行了以下更改 -

  • 我在“content_box”中给出了第一个DIV样式“width：600px;”。
  • 我已将您的页脚移动到您的“内容”区域并删除了“position：relative;”因为这不是必需的。
  • 我还删除了“top：800px”，否则它会将结果从结果的顶部移开。相反，我现在在你的“content_text”类中添加了一个“min-height：800px”，这样当只有少量内容时，页脚就不在你的内容旁边。如果要将其向上移动，可以减小此大小。
  • 你和LI标签没有UL父母的错误，我也解决了这个问题。

希望它能实现你所追求的目标。 ：）

修改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 &copy; 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;
}

答案 1 :(得分：0)

错误在您的HTML代码中。请检查所有开头标签是否有各自的结束标签。

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<!--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 &copy; Crescent Moon Designs 2016
  </div>

</div>
<!--Ends Wrapper-->
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你的包装应该居中，里面的所有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％的内容。 这不是最好的方法。你应该使用像Bootstrap这样的框架。 如果您想构建自己的HTML / CSS，那么首先通过响应式设计和网格结构进行搜索。

答案 3 :(得分：0)

使用以下修改代码::

这是你的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 &copy; 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;
}

这是工作守则。

相关问题
最新问题