Создайте стиль простого PNG и iframe с помощью CSS - PullRequest
0 голосов
/ 21 июня 2020

Я застрял в, казалось бы, довольно простой проблеме:

Я хочу стилизовать шляпу PNG и iframe, которую я добавил на свой веб-сайт, отмеченную тегами id. Хотя, похоже, им все равно. Оба остаются неизменными.

Это мой код:

<!DOCTYPE html>
<html>
    <head>
       <style>

            #test{
              font-weight: bold;
            }

            #image1 {
              max-width: 80%;
            }

            #mb-map {
              width = 600px;
              height = 500px;
            }
        </style>
    </head>
    <body>
        <p id = "test">test</p>
        <div id = "image1">
            <img src = "link to image">
            </img>
        </div>

    <iframe id = "mb-map"
        src='link to map supposed to be embedded' />

    </body>
</html>

Текст с id = "test" правильно выделен жирным шрифтом.

Ответы [ 2 ]

1 голос
/ 21 июня 2020
  1. Тег img имеет только открытый тег. Также отсутствует атрибут alt для тега img.

  2. Это неверно: #mb-map { width = 600px; height = 500px; } Это правильно: #mb-map { width: 600px; height: 500px; }

  3. Добавьте закрытый тег для iframe, например, <iframe></iframe>

  4. Также вам не хватает тега title в вашем head.

Правильный код

<!DOCTYPE html>
<html>
<head>
  <style>
    #test {
      font-weight: bold;
    }

    #image1 {
      max-width: 80%;
    }

    #mb-map {
      width: 600px;
      height: 500px;
    }
  </style>
  <title></title>
</head>
<body>
<p id="test">test</p>
<div id="image1">
  <img src="link to image" alt="">
</div>
<iframe id="mb-map" src="link to map supposed to be embedded"></iframe>
</body>
</html>
0 голосов
/ 21 июня 2020

Ваш #image1 не является фактическим img, но он окружает div.

В вашем CSS попробуйте #image1 img { max-width: 80%; }

Для iframe ваш CSS использует знак равенства вместо двоеточия. Используйте это:

#mb-map {
  width: 600px;
  height: 500px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...