如何将示例页脚代码合并到我的网站?

时间:2015-09-04 21:24:13

标签: html css footer

我正在努力做我应该做的简单任务!我整个星期都被困住了!我想要做的就是在添加新内容时将页脚推到页面上。

我想实现某人给我的代码:

https://jsfiddle.net/fsbw2m2q/9/

进入此网站模板:

https://jsfiddle.net/fsbw2m2q/7/

所以我终于可以继续在我的页面上完成一些工作了。只需将其放入模板中,即可查看并了解其工作原理。我正在尝试所有内容,并且当我想要添加新内容时,页脚仍然停留在页面的中间位置而不是被按下。在经历了所有这些挫折之后,我将非常感谢这一帮助。

1 个答案:

答案 0 :(得分:1)

好吧,从这开始,这也不是一个答案,但它会帮助你指明正确的方向,如果你是新的世界上最后的东西,你应该试图找出所有这些javascript。我从页面中删除它,分离你的CSS和HTML。我还在HTML中添加了空格,以便您更好地理解它。

现在拿这个https://jsfiddle.net/DIRTY_SMITH/fsbw2m2q/12/

尝试将问题添加到其中。提出另一个问题我们会帮助你,但你需要为自己做一些事情,否则你将永远不会学习。

<body onload="">
<div class="banner logo">
<img width="537" height="71" alt="Levant Jewellery" />
<div class="navbar">
    <a href="#"><img alt="HOME" width="150" height="30" id="HOME" /></a>
    <a href="#"><img alt="JEWELLERY" width="150" height="30" id="JEWELLERY" /></a>
    <a href="#"><img alt="SERVICES" width="150" height="30" id="SERVICES" /></a>
    <a href="#"><img alt="ABOUT US" width="150" height="30" id="ABOUTUS" /></a>
    <a href="#"><img alt="CONTACT" width="150" height="30" id="CONTACT" /></a>
    <a href="#"><img alt="SHOP" width="150" height="30" id="SHOP" /></a>
</div>

<!-- TemplateBeginEditable name="page content" -->
<div class="index-banner">
    <img width="100%" height="auto" alt="Mokume-Gane" /></div>
<!-- TemplateEndEditable -->
<link rel="stylesheet" href="file:///C|/Users/-/Desktop/Levant Jewellery Website/layout.css" ... />

<div class="footer">
<div class="footer-links">
    <div class="social-media-icons">
      <div align="left">
          <div class="facebook-icon">
              <a href="http://www.facebook.com/levantjewellery">
                  <img src="http://lorempixel.com/50/50/" width="50" height="50" alt="Facebook | Levant Jewellery" />
              </a>
          </div>
      </div>
      <div class="twitter-icon">
          <a href="http://www.twitter.com/levantjewellery">
              <img src="http://lorempixel.com/50/50/" width="50" height="50" alt="Twitter" />
          </a>
      </div> 
      <div class="instagram-icon">
        <div align="left">
            <a href="http://www.instagram.com/levantjewellery">
                <img src="http://lorempixel.com/50/50/" width="50" height="50" alt="Instagram"/>
            </a>
          </div>
      </div>
    </div>

    <div class="footer-nav">
        <a href="#">HOME</a> | 
        <a href=".#">JEWELLERY</a> | 
        <a href="#">SERVICES</a> | 
        <a href="#">ABOUT US</a> | 
        <a href="#">CONTACT</a> | 
        <a href="#">SHOP</a>
    </div>
    <p>&nbsp;</p>
    <div class="copyright">© 2015 Levant Jewellery. All rights reserved.</div>
    <p align="left">&nbsp;</p>
  </div>
</div>
</body>

我添加了一些图片,以便您更好地查看布局https://jsfiddle.net/DIRTY_SMITH/fsbw2m2q/13/