Написать код на CSS и HTML

По дате

По Рейтингу

user_300442710

Мастер

1г

HTML (index.html):

123456789101112131415161718192021222324252627

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
    <div class="container"> 
        <div class="site_header"> 
            Шапка сайта 
        </div> 
        <div class="middle_info"> 
            <div class="left_column"> 
                Левая колонка 
            </div> 
            <div class="content"> 
                Область контента 
            </div> 
        </div> 
        <div class="lower_info"> 
            Подвал сайта 
        </div> 
    </div> 
</body> 
</html>

CSS (styles.css):

12345678910111213141516171819202122232425262728293031323334353637383940414243444546

 body, html { 
    height: 100%; /* Нужно для поддержания высоты окна */ 
} 
 
.container { 
    width: 100%; 
    height: 100%; 
    background-color: red; /* Подкраска */ 
    text-align: center; 
 
    /* Настройка шрифта на весь сайт */ 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 18px; 
    font-weight: 800; 
} 
 
.site_header { 
    width: 100%; 
    height: 100px; 
    background-color: cornflowerblue; /* Подкраска */ 
} 
 
.middle_info { 
    width: 100%; 
    height: calc(100% - 100px - 100px); 
    background-color: pink; /* Подкраска */ 
    display: flex; 
} 
 
.middle_info > .left_column { 
    width: 100px; 
    height: 100%; 
    background-color: skyblue; /* Подкраска */ 
} 
 
.middle_info > .content { 
    width: calc(100% - 100px); 
    height: 100%; 
    background-color: aquamarine; /* Подкраска */ 
} 
 
.lower_info { 
    width: 100%; 
    height: 100px; 
    background-color: cadetblue; /* Подкраска */ 
}

Пожалуйста

sfera_168

Искусственный Интеллект

1г

На <div>ах делай да и всё, подвал флексом придавишь

z9xsvoipgjphzyl

Искусственный Интеллект

1г

Я бы уже не стал делать как выше. Есть более современные средства. Внизу пример на гриде с адаптивным поведением.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Grid Layout with Responsive Design</title> 
    <style> 
        body { 
            margin: 0; 
            padding: 0; 
            height: 100vh; 
            display: grid; 
            grid-template-rows: min-content 1fr min-content; 
            grid-template-columns: 100px 1fr; 
            background-color: #add8e6; 
            color: #000080; 
        } 
 
        header, footer { 
            grid-column: span 2; /* Занимаем обе колонки */ 
            text-align: center; 
            background-color: #add8e6; 
            border-bottom: 2px solid #000080; 
            padding: 10px; 
            box-sizing: border-box; 
        } 
 
        main { 
            display: grid; 
            grid-template-columns: 100px 1fr; 
            grid-template-rows: 1fr; 
            background-color: #add8e6; 
        } 
 
         
 
        .side-left { 
            writing-mode: vertical-rl; 
            transform: rotate(180deg); 
            text-align: center; 
            padding: 10px; 
            box-sizing: border-box; 
		 
            border-left: 2px solid #000080; 
         
        } 
 
        .content { 
            padding: 10px; 
            box-sizing: border-box; 
        } 
 
        footer { 
            text-align: center; 
            background-color: #add8e6; 
            border-top: 2px solid #000080; 
            padding: 10px; 
            box-sizing: border-box; 
			border-bottom: 0px; 
        } 
 
        /* Добавленные медиа-запросы для адаптивного дизайна */ 
        @media only screen and (max-width: 600px) { 
 
 
            header, footer { 
                text-align: left; 
            } 
        } 
    </style> 
</head> 
<body> 
    <header> 
        <h1>Шапка сайта</h1> 
    </header> 
    <main> 
        <div class="side-left"> 
            <p>Левая колонка</p> 
        </div> 
        <div class="content"> 
            <p>Область контента</p> 
        </div> 
    </main> 
    <footer> 
        <p>Подвал сайта</p> 
    </footer> 
</body> 
</html>