Question

我能够正确定位＆amp;使用html＆amp; amp;缩放我的网页中的一些元素css，但是由于定位规则，我已经陷入了如何用另外两个元素继续这个动作的问题。

图片中的V形图标必须位于标题为＆＃34的最后一段下方;向下滚动＆＃34;，＆amp;我还希望它与屏幕尺寸一起缩放，因为我已成功地使用其他文本/元素，如您所见：

这是html：

$.ajax({
    url: "Employees.aspx/getEmployee",
    data: null,
    contentType: "Application/json; charset=utf-8",
    responseType: "json",
    method: "POST",
    success: function (response) {
        //alert(response.d);

        var jsonObject = response.d;
        var result = jsonObject.map(function (item) {
            //var date = new Date(item.EMP_DOB);
            //var obj = Date.parse(date);
            var result = [];
            result.push('');
            result.push(item.EMP_FNAME);
            result.push(item.EMP_MNAME);
            result.push(item.EMP_LNAME);
            result.push(item.EMP_EMAIL);
            result.push(item.EMP_DOB); //this is my date column in my database from where date is in yyyy/mm/dd format
            result.push(item.EMP_USERNAME);
            result.push(item.EMP_PASSWORD);
            result.push(item.ID);
            return result;
        });
        myTable.rows.add(result); // add to DataTable instance
        myTable.draw();
    },
    error: function (xhr) {
        alert(xhr.status);
    },
    Failure: function (response) {
        alert(response);
    }
});

这是css：

<!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>

那么如何在我的网页上正确定位* { 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＆amp;它也可以扩展吗？

Answer 1

只需从margin-bottom : -90px;移除#secondary-p，这将使Cheveron Icon位于向下滚动（#sencondary-p）下方。

要缩放Cheveron图标，请为其添加font-size，其值为vw。像这样： -

.fa{
  color : #FFD700;
  font-size : 4vw;
}

演示is here.

<强>更新

为了将它们稍微向下移动，将.fa元素和#sencondary-p元素包含在div中，并为div提供一些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.

Answer 2

将雪佛龙放入div中并设置div的位置。（使用position：static，这将保持位置一致。）

我该如何正确定位＆amp;在CSS中缩放这些元素？

2 个答案: