body {
background: url('images/hero_2.jpg');
background-repeat: no-repeat;
background-position: top;
background-size: 100%;
margin: 0px 0px;
}
#container_1 {
width: 100%;
height: 300px;
position: absolute;
top: 450px;
left: 0;
border-color: orange;
border-style: solid;
border-size: 1;
}
#valueprop_1 {
text-align: left;
width: 700px;
max-height: 30px;
font-family: calibri;
font-weight: 100;
font-size: 48;
position: relative;
left: 50px;
top: 20px;
line-height: 1;
color: white;
}
#valueprop_2 {
text-align: left;
width: 500px;
max-height: 30px;
font-family: calibri;
font-weight: 100;
font-size: 22;
position: relative;
left: 44px;
top: 110px;
line-height: 1;
margin: 10;
color: white;
}
/* learn more button box*/
#learn_button {
position: absolute;
left: 55px;
top: 250px;
width: 100px;
height: 25px;
background: black;
opacity: .4;
}
/* learn more button text*/
#learn_text {
font-family: calibri;
font-size: 16;
font-weight: normal;
text-align: center;
position: absolute;
left: 68px;
top: 253px;
}
#learn_text a {
text-decoration: none;
color: white;
}
#learn_text ul {
list-style-type: none;
text-align: right;
margin: 0px 0px;
padding: 0;
}
/* register button box*/
#register_buttonA {
position: absolute;
left: 180px;
top: 250px;
width: 100px;
height: 25px;
background: #00ADEF;
}
/* register button text*/
#register_textA {
font-family: calibri;
font-size: 16;
font-weight: normal;
color: white;
text-align: center;
position: absolute;
left: 198px;
top: 253px;
}
#register_textA a {
text-decoration: none;
color: white;
}
#register_textA ul {
list-style-type: none;
text-align: right;
margin: 0px 0px;
padding: 0;
}
#container_2 {
width: 100%;
height: 1100px;
position: absolute;
top: 980px;
left: 0;
border-color: yellow;
border-style: solid;
border-size: 1;
}
#teens_1 {
font-family: calibri;
font-size: 24;
font-weight: normal;
text-align: center;
position: absolute;
left: 50px;
top: 0px;
background-color: transparent;
height: 25px;
width: 25px;
}
#teens_2 {
font-family: calibri;
font-size: 26;
font-weight: normal;
color: grey;
text-align: center;
position: absolute;
left: 50px;
top: 130px;
}
#under_18A {
font-family: calibri;
font-size: 14;
font-weight: 100;
color: grey;
position: relative;
text-align: left;
width: 500px;
left: 50px;
top: 200px;
}
#under_18b {
font-family: calibri;
font-size: 14;
font-weight: 100;
color: grey;
position: relative;
text-align: left;
width: 500px;
left: 28px;
top: 200px;
}
#under_18c {
font-family: calibri;
font-size: 14;
font-weight: 100;
color: grey;
position: relative;
text-align: left;
width: 500px;
left: 50px;
top: 200px;
}
#over_18A {
font-family: calibri;
font-size: 14;
font-weight: 100;
color: grey;
position: relative;
text-align: left;
width: 500px;
right: -800px;
top: -50px;
}
#teens_3 {
font-family: calibri;
font-size: 26;
font-weight: normal;
color: grey;
text-align: center;
position: absolute;
left: 50px;
top: 490px;
}
#parents {
font-family: calibri;
font-size: 14;
font-weight: 100;
color: grey;
position: relative;
text-align: left;
width: 500px;
left: 50px;
top: 70px;
}
#feedback_1 {
position: relative;
right: -780px;
bottom: 345px;
}
/* register button box*/
#register_buttonB {
position: absolute;
right: 50px;
top: 150px;
width: 100px;
height: 25px;
background: #00ADEF;
}
/* register button text*/
#register_textB {
font-family: calibri;
font-size: 16;
font-weight: normal;
color: white;
text-align: center;
position: absolute;
right: 65px;
top: 153px;
}
#register_textB a {
text-decoration: none;
color: white;
}
#register_textB ul {
list-style-type: none;
text-align: right;
margin: 0px 0px;
padding: 0;
}
<html>
<head>
<title>California Driver Education & Training | GEARSTAD</title>
<link href="gstGeneral.css" rel="stylesheet" type="text/css" />
<link href="gstTeens.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="scroll.js"></script>
</head>
<body>
<div id="logo">
<a href="index.html">
<img src="images/gst_logo.png"/>
</a>
</div>
<div id="navbar">
<ul>
<li><a href="index.html">HOME</a></li>
<li class="active"><a href="teens.html">TEENS</a></li>
<li><a href="adults.html">ADULTS</a></li>
<li><a href="seniors.html">SENIORS</a></li>
<li><a href="recovery.html">RECOVERY</a></li>
<li><a href="statement.html">STATEMENT</a></li>
</ul>
</div>
<div id="container_1">
<h1 id="valueprop_1">Our Basic+ Training<br/>Provides New Drivers with<br/>Safe and Efficient Driving Skills</h1>
<h2 id="valueprop_2">Convenient online, mobile, and driver training pickup</h2>
<div id="register_buttonA"></div>
<div id="register_textA">
<ul>
<li><a href="registration.html">Start Now</a></li>
</ul>
</div>
<div id="learn_button"></div>
<div id="learn_text">
<a href="#teens_1">Learn More</a>
</div>
</div>
<div id="container_2">
<h1 id="teens_1"></h1>
<h1 id="teens_2">California Driving Requirements</h1>
<div id="register_buttonB"></div>
<div id="register_textB">
<ul>
<li><a href="registration.html">Start Now</a></li>
</ul>
</div>
<div id="under_18A">
<p><strong>UNDER 18 -</strong> In California, driving lessons for teens are required by the DMV. Driving students under the age of 18 must:</p>
</div>
<div id="under_18B">
<ol>
<li>Pass drivers education online or in a classroom</li>
<li>Earn a driving permit by passing a written driving test</li>
<li>Take six hours of in-car driving lessons from a licensed driving school</li>
<li>Pass the in-car driving test at the DMV</li>
</0l>
</div>
<div id="under_18C">
<p>Driving lessons help you perfect your driving skills so you can safely handle all types of roadways in a variety of conditions. Learn to handle your car
safely and confidently with us. Our excellent driving instructors are up-to-date on the latest techniques in crash avoidance, braking, driving safety, and
California driving laws and they are passing that knowledge on to you!</p>
</div>
<div id="over_18A">
<p><strong>OVER 18 -</strong> The California DMV requires that driving students over the age of 18 pass the in-car driving test at the DMV.
<br/><br/>Even though the DMV doesn't require driving lessons for adults, it is still a good idea to take driving lessons from a professional driving
school. In California, driving laws are subject to change every year. Behind-the-wheel training with our certified driving instructors can keep you
up-to-date on the latest driving laws and techniques in crash avoidance, braking, and driving safety on increasingly packed California roads.
<br/><br/>Many adults take driving lessons to learn the latest defensive driving and safety procedures or master challenging or stressful driving
situations, such as freeways, or busy city streets. Our patient and professional instructors can also help you gain confidence after a collision or
behind-the-wheel scare.</p>
</div>
<h1 id="teens_3">Information for Parents</h1>
<div id="parents">
<p><strong>DRIVING LESSONS -</strong> Your teen will learn in a BMW 3 Series with a top safety rating. Our curriculum covers all driving skills, from simple to
complex. Our uniformed instructor picks up your teen from home or schoolÑfor free! We provide individual instruction with no distractions in the vehicle.
At the end of each lesson, we will assess your teen's driving ability. Professional male and female driving instructors are available.
<br/><br/>Parents trust
GEARSTAD because we're California's largest driving school with over 25 years of experience in providing California driving lessons for teens. We're the
only school that is both approved by the Road Safety Educators' Association and accredited by the Driving School Association of the Americas.
<br/><br/>Our driving school operates locally with local driving instructors in areas across the state. Our certified instructors are smart, patient, and friendly. Your teen
will get training on all driving skills, as well as the latest defensive driving methods and safety techniques.
<br/><br/>Each lesson is tailored to the student's
learning style, and all lessons are individualized and free from distractions. We have a fleet of BMWs for our driving lessons. Your teen will
learn in a vehicle with the highest safety rating in the industry, so you know your teen is safe. Parents are always welcome to ride along and observe
lessons.</p>
</div>
<img id="feedback_1" style="height:auto; width:auto; max-width:500px; max-height:417px;" src="images/feedback_1.jpg"/>
<div id="googaloo">
</div>
</div>
<div id="footer">
<h1 id="copyright_1">© 2014 GEARSTAD Training Group, Inc. All rights reserved.</h1>
<h1 id="copyright_2">Toll Free 800 GEARSTAD | 760.760.7607</h1>
<div id="email">
<a href="mailto:mcaffin@live.com" target="_blank">
<img style="height:auto; width:auto; max-width:25px; max-height:20px;" src="images/icon_email.png"/>
</a>
</div>
<div id="facebook">
<a href="https://www.facebook.com" target="_blank">
<img style="height:auto; width:auto; max-width:25px; max-height:20px;" src="images/icon_facebook.png"/>
</a>
</div>
<div id="twitter">
<a href="https://twitter.com" target="_blank">
<img style="height:auto; width:auto; max-width:25px; max-height:20px;" src="images/icon_twitter.png"/>
</a>
</div>
<div id="feeds">
<a href="https://www.rss.com" target="_blank">
<img style="height:auto; width:auto; max-width:25px; max-height:20px;" src="images/icon_feeds.png"/>
</a>
</div>
</div>
</body>
</html>
我是HTML和CSS的新手。
我用13英寸MBA制作了我的第一个学校项目最终网站，当我在40英寸的三星电视元素上显示它时正在转变。
目前，我将所有元素放在2个容器中并将它们全部放在“绝对”位置。然而，当切换到三星电视时，两个容器都向上移动（容器内的内容保持在同一位置）。
注意：我的容器宽度为100％，零保持不变。我的高度应该是％而不是px吗？
任何指针都会有所帮助
感谢。
答案 0 :(得分：0)
您正在寻找的是创建“响应”＆＃39;页面。 Bootstrap是一种将响应功能引入网页的一种非常简单的方法。请在此处查看：http://getbootstrap.com/2.3.2/
答案 1 :(得分：0)
由于您尚未发布任何代码，我无法告知代码更正。
但绝对定位肯定会在这里造成问题。绝对定位实际上将元素放在正常文档流之外。因此，在较大的屏幕上，如果找到足够的空间，则文档下方的元素可以出现。对于容器内的元素，您必须使用％in宽度。它们是在较大屏幕上为较低元素创造空间的那些。高度可以用px给出。
此外，在使用绝对定位时，必须通过为其父元素之一设置position:relative来设置定位上下文。
尝试进行上述更正。
但建议使用bootstrap进行响应式设计。它具有很好的文档和预先构建的容器和网格布局元素，就像你的一样。