Как создать таблицу с двумя внутренними вложенными элементами imgclass с разной прозрачностью? - PullRequest
Новая
       6

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

0 голосов
/ 25 мая 2019

Мне нужно выполнить задание для курса разработки веб-приложений, который я прохожу.Инструкции:

  1. Включите ссылку на CSS-лист, который вы создали (сделано)
  2. Добавьте стили заголовков (сделано)
  3. Добавьте заголовок страницы "Имея«Развлекайся со стилями» (готово)
  4. Поместите некоторый текст в блок абзаца (готово)
  5. Добавьте таблицу с двумя строками и тремя столбцами
  6. Поместите одно и то же изображение для каждогоячейка в первом ряду
  7. Введите 25% непрозрачности, 50% непрозрачности и 100% непрозрачности во втором ряду
  8. Создание двух внутренних (встроенных) стилей imgclass «a« Один будет классом »a »другой класс« b. »
  9. Установите непрозрачность для« a »на .25 (точка 25) и« b »на .50 (точка 50)
  10. Обновите первое изображениев таблице стиль img класса "a"
  11. Установите второе изображение в таблице в стиле класса img "b"
  12. Измените стиль цвета для элемента h1 на teal.
  13. Сделать стиль ширины элемента p равным 50%, используя встроенный стиль.

Мне нужна помощь с № 5, 6 и 8.

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

<div>
<table>
<tbody>
<tr> <th> a </th> <th> b </th> <th> c </th></tr>
<style type= "text/css">
.imga {width 300px; height:238px; opacity:.25}
.imgb {width 300px; height:238px; opacity:.50}
<img class= "a" src= "tiger.jpg">
<img class= "b" src= "tiger.jpg">
</style>

</tbody>
</table>
</div>
<hr>
</html>

<!DOCTYPE html>

<html>

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="ISO-8859-1">
<title>Styles</title>


</head>
<body>
<h1>Having Fun with Styles</h1>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nullam id orci elementum, interdum velit eget, congue felis. 
Sed erat odio, semper finibus nisl quis, congue auctor est. 
Curabitur accumsan mi in leo tincidunt eleifend.             
</p>

<div>
<table> 



<tbody>
<tr> <th>a </th> <th>b </th> <th> c</th> </tr>
<style type= "text/css">
.imga {width 300px; height:238px; opacity:.25}
.imgb {width 300px; height:238px; opacity:.50}
<img class= "a" src= "tiger.jpg">
<img class= "b" src= "tiger.jpg">
</style>


</tbody>
</table>
</div>
<hr>
</html>

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

1 Ответ

0 голосов
/ 25 мая 2019

Число # 5, # 6 и # 8 

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="ISO-8859-1">
<title>Styles</title>

<style>
    .a {
        opacity: 0.25;
    }
    .b {
        opacity: 0.50;
    }
</style>

</head>
<body>
<h1>Having Fun with Styles</h1>

<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nullam id orci elementum, interdum velit eget, congue felis. 
Sed erat odio, semper finibus nisl quis, congue auctor est. 
Curabitur accumsan mi in leo tincidunt eleifend.             
</p>

<table> 
<tbody>
    <tr> <!-- Row 1 -->
        <td>
            <img class= "a" src= "tiger.jpg">
        </td> 
        <td> 
            <img class= "b" src= "tiger.jpg">
        </td> 
        <td> 
            <img src= "tiger.jpg">
        </td> 
    </tr>
    <tr> <!-- Row 2 -->
        <td style="opacity: 0.25;">
            Cell 2,1
        </td> 
        <td style="opacity: 0.50;"> 
            Cell 2,2 
        </td> 
        <td style="opacity: 1;"> 
            Cell 2,3
        </td> 
    </tr>
</tbody>
</table>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...