Вопросы Теги

Почему мой верхний колонтитул отображается в верхней части моей страницы?

Я обновил свой плагин gulp-typescript до последней версии (2.13.0), и теперь он компилируется без сбоев.

UPDATE 1: Я ранее использовал gulp-typescript версию 2.12.0

ОБНОВЛЕНИЕ 2: Если вы обновляетесь до Angular 2.0.0-rc.1, вам необходимо сделать следующее в файле appBoot.ts: 

///
import { bootstrap } from "@angular/platform-browser-dynamic";
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from "./path/AppComponent";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
// import 'rxjs/Rx'; this will load all features
import { enableProdMode } from '@angular/core';
import { Title } from '@angular/platform-browser';



//enableProdMode();
bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    Title
]);

Важная вещь, ссылка на es6-shim / index.d.ts

Предполагается, что вы установили пиктограммы es6-shim, как показано здесь:

Подробнее о типизациях установите с углового здесь: https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings

0
задан Hossein Bajan 20 March 2019 в 04:17
поделиться

5 ответов

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<style type="text/css">

body {
      margin:0px;
     }


main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }


 nav {
     border: 1px solid black;
     }
</style>
</head>

<body>

<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>

 <footer> Service Networking </footer>
</body>


</html>

Вы использовали <footer>, до nav и main.

0
ответ дан Atul Kumar 20 March 2019 в 04:17
поделиться 

body {
      margin:0px;
     }


main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }


 nav {
     border: 1px solid black;
     }         
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
</head>

<body>

<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>
<footer> Service Networking </footer>
</body>

</html>

0
ответ дан Hossein Bajan 20 March 2019 в 04:17
поделиться

Попробуйте разместить теги нижнего колонтитула после основных тегов.

0
ответ дан michlene 20 March 2019 в 04:17
поделиться

Потому что вы поместили тег нижнего колонтитула перед тегом nav и основным тегом. Переместите его до конца. 

body {
      margin:0px;
     }


main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }


 nav {
     border: 1px solid black;
     }
     
    footer{
    border: 1px solid green;
    }
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

</head>

<body>


<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>

<footer> Service Networking </footer>
</body>

</html>

0
ответ дан Hien Nguyen 20 March 2019 в 04:17
поделиться

Поскольку ваш первый элемент внутри <body> - footer, HTML будет представлен построчно.

Нижний колонтитул - это семантический тег, который введен в HTML 5. Семантические элементы - это просто теги со значением.

Таким образом, ваш тег footer является элементом уровня блока, поэтому он имеет свойство display:block.

Точно так же, если вы используете элемент заголовка в качестве последнего элемента перед телом, содержимое заголовка также будет отображаться внизу, поскольку это семантический тег (тег со значением, который помогает как браузеру, так и человеку понимать содержимое внутри тега). .

У вас может быть несколько тегов нижнего колонтитула, пока он не станет значимым для браузера и человека.

Демонстрация: https://jsfiddle.net/akshaymhatre89/ekvgLxcy/11/ 

<header>
  <h1>Header</h1>
</header>
<hr>
<main>
  <section>
    <header>
      <h2>Section header</h2>
    </header>
    <article>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ex minima magnam 
    </article>
    <footer>
      <p>End of article</p>
    </footer>
  </section>
</main>
<hr>
<footer>
  &copy; Copyright :-)
</footer>

Другие статьи по теме:

0
ответ дан Sfili_81 20 March 2019 в 04:17
поделиться