Создайте страницу формата Letter 8,5x11 или A4 с таблицами для текста

Я хотел бы создать страницу формата А4 или 8,5х11, которая выглядела бы так, как я прикрепил. Одна страница имеет верхнее поле шириной 3 дюйма, две вертикальные линии, поле слева/справа шириной 1 дюйм с номерами строк слева и две ячейки размером 2 дюйма вверху под полем шириной 3 дюйма. На каждой странице есть номера и нижние колонтитулы.

Насколько я мог получить HTML и CSS:

body {
  background: rgb(204, 204, 204);
}

page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}

page[size = "A4"] {
  width: 21cm;
  height: 29.7cm;
}

page[size = "A4"][layout = "landscape"] {
  width: 29.7cm;
  height: 21cm;
}

@media print {
  body,
  page {
    background: white;
    margin: 0;
    box-shadow: 0;
  }

<body>
  <page size = "A4"></page>
  <page size = "A4"></page>
  <page size = "A4">PAGE</page>
  <page size = "A4"></page>
</body>

Вы хотите, чтобы это было для печати или просто для имитации страниц? Например, попытка написать формат А4 на экране телефона не имеет смысла. Для печати см. @page CSS-документы.

— 18.09.2023 05:00

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

— 18.09.2023 07:39

Нижний колонтитул на первой странице кажется внутри вертикальных линий, но не на второй странице. Какая разница/это правильно?

— 18.09.2023 16:20

Вы имеете в виду, что 4-дюймовый зазор над заголовком первой страницы должен появиться и на второй?

— 18.09.2023 16:31

Приношу извинения, вы правы, первая страница и последующие страницы. Нижний колонтитул должен соответствовать номерам вертикальных строк и начинаться с них. Заголовок первой страницы должен иметь ширину 3 дюйма, все остальные стороны и низ должны быть равны 1 дюйму. <page> is css>. Я повторно опубликую изображение, чтобы лучше отразить идею. Спасибо

— 18.09.2023 17:25

Я читал и просматривал много разных примеров, в моем обновленном примере он немного отличается по макету и тексту. Да, они похожи, спасибо за этот вариант и мнение.

— 18.09.2023 19:48

html css html-table css-tables

18.09.2023 01:29

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как это выглядит?

body { background: rgb(204,204,204); }
.page {
    --page-inset-side: 1in; /* left/right */
    --page-inset-ends: 1in; /* top/bottom */

    box-sizing: border-box;
    position: relative;

    background: white;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
    
    padding: var(--page-inset-ends) var(--page-inset-side);
    
    /* footer-related stuff */
    --footer-height: 2in;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.page.portraitA4 {
    --page-side-numbers: '1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25';
    --page-height: 29.7cm;
    width: 21cm;
    height: var(--page-height);
}
.page.landscapeA4 {
    --page-side-numbers: '1 2 3 4 5 6 7 8 9 10 11 12 13 14 15';
    --page-height: 21cm;
    width: 29.7cm;
    height: var(--page-height);
}

.page::before, .page::after {
    --page-vertical-line: black 0.1cm solid;

    box-sizing: border-box;
    width: var(--page-inset-side);
    position: absolute;
    top: var(--page-inset-ends);
    
    /* vertical line length */
    height: calc(
        var(--page-height)
        - (2 * var(--page-inset-ends))
        - 2.1cm /* space for footer */
    );
}

.page::before {
    content: var(--page-side-numbers);
    border-right: var(--page-vertical-line);
    left: 0;
    
    line-height: 0.9cm;
    font-weight: bold;
    
    --numbers-inset: 0.3in;
    /* leave no room for content so that we guarantee overflow and wrapping */
    padding-left: calc(var(--page-inset-side) - var(--numbers-inset));
    padding-right: var(--numbers-inset);
}

.page::after {
    content: '';
    border-left: var(--page-vertical-line);
    right: 0;
}

.pageContent {
    margin-inline: 0.4cm;
    margin-top: 2in;
}

.pageFooter {
    font-size: 9pt;
    display: grid;
    grid-template-columns: 5cm auto 6.3cm;
    margin-inline: 0.5cm;
}
.pageFooter p {
    margin: 0;
}
.pageFooter > :nth-child(2) {
    text-align: center;
}

<body>
    <div class = "page portraitA4">
        <div class = "pageContent">Page 1</div>
        <div class = "pageFooter">
            <div>
                <p>Ut nec felis non quam dictum ultrices.</p>
                <p>Nullam gravida nulla ac est laoreet gravida.</p>
            </div>
            <div>
                3
            </div>
            <div>
                <p>Ut nec felis non quam dictum ultrices.</p>
                <p>Nullam gravida nulla ac est laoreet gravida.</p>
                <p>Vestibulum tempus tellus egestas, tempor justo
                   interdum, accumsan nisl.</p>
                <p>Sed mollis quam sed faucibus condimentum.</p>
            </div>
        </div>
    </div>
    <div class = "page landscapeA4">
        <div class = "pageContent">Page 2</div>
        <div class = "pageFooter">
            <div>
                <p>Ut nec felis non quam dictum ultrices.</p>
                <p>Nullam gravida nulla ac est laoreet gravida.</p>
            </div>
            <div>
                3
            </div>
            <div>
                <p>Ut nec felis non quam dictum ultrices.</p>
                <p>Nullam gravida nulla ac est laoreet gravida.</p>
                <p>Vestibulum tempus tellus egestas, tempor justo
                   interdum, accumsan nisl.</p>
                <p>Sed mollis quam sed faucibus condimentum.</p>
            </div>
        </div>
    </div>
 </body>

Да, я работал на базе, которую вы предоставили. Хорошая работа выглядит великолепно. это помогло мне понять расположение DIV и текста на всей странице. Спасибо.

— 19.09.2023 16:12

18.09.2023 16:30