伪类及伪元素课堂内容及课后作业

CSS 伪类用于向某些选择器添加特殊的效果。

CSS 伪元素用于向某些选择器添加特殊元素。

新建一个html文件,代码内容如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pseudo Class And Pseudo Element</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/fontawesome.css" rel="stylesheet">
<style type="text/css">
a:link{
    color:#00F;
}
a:visited{
    color:black;
}
a:hover{
    color:yellow;
}
a:active{
    color:red;
}
tr td:nth-child(1):before{
    content:"你的名字:";
    color:red;    
}
tr td:nth-child(3):before{
    content:url(http://doc.exesoft.cn/pic/phone.png);    
    display:inline-block;
    width:23px;
    height:23px;
    position:relative;
    left:-10px;
    top:5px;    
}
</style>
</head>
<body>
<div class="container">
<h2><a href="http://www.cnblogs.com/exesoft">伪类及伪元素演示</a></h2>
<table class="table table-bordered">
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>Phone</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</body>
</html>

用浏览器预览上方的代码文件。

最终作业提交方式:

1.看懂上面代码,

2.复制到到自定义html文件中,进行预览测试。

3.用手机抓页面预览动态演示视频,最后把视频传至我的邮箱:ma@exesoft.cn

邮件名称类似: 2018电商1班-18-张三-5-9-网页作业,红字要符合自己.

另外:

所用的phone.png图标素材下载地址: http://doc.exesoft.cn/pic/phone.png

伪类及伪元素 课堂内容及课后作业

最终作业提交方式:

伪类及伪元素课堂内容及课后作业