Как сделать вертикальный прямоугольник с рамкой слева от экрана и горизонтальный прямоугольник в верхней части веб-страницы?

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

эскиз

<-- язык: html -->

<body>
    <div class = "header">
        <div class = "logo">
            <img class = "logo_file" src = "exemple_images/logo.jpg">
        </div>
            </div>
    <div class = "row">
        <div class = "leftcolumn">
            <div class = "xxss_icons">
                <img class = "icon" src = "exemple_images/instagram.png">
                <img class = "icon" src = "exemple_images/facebook.png">
                <img class = "icon" src = "exemple_images/twitter.png">
            </div>
          </div>  
    </div>
    <div>
</div>
</body>

  /* Header */
  .header {
      border: 1px solid #FCFF76;
      display: flex;
      font-size: 70px;
      text-align: center;
  }

 .logo {
      border-right: 1px solid #FCFF76;
      width: 9.5%;
      float: left;
  }
 .row {
    display: flex; /* equal height of the children */
  }
 /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {
      width: 100%;
      padding: 0;
    }
  }

html css

12.12.2020 09:17

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

537

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

Ответы 1

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

Просто сделал быстрый пример. Если вы можете, я бы порекомендовал вам использовать Bootstrap (https://getbootstrap.com/docs/4.5/getting-started/introduction/), его действительно легко установить, и он поможет вам быстрее стилизовать вещи ( и всегда на связи) ;)

.sidenav {
    height: 100%;
    width: 160px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 0px;
    border-right: solid yellow 1px;
  }

.square {
    padding: 0;
    margin: 0;
    position: absolute;
    border: solid yellow 1px;
    height: 160px;
    width: 160px;
}

.navbar{
    overflow: hidden;
    background-color: #111;
    position: fixed;
    top: 0;
    width: 100%;
    height: 160px;
    border-bottom: solid yellow 1px;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "sidenav.css" />

    <title>Document</title>
</head>
<body>

    <div class = "navbar">
    </div>

    <div class = "sidenav">
        <div class = "square"></div>
    </div>  
</body>
</html>

12.12.2020 09:45

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

Кнопки jQuery при нажатии на кнопку jQuery не работают

Как изменить ширину линии значка React?

Почему нижний край обрезается?

Полупрозрачное наложение поверх HTML-видео всегда позади видео

Bootstrap v5.0.0-beta1 - ml-auto не работает для панели навигации

Элементы навигационной панели подпрыгивают при наведении

Установить изображение в качестве значка внутри кнопки

Событие прокрутки в HTML

Перебор списка <div> при нажатии клавиши нажатием клавиши вниз и вверх

Добавьте div к элементу с помощью метода jQuery .add()

Как сделать вертикальный прямоугольник с рамкой слева от экрана и горизонтальный прямоугольник в верхней части веб-страницы?

Ответы 1

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

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