我已经能够使用 html 和 css 正确定位和缩放网页中的一些元素，但是由于定位规则，我陷入了如何使用另外两个元素继续此操作的困境。
图片中的 V 形图标必须位于标题为“向下滚动”的最后一段下方，我也希望它能够随屏幕尺寸缩放，正如我已经成功地处理其他文本/元素一样，如您所见：
这是 HTML：
<!DOCTYPE html>
<html>
<head>
<title>myWebpage</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />
<link href="css/font-awesome.min.css"rel="stylesheet">
<link href="main-sanctuary.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Hellloooooooooooooo!</h1>
<p id="first-p">Welcome All!<br>Make Yourself at home.</p>
<p id="secondary-p">Scroll down.</p>
<button id="logBtn">Log In</button>
<button id="signBtn">Sign Up</button>
<i class="fa fa-chevron-down fa-4x"></i>
</header>
</body>
</html>
这是CSS：
* {
margin:0;
padding:0;
}
body,html {
height: 100%;
background: honeydew;
}
/* Header*/
header {
height: 100vh;
background-image: url(https://s3-us-west-2.amazonaws.com/assests/books-apple.jpg);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
text-align: center;
position:relative;
}
h1 {
color: honeydew;
font-family: "Helvetica Neue";
font-size : 7.5vw;
margin-bottom: 30px;
}
#first-p {
color: honeydew;
font-family: "Helvetica Neue";
font-weight: lighter;
font-style: normal;
font-size : 3.5vw;
margin-bottom: 50px;
}
#secondary-p {
position: inherit;
color: #FFD700;
font-family: "Helvetica Neue";
font-weight: lighter;
font-style: normal;
font-size : 2vw;
margin-bottom: -90px;
}
.fa {
color: #FFD700;
}
那么我该如何正确定位.fa under #secondary-p在我的网页上并缩放它？
只需删除margin-bottom : -90px; from #secondary-p，这将使 Cheveron 图标转到向下滚动下方（#sencondary-p).
为了缩放 V 形图标，添加font-size其值为vw。像这样 ：-
.fa{
color : #FFD700;
font-size : 4vw;
}
Demo is here. http://jsbin.com/quriqa/edit?html,css,output
Update
要将它们稍微向下移动，请将.fa元素和#sencondary-pa 内的元素div并给出div some margin-top。像这样 ：-
HTML :-
<div id="wrapper">
<p id="sencondary-p">Scroll Down</p>
<i class = "fa fa-chevron-down fa-4x"></i>
</div>
CSS :-
#wrapper{
margin-top : 100px; /*Increase the value to shift more down*/
}
查看更新的演示here. http://jsbin.com/wujeci/edit?html,css,output
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
