Как заменить бутстрап для достижения той же цели? - PullRequest
Новая
       4

Как заменить бутстрап для достижения той же цели?

0 голосов
/ 12 марта 2019 
<!DOCTYPE html>
<html>

<head>



  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">



  <title>
    Home - Hasan's Website
  </title>
  <style>
    body,
    html {
      height: 100%;
      margin: 0;
      font-size: 16px;
      font-family: "Lato", sans-serif;
      font-weight: 400;
      line-height: 1.8em;
    }

    .jumbotron {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url(image.jpg);
      background-position: 0% 25%;
      background-size: cover;
      background-repeat: no-repeat;
      border: 1px;
    }

    .navigation {
      background-color: #330;
      overflow: hidden;
      display: grid;
      grid-template-columns: auto auto auto auto auto;
    }

    .navigation a {
      font-size: 20px;
      text-decoration: none;
      color: #f2f2f2;
      text-align: center;
      float: left;
    }

    .navigation a:hover {
      background-color: #dddddd;
      color: black;
    }

    .navigation a.active {
      background-color: #4CAF50;
      color: white;
    }

    body {
      background-image: url("Engineering.jpg");
      background-repeat: no-repeat;
      background-position: center top;
      background-size: cover;
      background-color: rgba(0, 0, 0, 0.5);
    }

    h1 {
      margin: auto;
      z-index: 4;
      text-align: center;
      width: 100%;
      color: white;
      font-size: 100px;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="navigation">
    <a class="active" href="#home">Home</a>
    <a href="#aboutMe">About Me</a>
    <a href="#careers">Careers</a>
    <a href="#contactUs">Contact Us</a>
    <a href="#webDev">Web Development</a>
  </div>

  <div class="intro">
    <div class="jumbotron">
      <h1>Computer Engineering</h1>

    </div>


  </div>





</body>

</html>

Я получил некоторую помощь от кого-то, и они использовали Bootstrap, чего учитель не разрешил. Начальная загрузка делает слова не сжатыми друг против друга. Что я могу сделать, чтобы достичь той же цели без начальной загрузки? Как будто я хочу удалить загрузчик, но название «Компьютерная инженерия» тогда просто сжимается. Как можно удалить загрузчик, но все равно правильно расположить слова? Любая помощь будет оценена! Это для моего 11 класса инженерного класса.

Ответы [ 2 ]

1 голос
/ 12 марта 2019

Я не даю прямого решения. Но способ найти решение по-своему.

Запустите страницу с включенными стилями начальной загрузки. Откройте страницу в современном браузере, например Google Chrome . Щелкните правой кнопкой мыши по интересующему вас элементу и выберите Проверить элемент в контекстном меню. Теперь вы можете видеть свойства CSS, которые влияют на внешний вид проверяемого элемента.

Скопируйте эти свойства в ваш собственный проект. Готово.

0 голосов
/ 12 марта 2019

что происходит из-за 

body, html{
line-height : 1.8em;
}

Просто добавьте line-height : 1em; в h1. Это должно решить проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...