學習HTML和CSS-背景、專案定位和移動設備視圖方面的問題-有解無憂

在學習了大約 2 天后，我開始嘗試撰寫我的第一個網站……并且遇到了一些問題（不可避免）：

從手機查看頁面時，所有內容都被移到了位置上
我可以在實時服務器上完全正常地看到主螢屏，但是在匯入檔案以托管網站后，背景沒有出現
放大/縮小頁面元素時四處移動

任何幫助或建議將不勝感激，在此先感謝您！

我上傳主頁的相關網站是：http : //btbco.co.uk/

我在 index.html 和 style.css 檔案（在 Visual Studio Code 中）中編碼的內容復制如下：

（請記住，我是初學者，我的術語和知識非常有限）

html {
  margin: 0;
  padding: 0;
  height: 100%;
}
img.logo {
  max-width: 31rem;
  position: absolute;
  left: 85rem;
  margin: 0 auto;
}
h1.hometitle {
  color: rgba(255, 0, 0, 0);
}

footer {
  color: white;
  position: absolute;
  bottom: 0%;
  width: 99%;
  text-align: center;
  background: black;
  margin: 0 auto;
}

ul.home-list {
  list-style: none;
  position: absolute;
  top: 21rem;
  left: 88rem;
  color: white;
  width: 25rem;
}

li.homenav {
  color: #ffbd59;
  font-size: 3rem;
  text-decoration: underline;
  text-decoration-color: #000000;
  background-color: black;
  border: groove;
  padding-top: 0.1px;
  max-width: 25rem;
  position: static;
}

body {
  background-image: url(/Images/Home\ page.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: hidden;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/Images/Browser logo.png" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="robots" content="index,follow" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0," />
    <meta
      name="keywords"
      content="burgers, beef burgers, halal, halal burgers, food, halal food"
    />
    <meta
      name="description"
      content="The new home of fresh juicy burgers. We use halal 100% pure beef in our patties."
    />
    <link rel="stylesheet" href="styles.css">
    <title>Bun The Burger | The new home of fresh juicy beef burgers</title>
      </head>
  <div class="logo"> 
  
  </div>
    <h1 class="hometitle">
      <em>Bun The Burger &copy;</em>
    </h1>
    <!-- Logo-->
    <a href="http://buntheburger.co.uk">
      <img class="logo" src="images/LOGO.png" alt="Bun The Burgers Logo" />
    </a>
    <!--Navigation Menu-->
    <div class="Navigation"> <nav> 
      
        <ul class="home-list">
          <a href="http://menu.buntheburger.co.uk"><li class="homenav">Menu</li></a>
          <a href="http://order.buntheburger.co.uk"><li class="homenav">Order</li></a>
          <a href="http://aboutus.buntheburger.co.uk"><li class="homenav">About Us</li></a>
          <a href="http://testimonials.buntheburger.co.uk"><li class="homenav">Testimonials</li></a>
          <a href="http://contactus.buntheburger.co.uk"> <li class="homenav">Contact Us</li></a>
        
    </nav>
  </div>
    <!--Footer-->
    <footer>
      <p>   2022 Bun The Burger ? &#x2013; All Rights Reserved</p>
      <p> Home &#8226; Menu &#8226; Order &#8226; About Us &#8226; Contact Us &#8226; Privacy Policy &#8226; Terms and Conditions</p>
    </footer>
  </body>
</html>

uj5u.com熱心網友回復：

我調整了您的網站background-positioning，同時，在嘗試使您的網站具有回應性時，我建議的最重要的事情是盡可能遠離絕對定位。例如，在您的ul和logo您擁有left: 88rem. 88rem在所有媒體設備上都會有所不同，因此在移動設備（較小的螢屏）上，它將完全脫離螢屏并導致 x 軸溢位。我洗掉了絕對定位并添加了一個，container以便我可以在您的內容上使用 flexbox。您的內容現在可以回應，沒有任何 x 軸溢位。我還調整了您的頁腳，使其為所有設備的 100% 寬度。

此外，您有一些錯誤，稍后會導致語意問題。你沒有開始body標簽，你忘記關閉你的無序串列ul。確保將來盡可能避免這些錯誤，因為如果它們存在，它們將不會準確地影響實時前端，這可能會導致不必要的 CSS。但是，這應該讓您開始進行回應式構建。

另外，我建議使用一個好的 IDE 編輯器來正確格式化您的代碼，這樣可以大大減少這些語意錯誤。對于初學者，我會推薦VS code。

html {
  margin: 0;
  padding: 0;
  height: 100%;
}

img.logo {
  max-width: 31rem;
  position: absolute;
  right: 0;
  margin: 0 auto;
}

h1.hometitle {
  color: rgba(255, 0, 0, 0);
}

footer {
  color: white;
  position: absolute;
  bottom: 0%;
  width: 100vw;
  text-align: center;
  background: black;
  margin: 0 auto;
}

ul.home-list {
  list-style: none;
  position: relative;
  color: white;
  width: 25rem;
}

li.homenav {
  color: #ffbd59;
  font-size: 3rem;
  text-decoration: underline;
  text-decoration-color: #000000;
  background-color: black;
  border: groove;
  padding-top: 0.1px;
  position: static;
}

body {
  background-image: url('https://dummyimage.com/1000/507c8c/fff');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}

.container {
  display: flex;
  justify-content: right;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <link rel="icon" href="/Images/Browser logo.png" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="robots" content="index,follow" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0," />
      <meta name="keywords" content="burgers, beef burgers, halal, halal burgers, food, halal food" />
      <meta name="description" content="The new home of fresh juicy burgers. We use halal 100% pure beef in our patties." />
      <link rel="stylesheet" href="styles.css">
      <title>Bun The Burger | The new home of fresh juicy beef burgers</title>
   </head>
   <body>
      <div class="container">
         <div class="logo">
            <!-- Logo-->
            <a href="http://buntheburger.co.uk">
            <img class="logo" src="images/LOGO.png" alt="Bun The Burgers Logo" />
            </a>
            <!--Navigation Menu-->
            <div class="Navigation">
               <nav>
                  <ul class="home-list">
                     <a href="http://menu.buntheburger.co.uk">
                        <li class="homenav">Menu</li>
                     </a>
                     <a href="http://order.buntheburger.co.uk">
                        <li class="homenav">Order</li>
                     </a>
                     <a href="http://aboutus.buntheburger.co.uk">
                        <li class="homenav">About Us</li>
                     </a>
                     <a href="http://testimonials.buntheburger.co.uk">
                        <li class="homenav">Testimonials</li>
                     </a>
                     <a href="http://contactus.buntheburger.co.uk">
                        <li class="homenav">Contact Us</li>
                     </a>
                  </ul>
               </nav>
            </div>
         </div>
         <h1 class="hometitle">
            <em>Bun The Burger &copy;</em>
         </h1>
      </div>
      <!--Footer-->
      <footer>
         <p> 2022 Bun The Burger ? &#x2013; All Rights Reserved</p>
         <p> Home &#8226; Menu &#8226; Order &#8226; About Us &#8226; Contact Us &#8226; Privacy Policy &#8226; Terms and Conditions</p>
      </footer>
   </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/401871.html

標籤：html css

上一篇：如何將主要元素放在標題上方和導航元素下方？

下一篇：Flexbox不換行文本