如何正确定位&在CSS中缩放这些元素? [英] how do I properly position & scale these elements in CSS?
问题描述
我已经能够正确定位&在我的网页使用html& css,然而由于定位的规则,我已经坚持如何继续这个行动与两个更多的元素。
I've been able to properly position & scale a few elements in my webpage using html & css, however due to the rules of positioning, I've gotten stuck on how to continue this action with two more elements.
图片中的雪佛龙图标必须在最后一段标题为向下滚动,&我也想要它与屏幕尺寸缩放,因为我已经成功地与其他文本/元素,如你可以看到:
The chevron icon in the picture must be below the last paragraph entitled "scroll down", & I also want it to scale with the screen size as I have been successfully able to do with the other text/elements as you can see:
这里是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 下的
#secondary-p
So how do I properly position the .fa
under #secondary-p
on my webpage & scale it as well?
推荐答案
只要移除 margin-bottom:-90px;
从#secondary-p
,这将使Cheveron图标进入向下滚动(#sencondary-p
)。
Just remove margin-bottom : -90px;
from #secondary-p
, this will make Cheveron Icon go below Scroll Down (#sencondary-p
).
为了缩放Cheveron图标,添加 font-size
vw
中的值。像这样: -
And for scaling the Cheveron Icon, add font-size
to it with a value in vw
. Like This :-
.fa{
color : #FFD700;
font-size : 4vw;
}
Demo is here.
更新
要将它们向下移动一点,请将 .fa
元素和#sencondary-p
元素在 div
中,并给出 div
一些 margin-top
。像这样: -
For shifting them a little bit down, wrap the .fa
element and the #sencondary-p
element inside a div
and give that div
some margin-top
. Like this :-
: -
<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*/
}
a href =http://jsbin.com/wujeci/edit?html,css,output =nofollow>此处
See the updated demo here.
这篇关于如何正确定位&在CSS中缩放这些元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!