小贝子编程

通过HTML和CSS响应网页



随着更改屏幕的大小，标题的内容和页脚不随屏幕移动。

首先，我认为图像的CSS我无法修复它们。

其次，尽管我将其宽度宽度并进行自动化，但标题不会遵循屏幕。

第三，页脚及其内容也有同样的故事。如果有人可以帮助我修复这些错误，我真的很感谢。

body {
  background-color: #333333;
}
#Container {
  width: 1100px;
  height: auto;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}
#Header {
  border: 10px solid black;
  background-color: #000000;
  height: 100px;
}
#Logo {
  position: relative;
  left: 20px;
  top: 4px;
}
#HomeLogo {
  position: absolute;
  left: 650px;
  top: 30px;
}
#MainMenu {
  color: white;
  position: absolute;
  left: 900px;
  top: 50px;
}
#MainMenu a {
  display: inline;
  font-size: 20px;
  color: white;
  padding: 14px 13px;
  text-decoration: none;
  outline: none;
}
#MainMenu a:hover {
  background-color: #b404ae;
}
#ClickableButton {
  position: relative;
  font-size: 20px;
  color: white;
  padding: 14px 13px;
  border: none;
  background-color: transparent;
}
#ClickableButton:hover {
  background: #b404ae;
}
#DropdownContent {
  overflow: hidden;
  position: absolute;
  left: 88px;
  top: 50px;
  display: none;
  background-color: black;
}
#DropdownContent a {
  overflow: hidden;
  display: block;
  font-size: 20px;
  color: white;
  padding: 14px 13px;
  text-decoration: none;
  text-align: left;
}
#DropdownContent a:hover {
  background: #b404ae;
}
#Dropbtn:hover #DropdownContent {
  display: block;
}
#Sector {
  border: 10px solid black;
  height: 1000px;
  background-color: #eff8fb;
}
#Footer {
  border: 10px solid black;
  height: 200px;
  margin-bottom: 20px;
  background-color: #000000;
}
pre {
  margin-left: 5px;
  font-size: 15px;
  font-family: Arial, Helvettica, sans-serif;
  color: white;
}
#underline>pre:hover {
  cursor: pointer;
}
<!DOCTYPE html>
<head>
  <link rel="stylesheet" type="text/css" href="design2.css" media="screen and (min-width:0)" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>First website</title>
</head>
<body>
  <div id="Container">
    <div id="Header">
      <div id="Logo">
        <a href="http://www.manchester.ac.uk/">
          <figure>
            <img src="https://upload.wikimedia.org/wikipedia/en/7/72/UniOfManchesterLogo.svg" width="150" height="80" alt="University logo">
          </figure>
        </a>
      </div>
      <div id="HomeLogo">
        <a href="main.html">
          <figure>
            <img src="http://www.diywebsitetools.com/wp-content/uploads/2012/05/homeicon.jpg" class="img-rounded" width="120" height="70" alt="going back to the main page">
          </figure>
        </a>
      </div>
      <div id="MainMenu">
        <a href=M.html> M&S </a>
        <a href="#Health & saftely issues when working with computers"> Health&Saftely </a>
        <span id="Dropbtn">
        <button id="ClickableButton">U&C</button>
          <div id="DropdownContent">
            <a href="#1">Statistics and backgroud information</a>
            <a href="#2">Research groups / research projects</a>
            <a href="#3">Courses</a>
          </div>
       </span>
        <a href="aboutUs.html"> About us </a>
      </div>
    </div>
    <div id="Sector"></div>
    <div id="Footer">
      <pre>         Contact Us                                                                            Find Us                                                                        Copyright © 2017-2018 Group 4</pre>
      <div id="underline">
        <pre>         +44 (0) 161 306 60000                                                        The University of Manchester                                        Hossein Miraftabi
                                                                                                          Oxford Rd                                                                      Matthew Knowles
                                                                                                          Manchester                                                                    Catherine Dimitropoulaki
                                                                                                          M14 9PL                                                                        Sumera Zulfiqar
                                                                                                          UK</pre>
      </div>
    </div>
  </div>
</body>

我修改了您的HTML和CSS，并为响应创建了新的布局。

请检查一下。它一定会帮助您。

body {
  background-color: #333333;
}
#Container {
  width: 100%;
  height: auto;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}
#Header {
  border: 10px solid black;
  background-color: #000000;
  height: 100px;
}
#Logo {
    position: inherit;
    width: 50%;
    float: left;
}
#HomeLogo {
  position: inherit;
  float: right;
  width: 50%;
  text-align: right;
}
#MainMenu {
  color: white;
  position: relative;
  left: 0;
  top: -6px;
  float: left;
  width: 100%;
  background: #000;
}
#MainMenu a {
  display: inline;
  font-size: 20px;
  color: white;
  padding: 14px 13px;
  text-decoration: none;
  outline: none;
}
#MainMenu a:hover {
  background-color: #b404ae;
}
#ClickableButton {
  position: relative;
  font-size: 20px;
  color: white;
  padding: 14px 13px;
  border: none;
  background-color: transparent;
}
#ClickableButton:hover {
  background: #b404ae;
}
#DropdownContent {
  overflow: hidden;
  position: absolute;
  left: 88px;
  top: 50px;
  display: none;
  background-color: black;
}
#DropdownContent a {
  overflow: hidden;
  display: block;
  font-size: 20px;
  color: white;
  padding: 14px 13px;
  text-decoration: none;
  text-align: left;
}
#DropdownContent a:hover {
  background: #b404ae;
}
#Dropbtn:hover #DropdownContent {
  display: block;
}
#Sector {
  border: 10px solid black;
  height: 1000px;
  background-color: #eff8fb;
}
#Footer {
  border: 10px solid black;
  height: 200px;
  margin-bottom: 20px;
  background-color: #000000;
}
#Footer div{
    width: 30%;
    float: left;
    margin-left: 5px;
}
#Footer div p, #Footer div h2{
font-size: 15px;
  font-family: Arial, Helvettica, sans-serif;
  color: white;
}
pre {
  margin-left: 5px;
  font-size: 15px;
  font-family: Arial, Helvettica, sans-serif;
  color: white;
}
#underline>pre:hover {
  cursor: pointer;
}
<div id="Container">
    <div id="Header">
      <div id="Logo">
        <a href="http://www.manchester.ac.uk/">
          <figure>
            <img src="https://upload.wikimedia.org/wikipedia/en/7/72/UniOfManchesterLogo.svg" width="150" height="80" alt="University logo">
          </figure>
        </a>
      </div>
      <div id="HomeLogo">
        <a href="main.html">
          <figure>
            <img src="http://www.diywebsitetools.com/wp-content/uploads/2012/05/homeicon.jpg" class="img-rounded" width="120" height="70" alt="going back to the main page">
          </figure>
        </a>
      </div>
      <div id="MainMenu">
        <a href=M.html> M&S </a>
        <a href="#Health & saftely issues when working with computers"> Health&Saftely </a>
        <span id="Dropbtn">
        <button id="ClickableButton">U&C</button>
          <div id="DropdownContent">
            <a href="#1">Statistics and backgroud information</a>
            <a href="#2">Research groups / research projects</a>
            <a href="#3">Courses</a>
          </div>
       </span>
        <a href="aboutUs.html"> About us </a>
      </div>
    </div>
    <div id="Sector"></div>
    <div id="Footer">
    	<div class="footer-col1">
        	<h2>Contact Us</h2>
        	<p>+44 (0) 161 306 60000</p>
        </div>
        <div class="footer-col2">
        	<h2>Find Us </h2>
            <p>The University of Manchester<br/>Oxford Rd  <br/> Manchester <br/>M14 				9PL, UK </p>
        </div>
        <div class="footer-col3">
        
            <p>Copyright © 2017-2018 Group 4</p>
            <p>Hossein Miraftabi</p>
            <p> Matthew Knowles</p>
            <p>Catherine Dimitropoulaki</p>
            <p>Sumera Zulfiqar</p>
        </div>
     
    </div>
  </div>

请勿使用像素而不是使用百分比作为：字体大小，边框，宽度和高度html和身体的高度。使用DIV和其他元素的宽度和高度为VH。/p>

使用最大宽度：

#Container {
   max-width: 1100px;
   width: 100%;
   height: auto;
   margin: 20px auto 0;
}

使用元素使用固定宽度不会允许它们在窗口大小时进行扩展。

乍一看，您可以将容器宽度从width: 1100px更改为max-width: 1100px，在此，max-width将其宽度不超过1100px，并且会在窗口上重新缩放。

>

您的第二个问题是您在某些元素中使用relative或absolute定位。在这种特殊情况下，您应该坚持使用元素的margin或padding偏移。目前，您相对定位的元素已被其确切位置的中心偏移，并且不会在窗口大小的窗口大小上按预期进行扩展。这是您认为图像的CSS被打破的主要原因。绝对定位从文档流中拉出元素 - 例如将它们从原来的位置删除。

这是使用您的HTML和CSS的快速示例。

底线是，您只需要花更多的时间学习CSS定位的工作方式。

body {
  background-color: #333333;
}
#Container {
  max-width: 1100px;
  margin: 20px auto 0;
}
#Header {
  display: flex;
  justify-content: space-between;
  border: 10px solid black;
  background-color: #000000;
}
#Logo {
  margin: 4px 0 0 20px;
}
#MainMenu {
  color: white;
  width: 200px;
}
#MainMenu a {
  display: inline;
  font-size: 20px;
  color: white;
  padding: 14px 13px;
  text-decoration: none;
  outline: none;
}
#MainMenu a:hover {
  background-color: #b404ae;
}
#ClickableButton {
  position: relative;
  font-size: 20px;
  color: white;
  padding: 14px 13px;
  border: none;
  background-color: transparent;
}
#ClickableButton:hover {
  background: #b404ae;
}
#DropdownContent {
  overflow: hidden;
  position: absolute;
  right: 88px;
  top: 50px;
  display: none;
  background-color: black;
}
#DropdownContent a {
  overflow: hidden;
  display: block;
  font-size: 20px;
  color: white;
  padding: 14px 13px;
  text-decoration: none;
  text-align: left;
}
#DropdownContent a:hover {
  background: #b404ae;
}
#Dropbtn:hover #DropdownContent {
  display: block;
}
#Sector {
  border: 10px solid black;
  height: 1000px;
  background-color: #eff8fb;
}
#Footer {
  border: 10px solid black;
  height: 200px;
  margin-bottom: 20px;
  background-color: #000000;
}
pre {
  margin-left: 5px;
  font-size: 15px;
  font-family: Arial, Helvettica, sans-serif;
  color: white;
}
#underline>pre:hover {
  cursor: pointer;
}
<!DOCTYPE html>
<head>
  <link rel="stylesheet" type="text/css" href="design2.css" media="screen and (min-width:0)" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>First website</title>
</head>
<body>
  <div id="Container">
    <div id="Header">
      <div id="Logo">
        <a href="http://www.manchester.ac.uk/">
          <figure>
            <img src="https://upload.wikimedia.org/wikipedia/en/7/72/UniOfManchesterLogo.svg" width="150" height="80" alt="University logo">
          </figure>
        </a>
      </div>
      <div id="HomeLogo">
        <a href="main.html">
          <figure>
            <img src="http://www.diywebsitetools.com/wp-content/uploads/2012/05/homeicon.jpg" class="img-rounded" width="120" height="70" alt="going back to the main page">
          </figure>
        </a>
      </div>
      <div id="MainMenu">
        <a href=M.html> M&S </a>
        <a href="#Health & saftely issues when working with computers"> Health&Saftely </a>
        <span id="Dropbtn">
        <button id="ClickableButton">U&C</button>
          <div id="DropdownContent">
            <a href="#1">Statistics and backgroud information</a>
            <a href="#2">Research groups / research projects</a>
            <a href="#3">Courses</a>
          </div>
       </span>
        <a href="aboutUs.html"> About us </a>
      </div>
    </div>
    <div id="Sector"></div>
    <div id="Footer">
      <pre>         Contact Us                                                                            Find Us                                                                        Copyright © 2017-2018 Group 4</pre>
      <div id="underline">
        <pre>         +44 (0) 161 306 60000                                                        The University of Manchester                                        Hossein Miraftabi
                                                                                                          Oxford Rd                                                                      Matthew Knowles
                                                                                                          Manchester                                                                    Catherine Dimitropoulaki
                                                                                                          M14 9PL                                                                        Sumera Zulfiqar
                                                                                                          UK</pre>
      </div>
    </div>
  </div>
</body>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium