我想从屏幕的一端延伸到另一端。现在,它拉伸了980px。根据屏幕大小,它应该从一端延伸到另一端。
如果我增加980像素,则所有权将发生变化。如何使酒吧反应敏捷?
我应该使用什么CSS?
html {
height: 100%;
width: 100%;
}
body {
height: 980px;
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 980px;
height: 40px;
margin: 0 0 10px 0;
padding: 0;
background: #0B61A5;
color: white;
}
navigation {
width: 980px;
margin: 0;
padding: 0;
text-align: center;
}
navigation ul {
width: 980px;
list-style: none;
padding: 0;
margin: 0;
}
navigation ul li {
display: inline;
margin-right: 1em;
}
footer {
width: 940px;
height: 20px;
margin: 0 0 10px 0;
padding: 10px 20px;
background: #0B61A5;
color: white;
}
<html>
<body>
<header>
<h1>OEMS User Area</h1>
</header>
<navigation>
<ul>
<li>User: </li>
<li> <a href="">Home</a> </li>
<li> <a href="">Logout</a> </li>
</ul>
</navigation>
<footer> O.E.M.S </footer>
</body>
</html>
对于任何设备尺寸,您都应使用width:100%将标头拉伸到全宽。如果您想要针对不同设备尺寸的其他设计,请使用媒体查询。要了解有关响应式设计的更多信息,请访问https://www.w3schools.com/css/css_rwd_mediaqueries.asp
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 40px;
margin: 0 0 10px 0;
padding: 0;
background: #0B61A5;
color: white;
}
[使用它,它将拉伸条形,并将页面内容放在.wrapper部分中,它将为980px,居中]
html {
width: 100%;
}
body {
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 40px;
margin: 0 0 10px 0;
padding: 0;
background: #0B61A5;
text-align: center;
color: white;
}
navigation {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
navigation ul {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
navigation ul li {
display: inline;
margin-right: 1em;
}
footer p {
padding: 10px 20px;
}
footer {
width: 100%;
height: 40px;
margin: 0 0 10px 0;
padding: 0px;
background: #0B61A5;
color: white;
}
.wrapper {
min-height: 900px;
width: 980px;
margin: auto;
display: block;
}
<html>
<body>
<header>
<h1>OEMS User Area</h1>
</header>
<navigation>
<ul>
<li>User: </li>
<li> <a href="">Home</a> </li>
<li> <a href="">Logout</a> </li>
</ul>
</navigation>
<section class='wrapper'>
THE CONTENT GOES HERE !
</section>
<footer><p> O.E.M.S </p></footer>
</body>
</html>