如何创建具有两个内部互不相同的内部imgclass项的表?

时间:2019-05-25 01:27:03

标签: html css eclipse

我需要完成我正在参加的Web App开发课程的作业。说明是:

  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元素的颜色样式更改为深绿色。
  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>

我希望图片能够显示,但是没有一个显示。 我从我的CSS文件中看到h1以正确的颜色显示,段落文本,由CSS更改的背景颜色以及水平线规则。

1 个答案:

答案 0 :(得分:0)

#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>