Question

我是编程网站的初学者，并且知道一些关于HTML和CSS的工作原理但不了解jquery和javascript等。我已经设法创建了一个网站并发布了它。它并没有完全完成，但几乎每一台计算机上都可以正常工作，但在其他设备（手机）上，我的页脚是完整的caos并且不按我想要的方式工作。我该如何解决这个问题？

这是索引：

    <div class="längstned3">

    <img src="images/blånere.jpg" style="width:100%; height:300px;">

    <div class="neretext">
    <p><font color="#A4A4A4" size="2">Bonusprofit.se är en oberoende webbsida som jämför olika spelbolag och deras utbud av olika oddsbonusar. Vi har inte särskilda knutningar till någon/några specifika spelbolag och meningen med vår sida är att du som besökare med hjälp utav oss ska kunna se, jämföra och till sist välja den/de bonusar som passar just dig. Vid frågor eller synpunkter är du alltid välkommen att <a href="kontakt.html" class="kontaktaoss">kontakta oss</a> via mail eller sociala medier.</font></p>
    </div>

    <footer>


    <font size="2" color="#A4A4A4">Spela inte om du är under 18.</font>
    </footer>

    <div class="fbtw"><p><font color="#BDBDBD" size="3">Sociala medier</font></p><hr><font size="2"><p><a class="twfärg" href="www.twitter.se"><u>Twitter</u></a></p><hr><p><a class="fbfärg" href="www.facebook.se"><u>Facebook</u></a></p></font><hr></div>

    <div class="ansvarsfulltspelande"><p><font size="2" color="#A4A4A4">Vi stödjer ansvarsfullt spelande</font></p></div><div class="längstned1"><p> <font color="#BDBDBD">Copyright © 2017. Alla rättigheter reserverade. <a href="index.html" target="_blank" class="länknere">Bonusprofit.se </a></font></p></div><div align="center" class="längstned2"><a class="stödlinjen" target="blank" href="https://www.stodlinjen.se/#!/" ><abbr title="besök stödlinjens hemsida"><p><font size="4"><b>18+</b></font></p></abbr></a></div>

这是css：

    .längstned1 { position: absolute;
bottom: 20px;
left: 790px;}

    .längstned2 { position: absolute;
bottom: 245px;
right: 900px;
 line-height:40px;
 width:40px;
 height:40px;
 border-style:solid;
 border-width:1px;
 border-color:#A4A4A4;
 border-radius:50%;

 background-color:#A4A4A4;}



   .längstned3 {

  position:relative;
   margin-top: 1600px;}

    .twitter { 
  bottom: 10px;
   right: 60px;
   position:absolute;
   border-style: solid;
    border-width: 1px;
   border-color: white;
 border-radius: 50%;
 background-color: white;}

    .stödlinjen { text-decoration: none !important; color:black;}



    .twitter:hover { -moz-box-shadow: 0 0 10px #4d4d4d;
    -webkit-box-shadow: 0 0 10px #4d4d4d;
    box-shadow: 0 0 10px #ccc;
            opacity: 0.99;}

    .facebook { background-color:#045FB4;
     display:block;
     float: right;
     width: 55px;
     height: 55px;
     margin-top: -57px;
      margin-right: 120px;
     border-style: solid;
     border-width: 1px;
     border-color: white;
     border-radius: 50%;
   font-style: arial;
    line-height: 55px;}

    .facebook:hover {-moz-box-shadow: 0 0 15px #4d4d4d;
    -webkit-box-shadow: 0 0 15px #4d4d4d;
    box-shadow: 0 0 15px #ccc;
            opacity: 0.99;}

    .ansvarsfulltspelande {position: absolute;
     bottom: 255px;
      right: 960px; }

    .länknere { color: white;}

    .twfärg { color: white; }
    .fbfärg { color: white;}
   .kontaktaoss {color:#D8D8D8;}

   .neretext { 
    width: 500px;
    position: absolute;
     bottom: 100px;
      left: 30px;}

    .fbtw { position: absolute;
     bottom: 100px;
       right: 150px;}

    .footer {


    color: black;
    position: absolute;
      bottom: 253px;
      right:710px;


     font-size: 16px;
    font-family: Helvetica, Arial, sans-serif;
  font-variant: caps;
    font-weight: normal;

    z-index: 5;}

Answer 1

你能创建一个JSFiddle吗？ HTML5 w3 font tag中不支持页脚中的字体元素，使用css类和ID或内联样式属性 (<p style="color:blue">text<p>)。

组织页脚内的两个div可以进入页脚内部。

<footer>// acts like a container div for the end of your page
  <div>  //These divs organize space inside of your footer.
  </div>
  <div>
  </div>
</footer

如何使我的页脚在其他设备上与在计算机上看起来相同？

1 个答案: