Question

我对HTML很新，对于一个小项目，我们应该模仿google mail的界面。没有工作链接，只有界面。我在那里很安静，但我遇到了一些问题。我的问题是，当我的浏览器变小时，我的布局会扭曲。我在互联网上搜索过（w3schools等），但没有回答。这里有谁可以提供帮助？这是我的代码。

#headerbar {
  background-color: grey;
  color: black;
  text-align: center;
  padding: 5px;
  height: 60px;
  border-style: solid;
  white-space: nowrap;
}

#secondbar {
  background-color: LightGrey;
  color: black;
  text-align: center;
  padding: 10px;
  white-space: nowrap;
  border-style: solid;
}

#logo{
  font-size: 200%;
  float: left;
  color:red;
}

#logoMail{
  float: left;
  font-size: 200%;
  color: red;
}

#checkbox{
  float: left;
}

#refresh{
  float: center;
}

#properties{
  float: right;
  white-space: nowrap;
}

#more{
  float: center;
}

#nav{
  line-height: 30px;
  background-color: white;
  color: black;
  height: 300px;
  width: 200px;
  float: left;
  padding: 5px;
  white-space: nowrap;
  border-style: solid;
  border-width: 1px;
}
#footer{
  background-color: black;
  color:white;
  clear:both;
  text-align: center;
  padding: 5px;
  white-space: nowrap;
}

#logopic {
  float: left;
}

#email{
  font-size: 100%;
  float: right;
}

#box{
  float:right;
  white-space: nowrap;
}

#maillist{
  line-height: 30px;
  background-color: white;
  color: black;
  max-width: 100%;
  text-align: center;
  padding: 5px;
  float: center;
  white-space: nowrap;
  border-style: solid;
}

#name{
  line-height: 30px;
  background-color:Grey;
  float:left;
  padding: 5px;
  width:10%;
  white-space: nowrap;
}

#mailpreview{
  display: inline-block;
  line-height: 30px;
  background-color:LightGrey;
  padding: 5px;
  margin: 0 auto;
  width: 50%;
  white-space: nowrap;
}

#time{
  line-height: 30px;
  background-color:Grey;
  float:right;
  padding: 5px;
  width: 10%;
  white-space: nowrap;
}

#leftblock{
  float:left;
}

#center{
  float: center;
}

#rightblock{
  float: right;
}

<div id= "headerbar">
  <img id="logopic" src="logo.png" >
  <span id="logo">Google Mail</span>
  <input type="text" name="searchbar">
  <span id = "box"><img src="box.png"></span>
  <span id="email">thomas.stephens@student.uva.nl</span>

</div>

<div id = "secondbar">
  <div = "leftblock">
    <span id="logoMail">Mail</span>
    <img id="checkbox" src="checkbox.png">
  </div>

  <div id="centerblock">	
    <img id="refresh" src="refresh.png">
    <img id="more" src="more.png">
  </div>

  <div id="rightblock">
    <img id="properties" src="properties.png">
  </div>
</div>

<div id = "nav">
  Inbox<br>
  Starred<br>
  Important<br>
  Sent Mail<br>
  Drafts<br>
  Follow up<br>
  Misc<br>
  Priority<br>
</div>

<div id="maillist">
  <div id="name">
    1<br>
    2<br>
    3<br>
  </div>
  <div id="mailpreview">
    This is mail number 1<br>
    This is mail number 2<br>
    This is mail number 3<br>
  </div>
  <div id="time">
    20:00<br>
    20:01<br>
    20:02<br>
  </div>
</div>

<div id="footer">
  Powered by Google
</div>

Answer 1

对于花车和百分比宽度（你至少有1个）这是正常的你可以做的是使用media查询我建议查找它。它基本上允许您为较小的设备设计网站，同时保持大分辨率的相同外观

布局扭曲HTML

1 个答案: