/* CSS Document */
body {
/* background-color:#81C9AC; */
background-image:url(http://store6.up-00.com/2017-02/148773426400995.jpg);
background-repeat: no-repeat;
background-size:cover;
width:100%;
height:100%;
}
.theVeryTop5{
height: 15%;
width: 68.5%;
background-color:white;
opacity: 0.15;
left: 31.5%;
top: 4%;
}
#cands{
height: 5%;
width: 10%;
background-color:58B48F;
border: 2px solid #E8E8E8;
border-radius: 30%;
font-family:BankGothic Lt BT;
color:#FFFFFF;
font-size:2vw;
text-align: center;
}
.service{
left: 80%;
top: 5.5%;
}
.contact{
left: 80%;
top: 12.5%;
}
.testimonials{
height: 5.5%;
width: 18%;
background-color:#161412;
opacity: 0.95;
font-family:BankGothic Lt BT;
font-size:2vw;
text-align: center;
color:#FFFFFF;
left: 31.5%;
top: 19%;
}
.about{
font-family:BankGothic Lt BT;
color:white;
font-size:3vw;
left: 9.5%;
top: 40%;
text-align: justify;
}
.about2{
height: 40%;
width: 25%;
font-family:Century Gothic, sans-serif;
color:white;
font-size:1.2vw;
text-align: center;
left: 3%;
top: 50%;
}
div {
/*border-radius: 5px;*/
/*border: 2px solid black;*/
position: absolute;
}
.header {
height: 100%;
width: 31.50%;
background-color:#161412;
opacity: 0.95;
border: 1px solid #black;
left: 0%;
top: 0%;
}
.piano {
height:10%;
width:35%;
left: 50%;
top: 70%;
position: absolute;
}
.we{
height:35%;
width:16%;
left: 7%;
top: 5%;
position: absolute;
border-radius: 50%;
}
#social{
height: 5.5%;
width: 3%;
border-radius: 50%;
position: absolute;
}
.fbcircular{
left: 92.25%;
top: 24%;
}
.pcircular{
left: 92.25%;
top: 31%;
}
.ycircular{
left: 92.25%;
top: 38%;
}
label {
font-family: BankGothic Lt BT;
}
.bla{
font-family:Edwardian Script ITC;
color:#FFFFFF;
font-size:8vw;
text-align: center;
left: 50%;
top: 45%;
}
.Service{
font-family:DejaVu Sans Light;
color:#FFFFFF;
font-size:2vw;
text-align: center;
left: 70%;
top: 61%;
}
.call{
font-family:BankGothic Lt BT;
color:#FFFFFF;
font-size:2vw;
text-align: center;
left: 58%;
top: 85%;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- https://www.youtube.com/watch?v=0kX1wB8qil4 javascript-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" rel="stylesheet" href="pianostyle.css"/>
<title>Untitled Document</title>
<style type="text/css">
<!--
.style2 {color: #E08249}
-->
</style>
</head>
<body>
<div class="header"\> </div>
<img src="http://store6.up-00.com/2017-02/148773426418566.png" class="we" />
<div class="about"> About </div>
<div class="about2"> Hello my name is <span class="style2">Bla Bla</span>. I'm a blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla . <br/>
</br>
Distinguished blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla </div>
<div class="theVeryTop5"></div>
<div id="cands" class="service"> services </div>
<div id="cands" class="contact"> contact </div>
<div class="testimonials"> "testimonials"</div>
<img id="social" class="fbcircular" src="http://store6.up-00.com/2017-02/148773426378573.jpg" alt="facebook" />
<img id="social" class="pcircular" src="http://store6.up-00.com/2017-02/14877342636672.png" />
<img id="social" class="ycircular"src="http://store6.up-00.com/2017-02/148773426391924.png" alt="yelp" />
<img class="piano" src="http://store6.up-00.com/2017-02/1487734263541.jpg" alt="piano image" />
<div class="bla">
Blaaa Blaaa
</div>
<div class="Service">
whatever service
</div>
<div class="call"> 000-0000-0000 </div>
</body>
</html>
everything is in the place I want
您好， 这是我在这里的第一篇文章。
我继续使用：position：absolute;和百分比。 ＆＃34;我不知道如何控制元素的位置和大小＆＃34;
它对我有用，我可以在我想要的地方放很多东西。 但我想知道，如果它是正确的方式？
==========================也==================== ===========
我可以使用字体大小的百分比吗？因此，当屏幕尺寸发生变化时，它会保持固定并处于同一位置。
答案 0 :(得分：0)
您确实可以使用百分比作为字体大小，但我建议使用 em，因为它们更适合响应。
