通过HTML和CSS使网页响应

时间：2017-04-25 10:25:05

标签： html css responsive-design

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

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

其次，标题不跟随屏幕虽然我为它设置宽度并使边距自动。

第三，页脚及其内容有相同的故事。如果有人能帮助我修复这些错误，我真的很感激。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

我修改了你的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>

答案 1 :(得分：0)

不要使用像素而是使用百分比：html和body的字体大小，边框，宽度和高度。使用vh表示div和其他元素的宽度和高度。

答案 2 :(得分：-1)

使用max-width：

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

答案 3 :(得分：-1)

使用元素的固定宽度不会允许它们在窗口调整大小时缩放。

乍一看，您可以将容器宽度从width: 1100px更改为max-width: 1100px，其中max-width将使其宽度不超过11​​00px，并会在窗口调整大小时重新缩放

您的第二个问题是您正在使用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>

相关问题
最新问题