Как создать серый цвет с левой и правой стороны страницы?

Я работаю над страницей макета asp.net MVC. Мне нужно сделать макет страницы с левой и правой стороны страницы серым.

но я не знаю, как это сделать, используя html и CSS или загрузочную загрузку.

именно то, что мне нужно, это как назначить левую и правую сторону серым цветом в качестве изображения

образец мне нужно сделать, как показано ниже:

Страница макета, как показано ниже:

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Resignation Submission Form</title>
   





    <style>
        .container {
            width: 80%;
            margin-top:-50px;
            margin-left: 130px;
            padding-left: 130px;
        }

        .header {
            width: 100%;
    grid-template-columns:34mm 102mm 34mm;*/
            display: flex;
        }

      

        .header-Title {
            flex: 1;
            font-family: Arial;
        }

        .header-CompanyLogo {
            width: 150mm;
            display: flex;

        }
        
    </style>

</head>
<body>
    <div class = "container">
        <div class = "header">
            
            <div class = "header-Title">
                <b style = "font-size:11px;"></b>
                <br />
                <b style = "font-size:11px;"></b>
                <br />
                <b style = "font-size:11px;"></b>
                <br />
                <b style = "font-size:11px;"></b>
                <br />
                <b style = "font-size:30px;">Employee Self Service</b>
                <br /><br />
                <b style = "font-size:12px;"><u></u></b>

            </div>
            @*<div class = "header-CompanyLogo">
            <img src = "~/Images/CompanyLogo.jpg" style = "max-height: 23mm; margin: 1px;" />
        </div>*@
        </div>
    </div>
    <hr/>
  
    <div class = "container body-content">
        
        <footer>
            <p>Resignation Submission Form Application</p>
        </footer>
    </div>

  


   

</body>
</html>

Обновленный пост

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

Можете ли вы показать мне скрипку или образец, пожалуйста?

У вас есть хотя бы одна опечатка в CSS.

— 09.10.2023 20:43

так как это сделать, пожалуйста

— 09.10.2023 20:44

Сначала исправьте опечатку (и любые другие ошибки). Затем посмотрите, решит ли это вашу проблему. Если это не так, вернитесь сюда и обновите свой вопрос, чтобы он соответствовал.

— 09.10.2023 20:47

Я обновил свой пост. Можете ли вы показать мне, как назначить серый цвет слева и справа от макета страницы, как показано на изображении выше, пожалуйста?

— 09.10.2023 20:51

Установить фон body серым, а фон элементов .container белым?

— 09.10.2023 21:54

Можете ли вы показать мне образец скрипки, как вам нравится, если вам нужно изменить мой код, или из образца, который у вас есть, любой может принять

— 09.10.2023 22:01

javascript html jquery css bootstrap-4

09.10.2023 20:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

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

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

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

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

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

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

Ответы 1

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

Я обновил CSS-часть кода, и теперь вы можете видеть, что левая и правая стороны страницы серые, а средняя область содержимого — белая:

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Resignation Submission Form</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #b5b7bb; /* Set the background color for the entire page */
        }

        .container {
            max-width: 80%; /* Set a max-width for the content area */
            margin: 0 auto; /* Center the content area horizontally */
            background-color: #fff; /* Set the background color of the container to gray */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow to the content area */
        }

        .header {
            text-align: center;
            padding: 20px;
        }

        .header-Title {
            font-family: Arial;
        }

        .body-content {
            padding: 20px;
        }

        footer {
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class = "container">
        <div class = "header">
            <div class = "header-Title">
                <b style = "font-size:11px;"></b>
                <br />
                <b style = "font-size:11px;"></b>
                <br />
                <b style = "font-size:11px;"></b>
                <br />
                <b style = "font-size:11px;"></b>
                <br />
                <b style = "font-size:30px;">Employee Self Service</b>
                <br /><br />
                <b style = "font-size:12px;"><u></u></b>
            </div>
        </div>
        <hr />
        <div class = "container body-content">
            <!-- Your content goes here -->
        </div>
        <footer>
            <p>Resignation Submission Form Application</p>
        </footer>
    </div>
</body>
</html>

12.10.2023 14:51

Другие вопросы по теме

Как выровнять 3 столбца

Веб-приложение JavaScript не может найти элемент для вставки текста

Как предоставить резервный CSS до загрузки фактического CSS?

Шаблон ввода HTML допускает пробелы после этого

CSS-анимация: отрегулируйте скорость мигания цвета фона с учетом BPM и ударов

Как настроить ширину и высоту контента при повороте блока в CSS

Как сохранить угол без количества шагов в степпере: HTML, CSS

Проблемы столкновения с центрированием div

JavaScript Stopwatch будет приостанавливаться при смене вкладки браузера вместо продолжения

Ежедневная загрузка CSV-файла с веб-сайта по времени в определенную папку

Как создать серый цвет с левой и правой стороны страницы?

Ответы 1

Другие вопросы по теме

Похожие вопросы